• 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

    欢迎大家来浏览我的博客,如发现我有写错的地方,欢迎交流指正。
  • 相关阅读:
    高效算法——D 贪心,区间覆盖问题
    高效算法——C 分饼
    高效算法——A 归并排序
    高效算法——Most financial institutions 贪心 H
    高效算法——E
    高效算法——Bin Packing F
    POJ2192
    UVa11584
    POJ2429
    POJ1811- Prime Test(Miller–Rabin+Pollard's rho)
  • 原文地址:https://www.cnblogs.com/lulu-beibei/p/11277181.html
Copyright © 2020-2023  润新知