会出现播放结束显示QQ浏览器推荐视频的原因:(我是vue的项目,而且我是新手,只是单纯的给大家分享一个方法,代码比较low请自动忽略)

  因为在x5(QQ浏览器)内核中,把video标签劫持了,只要是检测到使用了video标签的话(包括使用了基于h5的video写的插件),就会出现这种情况。

解决办法:

  html部分:(需要的是一个id选择器,其他的请忽略,src中的内容是调接口返回)

    <video autoplay id="end" controls :src="chapter.url" poster="http://eres.xgstars.com/promote/ed.png"></video>

  js部分:

    showOtherVideo(){
      let _this = this;
      setTimeout(function(){
        var dom = document.getElementById('end');
        var flag = dom.paused;
        if(!flag){
          _this.showOtherVideo();
        }else{
          // _this.showOtherVideo();
          if(dom.currentTime == dom.duration && dom.currentTime!=0){ 
            //这里的判断是如果视频的总时间等于视频已经播放的时间,并且视频的播放时间不为零时
            //这个地方的就是写视频结束的时候的代码的地方
          }else{
            _this.showOtherVideo();
          }
        }
      },1000)
    },
 
  这个的原理就是通过一个计时器每隔一秒刷新一次,来监听视频是不是播放完毕,如果没有播放完毕则继续监听,如果播放完毕就执行下面的方法,可以调用你自己公司的接口来请求下一段视频,替换当前视频,他会有一秒的闪烁,然后就会跳走,如果先看看效果的话,就去微信浏览器里面看看优酷,他们就是这种效果,但是方法应该不会这么low。

在微信端使用video标签,播放结束会出现QQ浏览器推荐视频的解决办法(vue)的更多相关文章

  1. IPhone微信H5用Video标签播放不了视频

    H5用Video标签播放视频 视频在安卓上可以正常播放,在苹果上却不能播放. 因为用了文件服务站点,而且不支持断点下载 把文件服务改成支持断点下载即可 断点下载参考(C#)

  2. 在使用html5的video标签播放视频时为何只有声音却没有图像

    在使用html5的video标签播放视频时为何只有声音却没有图像? 答:使用格式化工厂转个编码就行了,MP4有3种编码,mpg4(xdiv),,mpg4(xvid),avc(h264)转换成H264编 ...

  3. mp4 格式无法使用html5的video标签播放

     只有视频编码为h264的视频才能在html5中使用video标签播放 我的解决方法为:下载魔影工厂,按照如下图所示步骤操作: width:600px;

  4. HTML5 video标签播放视频下载原理

    HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload=" ...

  5. 如何使用微信小程序video组件播放视频

    相信很多人都有在手机上看视频的习惯,比较看视频更真实更形象.那么我们在微信小程序中如何观看视频呢?这就需要video组件的帮忙了.今天我们就给大家演示一下,如何用微信小程序组件video播放视频.我们 ...

  6. Video标签播放视频?谷歌浏览器?safari?? 谷歌浏览器播放不了mp4格式的视频的原因

    webm格式和mp4格式,判断了浏览器能否支持的视频类型后,给了一个if判断,如果是支持mp4格式,就返回视频后缀mp4,如果是webm,就返回后缀webm.结果,在谷歌浏览器中播放不了,为什么我指定 ...

  7. hi3531播放1080p60f, 延迟越来越大的问题与解决办法

    问题 hi3531播放1080p60f, 延迟越来越大 左边屏幕是ffplay播放的,右边屏幕是3531播放的 数据是udp组播 mpegts, h264 12M码流 原因 经过测试发现: 解码器中缓 ...

  8. 安卓下点击a标签不跳转;点击a标签在手机真机上会调出手机键盘的解决办法

    安卓下点击a标签不跳转的解决办法,是不用href做跳转的链接,改为用JS控制跳转 <a href="javascript:;" ontouchstart="wind ...

  9. html5 video标签播放视频流

    从文件服务器读取音视频文件,以流的方式传给前台,并能够播放视频. 做了一个demo,用html5的video,audio标签实现. 后台实现代码: @GetMapping(value = " ...

随机推荐

  1. 编译期类型检查 in ClojureScript

    前言  话说"动态类型一时爽,代码重构火葬场",虽然有很多不同的意见(请参考),但我们看到势头强劲的TypeScript和Flow.js,也能感知到静态类型在某程度上能帮助我们写出 ...

  2. 管中窥豹——从OVS看SDN

    网络虚拟化是当前云计算最重要的特点之一,打通租户网络之间互通以及访问控制策略,最重要的是满足租户之间的网络隔离,这才是云计算网络的特点.而SDN的产生则是在网络虚拟化中,将控制面和业务面分离,控制面只 ...

  3. HelloWorld改编,仿bilibili手机端(一)——侧滑菜单界面布局

    讲解目录: 1.要实现的效果图展示及详细分析HelloWorld项目的xml布局文件(基于navigation drawer activity)        2.简单修改menu及menu相关详解 ...

  4. Html事件冒泡

    原以为span不同于input,事件冒泡会被父级标签吞噬,写了个测试事件冒泡的Demo,发现并不是想得那样.另外:event.stopPropagation()以及event.stopImmediat ...

  5. Python自学笔记-paramiko模块(Mr serven)

    文章出处:http://www.cnblogs.com/wupeiqi/articles/5095821.html SSHClient 用于连接远程服务器并执行基本命令 基于用户名密码连接: #!/u ...

  6. C#中 什么是装箱和拆箱

    装箱:将值类型包装为引用类型 拆箱:将引用类型转换为值类型   例如 objetct obj = null; obj = ; //装箱 int i = (int) obj; //拆箱

  7. win 7 系统ie浏览器升级11版本后,f12功能不可用的问题

    自从把ie8升级成11后,f12功能就不可用了.浏览器兼容模式也无法使用. 解决办法:下载windows补丁 IE11-Windows6.1-KB3008923-x64.msu 下载地址: 64位:h ...

  8. JavaWeb(七)之详解JavaWeb路径

    前言 在我们的实际开发中,经常要写路径,不管是链接,重定向还是转发,这都是需要路径的.那这一篇我给大家详细的分享一下Web中的各种路径问题. 世界上一切东西都是相对的,对于这点而言,相信大家并不陌生, ...

  9. iOS自动化环境搭建——macaca

    macaca-java for ios 自动化环境搭建 基础原理解析:https://testerhome.com/topics/6608 一.环境搭建 1.安装eclipse; -----Java开 ...

  10. JAVAEE企业级应用开发浅谈第二辑:MVC和三层架构

    上海尚学堂警句:一份信心,一份努力,一份成功:十分信心,十分努力,十分成功. Step1.情景概要 Hello,小伙伴们,昨天跟大家分享了JAVA EE 企业级应用开发中大家耳熟能详的概念-三层架构, ...