ios 微信 h5 页面视频播放不了？

Question

目前有个年度执医成就的需求，是通过视频来实现动画的。

在 ios safari里面可以正常播放，安卓微信中也可以正常播放，但是微信 h5 里面视频播放不了，有大佬看一下这个问题吗

项目链接：https://muzhi.baidu.com/f2c/twentyFour/cover?id=fe52d3fd3ed9e...

想知道微信 h5 里面是有什么限制吗，之前改过一次视频播放的时机，用户手势上滑后才开始播放，但是还是有的问题

Answer 1

可以参考这篇文章
微信h5video不能自动播放和不显示问题解决

<template>
 
<div class="home-div">
  <video loop muted playsinline preload="metadata"  ref="videoRef"  autoplay class="video">
    <source src="../../public/video.mp4" type="video/mp4">
</video>
 
    </div>
 
</template>
 
<script setup>
import { ref, reactive, onMounted  } from "vue";
const videoRef = ref(null)
 
// 准备就绪(预加载前会调用)(初始化调用)将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数
function onBridgeReady(){
  //必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效
//关键代码
if (window.WeixinJSBridge) {
        WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
          videoRef.value.play()
        }, false);
      } else {
        document.addEventListener("WeixinJSBridgeReady", function () {
          WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
            videoRef.value.play()
          });
        }, false);
      }
}
 
 
    
 
 
onMounted(() => {
  onBridgeReady()
  console.log(videoRef.value.play(),'0000')
});
 
 
</script>
 
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
  list-style: none;
}
 
.video {
  height: calc(400 / 750 * 100vw);
  width: calc(750 / 750 * 100vw);
  background: rgb(129, 119, 119);
}
</style>

Answer 2

解决思路：

1. 视频设置静音，自动播放。
2. 在页面加载完成后，js里面进行控制。判断视频的播放状态，如果没有在播放状态 就设置播放。