注意
在uc浏览器和ios微博里面,是不支持视频交互的,暂时没有办法把层级放在视频上方,IOS必须用click事件点击之后视频才会播放,不支持自动播放安卓环境下,视频播放会全屏播放,播放完之后不会回到原页面,可以做个display: none
让视频退出全屏
微信解决视频层级播放问题
腾讯接入文档链接https://x5.tencent.com/tbs/guide/video.html
<video
class="js-video"
id="idVideo"
webkit-playsinline="true"
playsinline="true"
x5-playsinline="true"
x-webkit-airplay="true"
x5-video-player-type="h5"
x5-video-player-fullscreen="true"
x5-video-orientation="portrait"
preload="auto" ></video>
视频的几个事件
// 视频加载完毕
local.addEventListener('canplaythrough', function() {
//要执行的函数内容
console.log('资源加载完成了');
});
// 进入全屏
local.addEventListener('x5videoenterfullscreen', function() {
console.log('进入全屏了');
});
// 退出全屏
local.addEventListener('x5videoexitfullscreen', function() {
console.log('退出全屏了');
});
// 播放完了
local.addEventListener('ended', function() {
console.log('播放完了');
})
// 监听播放进度
local.ontimeupdate = function(e) {
console.log('播放进度')
};
最后
第一次谢博客,写的不好,请见谅