H5 视频播放解决方案

前两天，美团推出的杨洋H5火爆朋友圈。里面主要的是多段视频播放、暂停。
听起来很简单，但是由于腾讯白名单限制，在微信浏览器，qq浏览器，会自动将video标签中非腾讯域名的视频 ，自动全屏，结尾追加视频推荐。并且白名单申请入口已经关闭。

本文包含

• 全屏适配播放 并在视频上放置其他元素。例如下载按钮。
• 苹果手机 嵌入视频小窗播放。

• 目前替换几种解决方案的实测。

  • 上传至腾讯视频（实测已经不行）
  • gif(尺寸太大)

先上代码

//html
<video
  id="video1" 
  :src="src_mp4" 
  preload="auto"
  webkit-playsinline
  playsinline="true"

  x-webkit-airplay="allow" 
  x5-video-player-type="h5"  
  x5-video-player-fullscreen="true"
  x5-video-orientation="portraint"
  style="object-fit:fill">

</video>

//js
var video = document.querySelector('video');
videoMethod(video);

function videoMethod(video) {
    video.addEventListener('touchstart', function () {
        video.play();
    });
    setTimeout(function () { video.play(); }, 1000);
    document.addEventListener("WeixinJSBridgeReady", function (){ 
        video.play();
        video.pause();
    }, false);
    video.addEventListener('ended', function (e) {
      video.play();
    })
    //进入全屏
    video.addEventListener("x5videoenterfullscreen", function(){
    
      window.onresize = function(){
        video.style.width = window.innerWidth + "px";
        video.style.height = window.innerHeight + "px";
      }
    })
    //退出全屏
    video.addEventListener("x5videoexitfullscreen", function(){
      window.onresize = function(){
        video.style.width = 原尺寸;
        video.style.height = 原尺寸;
      }
     
    })
}

//引用js
iphone-inline-video

//css
.IIV::-webkit-media-controls-play-button,
.IIV::-webkit-media-controls-start-playback-button {
  opacity: 0;
  pointer-events: none;
  width: 5px;
}
.videobox {
  width: 4.78rem;
  height: 7.8rem;
  position: absolute;
  top: 3.2rem;
  left: 1.2rem;
}
video{
  width: 4.2rem;
  height: 7.69rem;
  position: absolute;
  left: .22rem;
  top: .7rem;
  overflow: hidden;
  margin-top:-.7rem;
}

详细解读

属性

preload="auto"

是否预加载数据

• auto 页面加载后载入整个数据
• meta 页面加载后载入元数据
• none 不载入视频

webkit-playsinline && playsinline="true"

• 小窗播放 使视频不脱离文本流，但是需要webview(allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES) ,结果就是苹果支持，安卓不支持。安卓会自动全屏播放。

x-webkit-airplay="allow"

• 字面意思 容许airplay (通过AirPlay可以把当前的视频投放到支持此技术的其他设备上。)

  • 如果是 video 标签，可以通过 x-webkit-airplay="allow" 属性开启；
  • 如果是 embed 标签，可以通过 airplay="allow" 属性开启。

x5-video-player-type="h5" && x5-video-player-fullscreen="true" &&x5-video-orientation="portraint"

• 建议看官网文档非常详细 。十分重要必看。

object-fit:fill

• 填充尺寸 详情

方法

自动播放

setTimeout(function () { video.play(); }, 1000);
//微信webview全局内嵌，WeixinJSBridgeReady方法
document.addEventListener("WeixinJSBridgeReady", function (){ 
    video.play();
    video.pause();
}, false);
//诱导用户触摸
video.addEventListener('touchstart', function () {
    video.play();
});

封面增减

除ended,timeupdate其他事件慎用

video.addEventListener('timeupdate',function (){
    //当视频的currentTime大于0.1时表示黑屏时间已过，已有视频画面，可以移除浮层（.pagestart的div元素）
    if ( !video.isPlayed && this.currentTime>0.1 ){
        $('.pagestart').fadeOut(500);
        video.isPlayed = !0;
    }
})

框架中使用

react中使用

因我们实现h5播放效果，需要在video上设置属性。但我们知道react自定义属性，需要添加data-前缀。使得生成的节点属性 并不是 x5要求的属性。造成失效。

感谢 @weishijun14 提供解决方法

React 15及更早版本

componentDidMount: function() {
  var element = ReactDOM.findDOMNode(this.refs.test);
  element.setAttribute('custom-attribute', 'some value');
}

See https://jsfiddle.net/peterjma...

React 16

自定义属性将会被原生支持在React 16,这个在RC版本中的特性，以及即将被公布。这意味着，加入自定义属性在元素中将会非常简单：

render() {
  return (
    <div custom-attribute="some-value" />
  );
}

weishijun14 实测版本

ref={(node) => { if(node){node.setAttribute('xmlns:xlink', 'w3.org/1999/xlink')} }} 

vue中使用

直接放在template中就可以了

<template>
  <div class="videobox">
    <video
      id="video1" 
      :src="src_mp4" 
      preload="auto"
      webkit-playsinline
      playsinline 

      x-webkit-airplay="allow" 
      x5-video-player-type="h5"  
      x5-video-player-fullscreen="true"
      x5-video-orientation="portraint"
      style="object-fit:fill">

    </video>
  </div>
</template>

可能遇到的问题（坑）

安卓手机全屏播放 边线问题

安卓手机中全屏播放视频，在左右会出现大概一像素的边线暴露，不能完全覆盖屏幕。如下图

解决方法：监听屏幕全屏事件中（ video.addEventListener） 手动设置video 的left值为 0。

问题图

参考文献

https://github.com/gnipbao/ib...
https://x5.tencent.com/tbs/gu...
http://zhaoda.net/2014/10/30/...