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

时间：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>