H5 視頻播放解決方案

時間 2019-11-07

標籤 h5 視頻播放解決方案简体版

原文原文鏈接

前兩天，美團推出的楊洋H5火爆朋友圈。裏面主要的是多段視頻播放、暫停。
聽起來很簡單，可是因爲騰訊白名單限制，在微信瀏覽器，qq瀏覽器，會自動將video標籤中非騰訊域名的視頻，自動全屏，結尾追加視頻推薦。而且白名單申請入口已經關閉。css

本文包含

全屏適配播放並在視頻上放置其餘元素。例以下載按鈕。
蘋果手機嵌入視頻小窗播放。
目前替換幾種解決方案的實測。html
- 上傳至騰訊視頻（實測已經不行）
- 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能夠把當前的視頻投放到支持此技術的其餘設備上。)vue
- 若是是 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其餘事件慎用html5

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要求的屬性。形成失效。node

感謝 @weishijun14 提供解決方法

React 15及更早版本

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

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

React 16

自定義屬性將會被原生支持在React 16,這個在RC版本中的特性，以及即將被公佈。這意味着，加入自定義屬性在元素中將會很是簡單：css3

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

weishijun14 實測版本

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

vue中使用

直接放在template中就能夠了git

<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>