Document

--- theme: scrolls-light --- 我正在参加「掘金·启航计划」 > 可能是出于节省用户流量，许多移动端浏览器都不支持H5自动播放视频，必须在用户主动交互（点击或者滑动等）后才可以通过js播放视频\ PC端可以通过设置muted，自动播放静音视频\ 安卓浏览器均不支持自动播放，实测在微信内置浏览器，滑动视为交互行为，可以在这之后播放视频，抖音内置浏览器则需要点击交互，鸿蒙系统浏览器可以自动播放静音视频\ ![企业微信截图_98d5cdd5-8647-4b49-931a-60983474e642.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5addcb1d8fd2484c82ed2ad4c2dec443~tplv-k3u1fbpfcp-watermark.image?) ### 解决方案 - **法一引导用户点击或滑动** 进入网站时弹窗，例如欢迎语等，用户点击关闭后执行视频播放\ 简单粗暴的方法，在某些场景时适用的，实测在安卓、鸿蒙、IOS、抖音浏览器等均可以用这个方法解决 ```js 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 ``` ```html Document // 引入jsmpeg

``` ### 其他问题 - 移动端自动全屏播放视频 ```html

```