<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<title>Hello H5+</title>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript">
var video = null;
var playing = false;
// H5 plus事件处理
function plusReady(){
// 创建视频播放控件
video = new plus.video.VideoPlayer('video',{
src:'../video/bee.mp4'
});
video.addEventListener('play', function(){
updatePlaying(true);
}, false);
video.addEventListener('pause', function(){
updatePlaying(false);
}, false);
video.setStyles({objectFit:'fill', loop:true, autoplay:true,controls:true});
video.play();
}
document.addEventListener('plusready', plusReady, false);
// 播放
function playVideo1() {
var path = document.getElementById('path1').value;
if(path&&path.length>0) {
video.setOptions({src:path});
video.setStyles({objectFit:'fill', loop:true, autoplay:true,controls:true});
video.play();
console.log('mm');
}
}
function danmuVideo(){
console.log('tm');
}
function playVideo2() {
var path = document.getElementById('path2').value;
if(path&&path.length>0) {
video.setOptions({src:path});
video.play();
}
}
function updateVideo() {
danmuVideo();
}
// 更新为播放状态
function updatePlaying(play) {
playing = play;
document.getElementById('pp').innerText = playing?'暂停':'播放';
}
// 播放/暂停
function ppVideo() {
playing?video.pause():video.play();
}
// 全屏
function fullscreenVideo() {
video.requestFullScreen(-90);
}
// 切换倍速
var ri = 2;
var ra = [0.5,0.8,1.0,1.25,1.5,2];
function switchRate() {
ri++;
if(ri>=ra.length){
ri = 0;
}
video.playbackRate(ra[ri]);
document.getElementById('rate').innerText = '切换倍速('+ra[ri]+')';
}
// 创建子创建覆盖在视频控件上
var wsub = null;
function createSubview(){
if(!wsub) {
var topoffset = document.getElementById('video').offsetTop;
wsub=plus.webview.create('video_videoplayer_sub.html','sub',{top:topoffset,height:'300px',position:'static',scrollIndicator:'none',background:'transparent'});
plus.webview.currentWebview().append(wsub);
}
wsub.isVisible()?wsub.hide():wsub.show();
}
</script>
<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
<style type="text/css">
input {
width:70%;
font-size: 16px;
padding: .2em .2em;
border: 1px solid #00B100;
-webkit-user-select: text;
}
button {
width:20%;
margin:6px 0 6px 6px;
font-size: 16px;
color: #FFF;
background-color: #00CC00;
border: 1px solid #00B100;
padding: .2em 0em;
-webkit-border-radius: 5px;
border-radius: 5px;
}
</style>
</head>
<body>
<br/>
<div id="video" style="width:98%;height:300px;background-color:#000000;margin:auto"></div>
<br/>
<div style="text-align:center; margin:auto;">
<!--<input id="path1" type="text" value="http://vjs.zencdn.net/v/oceans.mp4" placeholder="请输入视频地址,支持mp4/flv格式"/>-->
<input id="path1" type="text" value="https://mp4.vjshi.com/2021-09-26/0a22153dbd4f42598325396c459f0160.mp4" placeholder="请输入视频地址,支持mp4/flv格式"/>
<button onclick="playVideo1()">播放</button>
<br/>
<input id="path2" type="text" value="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" placeholder="请输入视频地址,支持rtmp直播"/>
<button onclick="playVideo2()">直播</button>
</div>
<div id="pp" class="button" onclick="ppVideo()">播放</div>
<div class="button" onclick="fullscreenVideo()">全屏</div>
<div id="rate" class="button" onclick="switchRate()">切换倍速(1)</div>
<div class="button" onclick="updateVideo()">更新direction</div>
<div class="button" onclick="createSubview()">控件上内容显示/隐藏</div>
</body>
</html>
- 发布:2021-11-14 11:28
- 更新:2021-12-15 15:32
- 阅读:1259
产品分类: HTML5+
HBuilderX版本号: 3.2.12
手机系统: Android
手机系统版本号: Android 7.1.1
手机厂商: 模拟器
手机机型: 夜神
打包方式: 云端
示例代码:
操作步骤:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<title>Hello H5+</title>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript">
var video = null;
var playing = false;
// H5 plus事件处理
function plusReady(){
// 创建视频播放控件
video = new plus.video.VideoPlayer('video',{
src:'../video/bee.mp4'
});
video.addEventListener('play', function(){
updatePlaying(true);
}, false);
video.addEventListener('pause', function(){
updatePlaying(false);
}, false);
video.setStyles({objectFit:'fill', loop:true, autoplay:true,controls:true});
video.play();
}
document.addEventListener('plusready', plusReady, false);
// 播放
function playVideo1() {
var path = document.getElementById('path1').value;
if(path&&path.length>0) {
video.setOptions({src:path});
video.setStyles({objectFit:'fill', loop:true, autoplay:true,controls:true});
video.play();
console.log('mm');
}
}
function danmuVideo(){
console.log('tm');
}
function playVideo2() {
var path = document.getElementById('path2').value;
if(path&&path.length>0) {
video.setOptions({src:path});
video.play();
}
}
function updateVideo() {
danmuVideo();
}
// 更新为播放状态
function updatePlaying(play) {
playing = play;
document.getElementById('pp').innerText = playing?'暂停':'播放';
}
// 播放/暂停
function ppVideo() {
playing?video.pause():video.play();
}
// 全屏
function fullscreenVideo() {
video.requestFullScreen(-90);
}
// 切换倍速
var ri = 2;
var ra = [0.5,0.8,1.0,1.25,1.5,2];
function switchRate() {
ri++;
if(ri>=ra.length){
ri = 0;
}
video.playbackRate(ra[ri]);
document.getElementById('rate').innerText = '切换倍速('+ra[ri]+')';
}
// 创建子创建覆盖在视频控件上
var wsub = null;
function createSubview(){
if(!wsub) {
var topoffset = document.getElementById('video').offsetTop;
wsub=plus.webview.create('video_videoplayer_sub.html','sub',{top:topoffset,height:'300px',position:'static',scrollIndicator:'none',background:'transparent'});
plus.webview.currentWebview().append(wsub);
}
wsub.isVisible()?wsub.hide():wsub.show();
}
</script>
<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
<style type="text/css">
input {
width:70%;
font-size: 16px;
padding: .2em .2em;
border: 1px solid #00B100;
-webkit-user-select: text;
}
button {
width:20%;
margin:6px 0 6px 6px;
font-size: 16px;
color: #FFF;
background-color: #00CC00;
border: 1px solid #00B100;
padding: .2em 0em;
-webkit-border-radius: 5px;
border-radius: 5px;
}
</style>
</head>
<body>
<br/>
<div id="video" style="width:98%;height:300px;background-color:#000000;margin:auto"></div>
<br/>
<div style="text-align:center; margin:auto;">
<!--<input id="path1" type="text" value="http://vjs.zencdn.net/v/oceans.mp4" placeholder="请输入视频地址,支持mp4/flv格式"/>-->
<input id="path1" type="text" value="https://mp4.vjshi.com/2021-09-26/0a22153dbd4f42598325396c459f0160.mp4" placeholder="请输入视频地址,支持mp4/flv格式"/>
<button onclick="playVideo1()">播放</button>
<br/>
<input id="path2" type="text" value="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" placeholder="请输入视频地址,支持rtmp直播"/>
<button onclick="playVideo2()">直播</button>
</div>
<div id="pp" class="button" onclick="ppVideo()">播放</div>
<div class="button" onclick="fullscreenVideo()">全屏</div>
<div id="rate" class="button" onclick="switchRate()">切换倍速(1)</div>
<div class="button" onclick="updateVideo()">更新direction</div>
<div class="button" onclick="createSubview()">控件上内容显示/隐藏</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<title>Hello H5+</title>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript">
var video = null;
var playing = false;
// H5 plus事件处理
function plusReady(){
// 创建视频播放控件
video = new plus.video.VideoPlayer('video',{
src:'../video/bee.mp4'
});
video.addEventListener('play', function(){
updatePlaying(true);
}, false);
video.addEventListener('pause', function(){
updatePlaying(false);
}, false);
video.setStyles({objectFit:'fill', loop:true, autoplay:true,controls:true});
video.play();
}
document.addEventListener('plusready', plusReady, false);
// 播放
function playVideo1() {
var path = document.getElementById('path1').value;
if(path&&path.length>0) {
video.setOptions({src:path});
video.setStyles({objectFit:'fill', loop:true, autoplay:true,controls:true});
video.play();
console.log('mm');
}
}
function danmuVideo(){
console.log('tm');
}
function playVideo2() {
var path = document.getElementById('path2').value;
if(path&&path.length>0) {
video.setOptions({src:path});
video.play();
}
}
function updateVideo() {
danmuVideo();
}
// 更新为播放状态
function updatePlaying(play) {
playing = play;
document.getElementById('pp').innerText = playing?'暂停':'播放';
}
// 播放/暂停
function ppVideo() {
playing?video.pause():video.play();
}
// 全屏
function fullscreenVideo() {
video.requestFullScreen(-90);
}
// 切换倍速
var ri = 2;
var ra = [0.5,0.8,1.0,1.25,1.5,2];
function switchRate() {
ri++;
if(ri>=ra.length){
ri = 0;
}
video.playbackRate(ra[ri]);
document.getElementById('rate').innerText = '切换倍速('+ra[ri]+')';
}
// 创建子创建覆盖在视频控件上
var wsub = null;
function createSubview(){
if(!wsub) {
var topoffset = document.getElementById('video').offsetTop;
wsub=plus.webview.create('video_videoplayer_sub.html','sub',{top:topoffset,height:'300px',position:'static',scrollIndicator:'none',background:'transparent'});
plus.webview.currentWebview().append(wsub);
}
wsub.isVisible()?wsub.hide():wsub.show();
}
</script>
<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
<style type="text/css">
input {
width:70%;
font-size: 16px;
padding: .2em .2em;
border: 1px solid #00B100;
-webkit-user-select: text;
}
button {
width:20%;
margin:6px 0 6px 6px;
font-size: 16px;
color: #FFF;
background-color: #00CC00;
border: 1px solid #00B100;
padding: .2em 0em;
-webkit-border-radius: 5px;
border-radius: 5px;
}
</style>
</head>
<body>
<br/>
<div id="video" style="width:98%;height:300px;background-color:#000000;margin:auto"></div>
<br/>
<div style="text-align:center; margin:auto;">
<!--<input id="path1" type="text" value="http://vjs.zencdn.net/v/oceans.mp4" placeholder="请输入视频地址,支持mp4/flv格式"/>-->
<input id="path1" type="text" value="https://mp4.vjshi.com/2021-09-26/0a22153dbd4f42598325396c459f0160.mp4" placeholder="请输入视频地址,支持mp4/flv格式"/>
<button onclick="playVideo1()">播放</button>
<br/>
<input id="path2" type="text" value="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" placeholder="请输入视频地址,支持rtmp直播"/>
<button onclick="playVideo2()">直播</button>
</div>
<div id="pp" class="button" onclick="ppVideo()">播放</div>
<div class="button" onclick="fullscreenVideo()">全屏</div>
<div id="rate" class="button" onclick="switchRate()">切换倍速(1)</div>
<div class="button" onclick="updateVideo()">更新direction</div>
<div class="button" onclick="createSubview()">控件上内容显示/隐藏</div>
</body>
</html>
预期结果:
objectFit:'fill',设置后视频可以拉伸铺满全屏
objectFit:'fill',设置后视频可以拉伸铺满全屏
实际结果:
objectFit:'fill',设置后不起作用
objectFit:'fill',设置后不起作用
bug描述:
当遇到宽屏幕的时候,objectFit:'fill'
,设置了不起作用,没办法拉伸视频,两边留有黑边
10 个回复
1***@qq.com (作者)
用的5+里边的案例,官方可以试下确定是BUg
1***@qq.com (作者)
望及时修复下以便适配不同屏幕
1***@qq.com (作者)
宽屏两边黑边
浙江小牛寻宝
有没有官方能解决一下,我也碰到这个问题,在电视机上使用,设置填充无效。还是会有黑边@DCloud_heavensoft @DCloud_Android_ST @DCloud_Android_DQQ
浙江小牛寻宝
本来使用的是uniapp的video,但是在播放四个监控,会有三个一直在缓冲,换成html5+的videoPlaye可以四个同时加载出来,但是又有无法填充问题。着急上线
浙江小牛寻宝
有其他解决方案吗
浙江小牛寻宝
官方能不能回个话啊!
DCloud_Android_DQQ
我现在看看
DCloud_Android_DQQ
bug 已确认,稍后版本会修复此问题
浙江小牛寻宝
问一下,下一版本的时间是什么时候
2021-12-01 16:07
DCloud_Android_DQQ
回复 浙江小牛寻宝: 暂无确定时间,毛毛估一周内。
2021-12-01 16:38
DCloud_Android_DQQ
HX 3.3.1 alpha bug已修复