分享好友 教程首页 教程搜索 频道列表

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

2023-02-27 21:584550
+关注2
核心提示:用代码自行测试

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


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

1.不能自动播放

2.全屏

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


二.ios系统解决方案:(无phone手机未测试)

<audio preload="preload" controls id="car_audio" src="http://media.xitaoinfo.com/ei_zamenjiehunba.mp3" loop></audio>
<video id="video" controls="" preload="none" mediagroup="myVideoGroup" poster="http://media.w3.org/2010/05/sintel/poster.png">
      <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
      <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
      <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
      <p>Your user agent does not support the HTML5 Video element.</p>
</video>
<!-- 必须加在微信api资源 -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
     //一般情况下,这样就可以自动播放了,但是一些奇葩iPhone机不可以
     document.getElementById('car_audio').play();
    //必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效
    document.addEventListener("WeixinJSBridgeReady", function () {
        document.getElementById('car_audio').play();
        document.getElementById('video').play();
    }, false);
</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.白名单;


本文标签: #微信 #视频 #自动播放
整理员:网络转载
免责声明:凡注明来源本网的所有作品,均为本网合法拥有版权或有权使用的作品,欢迎转载,注明出处。非本网作品均来自互联网,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
生成海报
您可能在找更多

微信公众号后台基本配置点击保存总是提示请求url超时,监测网络包发现微信并没有将请求提交到服务后台?

    遇到这个问题,检查一下服务器的防火墙,防火墙误把腾讯进来的IP识别成国外IP,导致调不通,在服务器上关闭防火墙即可

小黑 随手记2023-12-17

修复DESTOON9.0微信扫码和支付宝扫码付款页面空白的问题

    函数有错误,导致后台填写了扫码付款通知手机或者邮箱发生页面空白

小黑 开发技术2023-11-03

关于规范公众号模板消息的再次公告

    根据用户的反馈与建议,同时为了给予开发者更充裕的时间,平台现对原计划3月30日生效的模板消息内容规范措施(详情见《关于规范公众号模板消息的公告》)进行调整。2023年5月4日1)去除自定义颜色、表情符号;(表情

小黑 开发技术 12023-05-19

DESTOON9.0以下的版本如何修复电脑版微信小程序跳转到电脑版

    按照9.0的代码去修改

小黑 destoon程序2023-04-13

下一篇
我来说两句
抢沙发