移动端H5自动播放视频

3,413 阅读1分钟

我正在参加「掘金·启航计划」

可能是出于节省用户流量,许多移动端浏览器都不支持H5自动播放视频,必须在用户主动交互(点击或者滑动等)后才可以通过js播放视频
PC端可以通过设置muted,自动播放静音视频
安卓浏览器均不支持自动播放,实测在微信内置浏览器,滑动视为交互行为,可以在这之后播放视频,抖音内置浏览器则需要点击交互,鸿蒙系统浏览器可以自动播放静音视频\

企业微信截图_98d5cdd5-8647-4b49-931a-60983474e642.png

解决方案

  • 法一 引导用户点击或滑动

进入网站时弹窗,例如欢迎语等,用户点击关闭后执行视频播放
简单粗暴的方法,在某些场景时适用的,实测在安卓、鸿蒙、IOS、抖音浏览器等均可以用这个方法解决

close() {
    const videos = document.querySelectorAll('video');
    for (let i = 0; i < videos.length; i++) {
      const element = videos[i];
      element.play();
    }
}
  • 法二 jsmpeg

将视频转成ts格式,通过jsmpeg解码器进行加载播放,可以实现自动播放,实测基本上可以解决所有移动端无法播放视频的问题

转ts

安装ffmpeg,输入命令将mp4转成ts

  • s - 分辨率
  • b - 码率 b:v代表视频码率 b:a代表音频码率
  • r - 帧频
ffmpeg.exe -i in.mp4 -f mpegts -codec:v mpeg1video -s 680x1080 -b:v 2074k -r 29.97 out.ts
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    // 引入jsmpeg
    <script src="./jsmpeg.min.js"></script>
    <style>
      #canvas {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" height="750" width="750"></canvas>

    <script>
      var canvas = document.querySelector("#canvas");
      // 加载ts文件
      var player = new JSMpeg.Player("./out.ts", {
        canvas: canvas,
        loop: true, // 循环播放
        autoplay: true, // 自动播放
        audio: false, // 禁用音频
      });
      player.play();
    </script>
  </body>
</html>

其他问题

  • 移动端自动全屏播放视频
<video webkit-playsinline="webkit-playsinline" playsinline></video>