zoukankan      html  css  js  c++  java
  • 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

    欢迎大家来浏览我的博客,如发现我有写错的地方,欢迎交流指正。
  • 相关阅读:
    过滤'and','or' ''' '*' '=' ‘select’下的注入
    HBase 官方文档0.90.4
    MapReduce原理及操作
    HDFS原理及操作
    Sqoop介绍、安装与操作
    HBase介绍、安装与应用案例
    Mahout介绍、安装与应用案例
    Hive介绍和安装部署
    MapReduce应用案例
    Flume介绍与安装
  • 原文地址:https://www.cnblogs.com/lulu-beibei/p/11277181.html
Copyright © 2011-2022 走看看