H5 視訊播放解決方案
阿新 • • 發佈:2019-02-08
前兩天,美團推出的楊洋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');
}
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://segmentfault.com/a/1190000010377156