html不同平台,【HTML5】video 在不同平台下的差异性

时间：2016-09-04 00:03:30

转载：http://imweb.io/topic/560a6015c2317a8c3e086207

文章来自腾讯 imweb社区的文章， 阅读请移步

今天刚好在做移动端的video播放， 需要考虑多个平台的差异性，刚好看到这个文章，记录下来以便后期使用到时，容易查看。

video 在移动端的一些注意点

各个浏览器下的video的展现效果不一致，因此需要统一的效果

视频做成小窗播放，并且可以移动的功能

【微信浏览器，自动全屏，目前没有比较好的解决方案,不过如果安装了QQ浏览器，微信浏览器可以使用自带的小窗功能】

同样是套一层div， 然后移动div接口。 但是在移动端会存在一个问题， 就是 video播放之后，会变成在顶层。那么如果是小窗播放， 如何关闭窗口呢？ 那就要在 包 video的div容器外部 添加一个按钮， 并且让 让 div容器 overflow:hidden;

大概是这样的

image

/**

* 移动端拖动

* @param selector 可以拖动的标签

*/

function touchDrag(selector, callback) {

var moveX, moveY, startX, startY;

$(document).on("touchstart", selector, function (event) {

var touchPros = event.touches[0];

startX = touchPros.clientX - event.currentTarget.offsetLeft;

startY = touchPros.clientY - event.currentTarget.offsetTop;

return false;

}).on("touchmove", selector, function (event) {

var touchPros = event.touches[0];

moveX = touchPros.clientX - startX;

moveY = touchPros.clientY - startY;

callback(event, moveX, moveY)

});

}

video全屏方法

var elem = document.getElementById('video')

if (elem.requestFullscreen) {

elem.requestFullscreen();

} else if (elem.mozRequestFullScreen) {

elem.mozRequestFullScreen();

} else if (elem.webkitRequestFullscreen) {

elem.webkitRequestFullscreen();

}

Iframe 中 video 无法全屏的解决方案

给Iframe设置这些属性即可 allowfullscreen="" allowfullsreen="true" webkitallowfullscreen="true"

frameborder="0" allowfullscreen="" allowfullsreen="true" webkitallowfullscreen="true"

id="fitvid0" style="width: 100%; height: auto;">