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

 

posted @ 2019-07-31 16:22  北倍  阅读(526)  评论(0编辑  收藏  举报