我正在使用视频标签在iPad和Android设备中流式传输hls。
我在Android中遇到了一个问题,即进入全屏后,视频会拉伸以填满设备的屏幕,这破坏了原始纵横比。
不过,旋转后它走对了。
这是我正在使用的示例代码,虽然它是hls,但我相信普通视频文件也存在同样的问题。
<video id="main-video" src="my_hls_link.m3u8" style="width:100%; height:270px;">
</video>
和javascript:
var player = document.getElementById("main-video");
player.addEventListener('webkitbeginfullscreen', function(){
this.load();
this.play();
}, false);
在Nexus 7 Android 4.1和kindlefire Android 4.0中使用chrome进行测试
我可以解决这个问题:
//fixing the bug in android that stretch video on load
function fix_stretch_video(){
var check_interval = setInterval(function(){
$('.pl-loading-btn').css('display', 'block');
if (player.videoWidth != 0) {
$('.pl-loading-btn').css('display', 'none');
$('video').css('width', '99%');
$('video').css('width', '100%');
clearInterval(check_interval);
}
},100);
}
在某些设备(或安卓版本)中不起作用。至少它是在我的 nexus 7 上的工作