1***@qq.com
1***@qq.com
  • 发布:2021-11-14 11:28
  • 更新:2021-12-15 15:32
  • 阅读:1036

【报Bug】objectFit:'fill',设置了不起作用,宽屏幕还是不能拉伸铺满全屏!!!

分类:HTML5+

产品分类: 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',设置后不起作用

bug描述:

当遇到宽屏幕的时候,objectFit:'fill',设置了不起作用,没办法拉伸视频,两边留有黑边

2021-11-14 11:28 负责人:DCloud_Android_DQQ 分享
已邀请:
1***@qq.com

1***@qq.com (作者)

用的5+里边的案例,官方可以试下确定是BUg

1***@qq.com

1***@qq.com (作者)

望及时修复下以便适配不同屏幕

1***@qq.com

1***@qq.com (作者)

宽屏两边黑边

浙江小牛寻宝

浙江小牛寻宝

有没有官方能解决一下,我也碰到这个问题,在电视机上使用,设置填充无效。还是会有黑边@DCloud_heavensoft @DCloud_Android_ST @DCloud_Android_DQQ

浙江小牛寻宝

浙江小牛寻宝

本来使用的是uniapp的video,但是在播放四个监控,会有三个一直在缓冲,换成html5+的videoPlaye可以四个同时加载出来,但是又有无法填充问题。着急上线

浙江小牛寻宝

浙江小牛寻宝

有其他解决方案吗

浙江小牛寻宝

浙江小牛寻宝

官方能不能回个话啊!

DCloud_Android_DQQ

DCloud_Android_DQQ

我现在看看

DCloud_Android_DQQ

DCloud_Android_DQQ

bug 已确认,稍后版本会修复此问题

DCloud_Android_DQQ

DCloud_Android_DQQ

HX 3.3.1 alpha bug已修复

该问题目前已经被锁定, 无法添加新回复