wap视频广告遇到的问题
最近在做一个wap端的视频广告,耗了很多心力在上面,仍旧做不好。没想到wap浏览器对video标签这么不友好。广告需要在原编辑视频播完后插入并自动播放。
ios浏览器点击播放按钮后喜欢自动全屏播放,希望它在原位置,小窗口播放视频,在网上搜寻了很久,都是说给video加上属性:webkit-playsinline playsinline,然而uc浏览器一点作用也没有,可气的是,爱奇艺官网的视频竟然可以小窗播放,一开始以为是他们播放器做得很牛,后来搜索看到,应该是uc浏览器给爱奇艺开了后门(白名单),允许它小窗播放。
ios,自动播放aotuplay属性没效果,需要加上muted,muted表示视频静音播放。android就算加上muted,也无法自动播放。
ios,canplay事件无效。
android在视频上加点击跳转无效,不管是监听点击事件,还是添加元素,都无法实现,video始终在最顶层播放,好无奈。然而,又有人要说了,爱奇艺可以耶..........
部分视频使用了优酷播放器,PC端,优酷播放器js: https://player.youku.com/iframeapi 中 利用window.parent.postMessage(obj, '*');跨域传消息,可以这样子监听视频播放结束:
<script> window.addEventListener("message",function (msg){ if('onPlayEnd'==msg.data.msg){alert('视频播放结束')}; console.log(msg.data.msg); }, false); </script>
wap端不同,没有使用iframe,想不到什么好方法,使用了一种笨方法,监听进度条,当进度条的width样式由无变为正,再变为0,表示视频播放结束了,然而在苹果的QQ浏览器上获得的width值始终是空的,很奇怪,其他浏览器可以。
var isStart=false; var timer1=setInterval(function(){ try{ var bigE=document.querySelector(".x-progress-play-mini"); alert(bigE.style.width); var pro=bigE.style.width.split("%")[0]; var pro1=parseInt(pro); if(pro1>0){ isStart=true; } if(isStart&&pro1==0){ clearInterval(timer1); videoCon.innerHTML=playOne; alert(playOne); buildPlayer(); ivyLink(); if(ivyOs=="android"){ player2.setSrc("https://auto.pcvideo.com.cn/pcauto/vpcauto/2019/08/01/1564630378684-vpcauto-77524-1.mp4"); player2.play(); } } } catch(e){ } },1000);
wap测试页:http://www1.pcauto.com.cn/test/190802/llf/6/16.html
pc测试页:http://www1.pcauto.com.cn/test/190802/llf/pcsp1.html