zhongxia245/blog

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

Closed this issue · 1 comments

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