关于移动端视频在微信环境自动播放

喵恋

已于 2022-08-10 16:15:15 修改

阅读量655

点赞数

文章标签： html5 前端 html

于 2022-05-19 10:47:45 首次发布

本文链接：https://blog.csdn.net/weixin_49675710/article/details/124858451

版权

博客内容讲述了在iOS设备上视频无法自动播放的问题，以及如何通过引入微信的JSDK来解决这一问题。在iOS中，由于安全和用户体验的考虑，默认不允许视频自动播放，但可以通过配置微信的JS接口实现。同时，提供了video标签的相关属性示例，并分享了一段用于检查设备类型并尝试自动播放的JavaScript代码。

摘要由CSDN通过智能技术生成

在安卓端静音 autoplay 或者用微信的JDK 都没用

但是在IOS上是可以的

ios中默认不允许视频,音频加载, 点击之后才会加载, 如果video属性中没有 poster controls那视频的位置什么也没有

IOS自动播放先引入JKD

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

然后这是抄过来的,谢谢 zyhzyh1120

附上Video标签属性

 <video preload="auto" x-webkit-airplay="allow" x5-video-player-type="h5" x5-video-orientation="portrait" playsinline webkit-playsinline autoplay controls x5-video-player-fullscreen="true">
     <source class="source" src="" type="video/mp4">
  </video>

  function AutoloadMedia(dom) {
    const IS_IOS = !/(Android)/i.test(navigator.userAgent); //ios终端
    if (IS_IOS) {
    wx.config({
      // 配置信息, 即使不正确也能使用 wx.ready
      debug: false,
      appId: "",
      timestamp: 1,
      nonceStr: "",
      signature: "",
      jsApiList: []
    });
    wx.ready(function () {
      let video = document.getElementById(dom);
      if (video) {
        video.play();
        
      } else {
        console.log("获取视频元素失败");
      }
     
    });
  }
}

OK了红字部分的坑我踩了两天才爬出来.....留个纪念