微信h5video不能自动播放和不显示问题解决

最新推荐文章于 2024-11-26 15:48:46 发布

嫣嫣细语

最新推荐文章于 2024-11-26 15:48:46 发布

阅读量4k

点赞数 9

分类专栏：前端 javascript vue.js 文章标签：微信 javascript 前端

本文链接：https://blog.csdn.net/aaa123aaasqw/article/details/140381786

版权

javascript 同时被 3 个专栏收录

81 篇文章 4 订阅

订阅专栏

前端

76 篇文章 1 订阅

订阅专栏

vue.js

27 篇文章 2 订阅

订阅专栏

在微信中，由于安全和用户体验的考虑，自动播放视频（尤其是带有声音的视频）受到了严格的限制。特别是在iOS设备上，由于操作系统的限制，视频通常不能自动播放，除非它们被设置为静音（muted）且用户之前与页面有过交互（如点击或触摸）。

然而，在Android设备上，微信的X5浏览器可能会稍微宽松一些，但仍然不建议依赖自动播放功能，因为用户的浏览器设置和微信版本可能会影响这一行为。

要在微信中实现H5视频的自动播放（特别是在iOS上），你可以采取以下策略：

设置视频为静音并尝试自动播放：
在<video>标签中添加muted和autoplay属性。请注意，这仅适用于iOS设备上的Safari浏览器（包括微信内置的X5浏览器），并且需要用户之前与页面有过交互（如点击或触摸页面上的某个元素）。

<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>