html5 video在安卓微信浏览器视频不能自动播放 !

html5 video在安卓微信浏览器视频不能自动播放 !

html5 video在安卓微信浏览器视频不能自动播放 !

注:重要的事情说三遍, 其他帖子说可以自动播放的我都有试过,一个生效的都没有。

一.微信浏览器(x5内核):

1.不能自动播放

2.全屏

3.最顶层(z层的最顶层)

二.ios系统video自动播放:(经手机测试没有问题可以实现)

         <div class="playvideo"><div class="zy_media"><video id="myVideo" muted autoplay poster="https://r1.ykimg.com/05420408584A363C6A0A47047DD24931"data-config='{"mediaTitle": "测试视频--视频"}'><source src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4" type="video/mp4">您的浏览器不支持HTML5视频</video></div></div><script>function autoPlayVideo() {/* 自动播放视频效果,解决浏览器或者APP自动播放问题 */function videoInBrowserHandler() {videoPlay(true);document.body.removeEventListener('touchstart', videoInBrowserHandler);}document.body.addEventListener('touchstart', videoInBrowserHandler);/* 自动播放视频效果,解决微信自动播放问题 */function videoInWeixinHandler() {videoPlay(true);document.addEventListener("WeixinJSBridgeReady", function () {videoPlay(true);}, false);document.removeEventListener('DOMContentLoaded', videoInWeixinHandler);}document.addEventListener('DOMContentLoaded', videoInWeixinHandler);}function videoPlay(isPlay) {var media = document.getElementById('myVideo');if (isPlay && media.paused) {media.play();}if (!isPlay && !media.paused) {media.pause();}}</script>

三.android系统中解决方案:暂未发现可以实现的例子

误区:(无效的解决方案)

1.设置video属性autoplay;

2.通过js调用play();

3.通过js来触发click事件;

4.使用插件videojs;

5.通过js调用load()然后再调用play();

6.设置video属性webkit-playsinline="true";

7.touchstart监听;

8.stalled事件处理;

9.canplaythrogh事件处理;

10.readyState大于2的处理;

11.DOMContentLoaded监听;

12.微信js api中WeixinJSBridgeReady;

13.微信js api中getNetworkType;

14.白名单;

【H5】html5 video 在微信浏览器视频不能自动播放 !相关推荐

  1. html5 video微信浏览器视频不能自动播放

    2019独角兽企业重金招聘Python工程师标准>>> html5 video微信浏览器视频不能自动播放 一.微信浏览器(x5内核): 1.不能自动播放 2.全屏 3.最顶层(z层的 ...

  2. 苹果微信html音乐播放,HTML5教程 在iOS微信浏览器中如何自动播放HTML5 audio

    本篇教程探讨了HTML5教程 在iOS微信浏览器中如何自动播放HTML5 audio,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < html> Aut ...

  3. 解决苹果手机微信音视频不能自动播放问题

    加载以下代码即可 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> ...

  4. html5微信自动播放视频,科技常识:HTML5页面音视频在微信和app下自动播放的实现方法...

    今天小编跟大家讲解下有关HTML5页面音视频在微信和app下自动播放的实现方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML5页面音视频在微信和app下自动播放的实现方法 的相关 ...

  5. html音视频app制作,怎么实现HTML5页面音视频在微信和app下自动播放

    怎么实现HTML5页面音视频在微信和app下自动播放 发布时间:2020-09-28 15:52:53 来源:亿速云 阅读:90 作者:小新 这篇文章给大家分享的是有关怎么实现HTML5页面音视频在微 ...

  6. H5的video 在安卓浏览器上层级问题

    项目场景: H5的video 在安卓浏览器上层级问题 问题描述 H5的video 在安卓浏览器上层级问题 原因分析: 目前猜测是浏览器劫持video并且生成原生视频播放器 无法用z-index控制 解 ...

  7. [html] 如何解决微信浏览器视频点击自动全屏的问题?

    [html] 如何解决微信浏览器视频点击自动全屏的问题? 1.1 页面内播放 X5内核视频在用户点击后默认会进入全屏播放,前端可以设置video的x5-playsinline属性来将视频限定于网页内部 ...

  8. 微信播放在服务器视频无法播放音乐,【bug解决】ios微信浏览器中背景音乐无法播放...

    我记得之前在一次项目中,出现过浏览报错: 所以在这次H5的制作中,我使用了iframe来加载音频文件,使用这种方式后,电脑端是没有问题的,但是当上传至服务器上在手机上浏览时,会出现点击音乐旋转按钮无法 ...

  9. 微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片

    微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片 背景 解决方案 文章参考 背景 微信公众号H5开发,在普通浏览器,可以直接通过以下代码下载图片: let a = document.crea ...

最新文章

  1. 想进大厂?Dubbo 普普通通 9 问你知道吗
  2. genymotion报错Your CPU is incompatible with virtualization technologies
  3. Comments on task “Smart Service II: Wrap up and make it ready for Demo“
  4. 【Blog.Core重要升级】:封装服务扩展层
  5. 光纤收发器常见故障及解决方法
  6. Java基础-异常处理机制
  7. 【SQL注入-02】SQL注入点的简单判断
  8. java完成crm系统ppt,客户关系管理系统答辩稿.ppt
  9. JSbridge原理与实现简析
  10. 虚拟机安装中标麒麟服务器,如何在VMware Workstation中安装中标麒麟7.0
  11. Linux 之六 Shell、终端(Terminal)、控制台(Console)、CLI 命令行界面、GUI 图形用户界面(X、X11、Xfree86、Xorg、GNOME、KDE)
  12. 股票多空量化策略通过合理释放beta收益一定程度上提升了组合的收益风险比?
  13. 微信公众号官方API开发之配置服务器
  14. 今天来聊聊函数function func()
  15. 科学论文类型分类(letter, perspective, focus, article)以及影响引子,SCI、EI等
  16. 永磁同步电机高频注入simulink仿真模型下载
  17. 2021/05/05 OJ每日一题 2132: Tmk吃汤饭 python
  18. 50个CSS编辑工具
  19. oracle10.2精简,请问版主和高手们,Oracle 10.2 完美精简版客户端下载-30M如何使用?...
  20. three.js SVG 学习绘制三维地图

热门文章

  1. win10共享计算机win7,win10与win7系统电脑通过局域网共享打印机的方法
  2. Wireshark网络封包分析
  3. 2022年外贸营第一篇文章
  4. IT岗位2022届毕业生简历制作
  5. (附源码)计算机毕业设计仓库物资信息可视化管理系统
  6. Linux /etc/profile 全局变量
  7. 分布式架构的演进(转)
  8. 超出MySQL最大连接数解决办法
  9. 跟着Cell Research学单细胞分析:以小提琴图、热图为例
  10. GaitPart学习笔记(主干网络论文介绍+代码讲解)