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