移动端H5自动播放视频

最新推荐文章于 2024-08-08 08:16:33 发布

码云笔记

最新推荐文章于 2024-08-08 08:16:33 发布

阅读量1.5k

点赞数 1

分类专栏：实战分享文章标签：音视频 ffmpeg

本文链接：https://blog.csdn.net/qq_41221596/article/details/128453844

版权

实战分享专栏收录该内容

230 篇文章 11 订阅

订阅专栏

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

解决方案

法一引导用户点击或滑动

进入网站时弹窗，例如欢迎语等，用户点击关闭后执行视频播放
简单粗暴的方法，在某些场景时适用的，实测在安卓、鸿蒙、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>

码云笔记

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录