H5端Video无法自动播放

晨曦Mo

已于 2023-09-25 10:52:13 修改

阅读量2.5k

点赞数 1

文章标签：音视频 html5 前端

于 2023-09-15 17:34:40 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_38079959/article/details/132875189

版权

本文介绍了如何在PC端Chrome和移动端微信、Safari中解决视频的自动播放问题，包括使用WeixinJSBridgeReady事件、设置playsInline和muted属性，以及针对不同环境的兼容解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景说明

开发活动落地页需要自动视频，发现在PC端chrome【版本:116】上，autoplay属性就能正常播放。
但是在H5端微信和safari浏览器上的表现，都是不能自动播放。
翻了一些资料，以下为整理的解决文案。

微信环境不能自动播放

  // 解决 ios 微信 video 自动播放
  document.addEventListener(
    'WeixinJSBridgeReady',
    function () {
      const video = document.querySelector('video');
      video && video.play();
    },
    false,
  );

手机浏览器不能自动播放【以下方式按需使用】

Tip: Js和标签上的属性都很重要。【muted，playsInline】

解决方式一：

// js
const video = document.querySelector('video');
video.playsInline = true;
// html
<video
  autoPlay
  muted
  preload="auto" // 视频优先加载
  x5-video-player-type="h5" //同层H5播放器，就是在视频全屏的时候，div可以呈现在视频层上
  x5-video-player-fullscreen="false" // 全屏播放
  src={videoUrl}
/>

解决方式二：

// js
const video = document.querySelector('video');
let videoPromise;
if (video) {
  videoPromise = video?.play();
  if (videoPromise !== undefined) {
    videoPromise
      .then((_) => {
        // 当前环境能自动播放
        console.log('cool, auto play!');
      })
      .catch((error) => {
        // 不能自动播放，可以自己增加一个按钮，
        // 让用户点击时，触发开始播放video.play()。
        console.log('can‘t auto play!');
      });
  }
}

// html
<video
  autoPlay
  playsInline
  muted
  preload="auto" // 视频优先加载
  x5-video-player-type="h5" //同层H5播放器，就是在视频全屏的时候，div可以呈现在视频层上
  x5-video-player-fullscreen="false" // 全屏播放
  src={videoUrl}
/>

解决方式三：（向下兼容）

虽然根据video标签属性和js操作后，仍然在有些浏览器环境（如抖音浏览器环境IOS机型），必须有用户交互行为，才可触发播放。

先通过以上任意一种方式满足大部分浏览器的自动播放行为；
video标签将video第一帧作为背景图（背景图通过复合写法，中间展示一个播放按钮）【当运行在部分不支持的浏览器环境时，示意用户点击video来播放】

// html
<video
	// 参照方式一/方式二的属性，此处为video增加点击播放功能
    ...props
    onClick={() => {
      videoRef.current?.play();
    }}
/>

// --------------分隔线----------------

// css
video {
	background-image: url('https://xxx/aaa/bbb/start-btn.png'), url('https://xxx/aaa/bbb/video-bg.jpg');
    background-repeat: no-repeat, no-repeat;
    background-size: 100px 100px, 100% 100%;
    background-position: center, center;
}