zoukankan      html  css  js  c++  java
  • H5 video在IOS微信上无法自动播放

    一、ios上无法自动播放(autoplay 是失效的)原因:

    移动端为了避免浪费用户的流量,默认video是不能够自动播放的,即使加了autoplay属性,也只能实现在PC端自动播放,在移动端依旧不能自动播放。

    二、网上探索解决办法:

    方法1、网上好多帖子的解决办法是监听微信的WeixinJSBridgeReady

    let video = document.querySelectorAll("video")[0];
    document.addEventListener("WeixinJSBridgeReady", function () { video.play(); }, false);

    但是我用了后还是没就解决,还是没有自己播放。此方法行不通。

    2、利用微信js解决。

    首先需要引入

    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

    然后

    //以下配置无效也没关系,还是会走ready函数
    wx.config({
            debug: false,
            appId: '111',
            timestamp: '111',
            nonceStr: '111',
            signature: '111',
            jsApiList: []
    })
    wx.ready(()=> {
        let video = document.querySelectorAll("video")[0];
    video.play();
    });


    最后,try it ! 竟然成功了,进入页面视频自动播放了,哦耶!此方法可行!

    方法二:

    引入微信jssdk,<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

    // 兼容微信(微信可以自动播放)
    let video = document.querySelectorAll("video")[0];
      document.addEventListener("WeixinJSBridgeReady", function () {
         video.play()
    }, false);

    此方法也可行!

  • 相关阅读:
    错误处理和调试 C++快速入门30
    错误处理和调试 C++快速入门30
    虚继承 C++快速入门29
    多继承 C++快速入门28
    界面设计01 零基础入门学习Delphi42
    鱼C记事本 Delphi经典案例讲解
    界面设计01 零基础入门学习Delphi42
    虚继承 C++快速入门29
    linux系统中iptables防火墙管理工具
    linux系统中逻辑卷快照
  • 原文地址:https://www.cnblogs.com/qiufang/p/13231087.html
Copyright © 2011-2022 走看看