今天是个好日子 老干妈炖大鹅的好日子
X5内核是腾讯基于优秀开源Webkit深度“优化并加工”的浏览器渲染引擎 微信和手机qq都是 还有一些就不细说了
x5内核会监管video标签播放的视频 无论是暂停或结束都会推送一些广告 且是最高级 所以 通过JS或Video标签控制播放暂停 没啥用
网上找了 看了 也试了 几种方式
一 自动循环播放 手动关 看不见等于没有
(微信和许多浏览器都不让自动播放 须先触发事件 即便循环几遍 也会强制结束 依旧弹广告 放弃吧 没用的 )
二 js监视视频播放结束后,先执行播放视频的方法,再暂停视频
let isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) let videoContext = document.getElementById('video'); videoContext.addEventListener('ended', () => { if (!isiOS) { videoContext.play(); setTimeout(() => { videoContext.pause(); }, 100) } })
微信监控video是在最底层 意味着优先级最高 这一次不弹 下次还会再来 不够完美
三 打败不了那就加入吧 使用x5内核的一些属性 默认启用x5内核 使用浏览器自带的播发器 广告就没了
<video id="video" preload="auto" autoplay playsinline="true" webkit-playsinline="true" x5-playsinline="true" x-webkit-airplay="allow" v-bind:src="video_file" :poster="ImgUrl" class="avatar video-avatar" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="landscape|portrait" controls="controls" controlslist="nodownload noremoteplayback" >您的浏览器不支持视频播放</video>autoplay: 自动播放 preload="auto" - 当页面加载后载入整个视频 x5-video-player-type="h5" : 启用x5内核H5播放器
playsinline="true" 内联播放
webkit-playsinline="true"
x5-playsinline="true"
x5-video-player-fullscreen="true" 全屏设置。ture和false的设置会导致布局上的不一样 x5-video-orientation="landscape|portrait" :声明播放器支持的方向,可选值landscape 横屏,portraint竖屏。
开启x5内核H5播放器 广告消失了
猜测 : 广告的弹出机制 是针对于 除x5外 其他的一些播放器主要是video 默认启用也就可以了