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