<video id="first-video" width="100%" height="100%"
x5-video-player-type="h5"
x5-video-player-fullscreen="true"
x5-playsinline=""
playsinline=""
webkit-playsinline=""
:poster="poster"
preload="auto"
:src="videoUrl"
x-webkit-airplay="allow"
@ended="onPlayerEnded($event)">
</video>
let video = document.querySelector('video')
this.videoMethod(video)
videoMethod (video) {
video.addEventListener('touchstart', function () {
video.play()
})
video.addEventListener('ended', function (e) {
let second_btn_img = document.getElementsByClassName('second-btn-img')[0]
second_btn_img.style.display = 'block'
second_btn_img.onclick = function (params) {
second_btn_img.style.display = 'none'
document.getElementById('first-video').style.display = 'block'
video.play()
}
})
// 进入全屏
video.addEventListener('x5videoenterfullscreen', function () {
window.onresize = function () {
video.style.width = window.innerWidth + 'px'
video.style.height = window.innerHeight + 'px'
}
})
}
<style scoped>
#first-video{
object-fit: fill;
}
.container {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 999;
}
.second-btn-img,.platStart{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 999;object-fit: fill;
display: none;
}
.platStart img, .second-btn-img img{
width: 100%;
object-fit: fill;
}
</style>
详细解读
属性
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;
}
})
参考文献、地址:
1、https://segmentfault.com/a/1190000010377156
2、https://x5.tencent.com/tbs/guide/video.html