优雅解决视频触发浏览器自动播放策略

前言

• 什么是浏览器自动播放策略？（本文以google浏览器为主）

Chrome 的自动播放政策非常简单：

• 始终允许自动静音播放。
• 在下列情况下，系统允许有声自动播放：
  • 用户与网域进行了互动（点击、点按等）。
  • 在桌面设备上，用户的媒体互动指数已达到阈值，这意味着用户之前播放过有声视频。
  • 用户已在移动设备上将网站添加到主屏幕，或在桌面设备上安装了 PWA。
• 热门帧可以将自动播放权限委托给其 iframe，以允许有声自动播放。

背景

在做短视频播放器的时候，发现我们在设备有声的情况下，触发videoRef.current.play() 也就是video标签的play方法，浏览器会友好的给我们报个错
NotAllowedError: play() failed because the user didn't interact with the document first

大白话就是：请不要在用户没有交互的文档中，使用play()方法

目的

我们在开发的时候，会处理各种bt的需求，难免会在用户未交互的情况下，使用到这个方法

技术栈

• react hooks
• h5 video标签

优雅的方案

事先说明：以下方案没有优劣之分，只有适合场景否之分；

1. 方案一：那我们就通过设置一些强交互，但又不会让用户觉得反感的操作，只要让用户在我们的页面中点击就行。
   比如： 弹窗（签到领积分啥的）

2. 方案二：处理异常。【本文主要想说的点】
   在事后（也就是问题出现的时候）我们友好的给出一些提示来告知用户，你需要手动播放

const videoRef = useRef(null);
/** 
 * 处理浏览器自动播放策略 导致play()会报错
 * @abstract NotAllowedError: play() failed because the user didn't interact with the document first
 */
  const playVideo = () => {
    if (!videoRef.current) return;
    const promise = videoRef.current.play();
    if (promise) {
      promise.catch(() => {
        // 友好的问候用户
      });
    }
  };

  return (
    <video controls={false} ref={videoRef}>
          <source
            src="xxxx.mp4"
            type="video/mp4"
          />
          您的浏览器不支持 HTML5 video 标签。
    </video>
  )

3. 方案三：静音播放媒体，给用户取消静音的提示，以此来达到优雅的效果,

const videoRef = useRef(null);
/** 
 * 处理浏览器自动播放策略 导致play()会报错
 * @abstract NotAllowedError: play() failed because the user didn't interact with the document first
 */
  const playVideo = () => {
    if (!videoRef.current) return;
    videoRef.current.muted = true;
  };

  return (
  <>
	<video controls={false} ref={videoRef} autoplay muted>
          <source
            src="xxxx.mp4"
            type="video/mp4"
          />
          您的浏览器不支持 HTML5 video 标签。
    </video>
    <div onClick={playVideo}>点我打开静音</div>
</>
    
    
  )

写在最后

如果有帮助到大家，记得给博主点个赞，感谢啦！