移动端使用video来作为动态背景

再见小兔基

2022-11-16 1,381 阅读1分钟

简介

在页面打开的时候，video自动播放。这个看似简单的功能在不同的环境上有着诸多阻碍。

autoplay

本文列举了四种常见的场景：

IOS & Safari
IOS & 微信浏览器
Android & Chrome
Android & 微信浏览器

Lv.1

IOS & Safari
IOS & 微信浏览器
Android & Chrome
Android & 微信浏览器

<video
  autoplay
  muted
  loop
  src="https://lv-vod.fl.freecaster.net/vod/louisvuitton/It9zbPTYNO_MD.mp4"
/>

参考文档： Autoplay guide for media and Web Audio APIs - Web 媒体技术 | MDN

Lv.2

IOS & Safari
IOS & 微信浏览器
Android & Chrome
Android & 微信浏览器

<video
  autoplay
  muted
  loop
  playsinline
  src="https://lv-vod.fl.freecaster.net/vod/louisvuitton/It9zbPTYNO_MD.mp4"
/>

参考文档： Delivering Video Content for Safari ｜ Apple Developer Documentation

Lv.3

IOS & Safari
IOS & 微信浏览器
Android & Chrome
Android & 微信浏览器

<video
  autoplay
  muted
  loop
  playsinline
  src="https://lv-vod.fl.freecaster.net/vod/louisvuitton/It9zbPTYNO_MD.mp4"
/>  
 
<script>
  var video = document.querySelector('video');
 
  // WeixinJSBridge is only available in WeChat
  // 当 WeixinJSBridge 加载完成时可触发 video.play()
  document.addEventListener('WeixinJSBridgeReady', function() {
    video.paused && video.play();
  })
</script>

Lv.4

IOS & Safari
IOS & 微信浏览器
Android & Chrome
Android & 微信浏览器

<video
  autoplay
  muted
  loop
  playsinline
  src="https://lv-vod.fl.freecaster.net/vod/louisvuitton/It9zbPTYNO_MD.mp4"
/>  
 
<script>
  var video = document.querySelector('video');
 
  // WeixinJSBridge is only available in WeChat
  // 当 WeixinJSBridge 加载完成时可触发 video.play()
  document.addEventListener('WeixinJSBridgeReady', function() {
    video.paused && video.play().catch((err) => console.log('err: ', err));
  })
 
  // 依赖于用户的交互，触发 video.play()
  document.addEventListener('touchstart', function() {
    video.paused && video.play().catch((err) => console.log('err: ', err));
  })
</script>

Android 的微信没有任何办法，只能依赖于用户的交互去触发。

其中添加了 catch 是因为安卓环境下可能会出现以下错误：

DOMException {code: 0, name: "NotAllowedError", message: "play() can only be initiated by a user gesture.", INDEX_SIZE_ERR: 1, DOMSTRING_SIZE_ERR: 2, …}

其他可能有用的参数

X5-video-player-type="h5-page": 适用于微信等 H5内核环境，控制网页内部同层播放，可以在视频上方显示html元素（不要与x5-playsinline同时存在）
webkit-playsinline="true": 适用于 IOS 10，让视频在小窗内播放，而非全屏播放。

参考文档

微信浏览器的video自动播放和最顶层的问题