时间：2016-09-04 00:03:30
转载：http://imweb.io/topic/560a6015c2317a8c3e086207
文章来自腾讯 imweb社区的文章， 阅读请移步
原文： 【video标签在不同平台上的事件表现差异分析】
今天刚好在做移动端的video播放， 需要考虑多个平台的差异性，刚好看到这个文章，记录下来以便后期使用到时，容易查看。
video 在移动端的一些注意点
- 各个浏览器下的video的展现效果不一致，因此需要统一的效果
<div style="overflow:hidden; ">
<!--TODO: 可以放播放按钮，或者其他的-->
<video style="position:absolute; top:-9999"><video/>
</div>
- 视频做成小窗播放，并且可以移动的功能
【微信浏览器，自动全屏，目前没有比较好的解决方案,不过如果安装了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"
<iframe src="http://player.youku.com/embed/XMTMzMDc0MjAxMg=="
frameborder="0" allowfullscreen="" allowfullsreen="true" webkitallowfullscreen="true"
id="fitvid0" style="width: 100%; height: auto;">
</iframe>
