视频自动播放的限制与解决方案
IOS微信 | 安卓微信 | IOS携程 | 安卓携程 | PC 端 | |
---|---|---|---|---|---|
是否支持 | 支持(有声音) | 不支持 | 不支持 | 支持(有声音) | 支持(无声音) |
解决方案 | 自动播放 | 默认不播放, 用户点击页面 任何地方后播放 |
默认不播放, 用户点击页面 任何地方后播放 |
自动播放 | 默认静音自动播放, 用户点击页面后 有声继续播放 |
使用方法
方法1:直接调用
- videoautoplay.js
- 引入并调用
<!--./js/main.js替换为-->
<video id="videoFrame" src="https://video.c-ctrip.com/videos/AS0u1q000001hy4e47F27.mp4" controls playsinline></video>
<script src="./js/videoautoplay.js"></script>
<script>
videoAutoPlay("#videoFrame",{
playOnClick:true,
allowMuted:true
});
</script>
方法2:npm
npm install --save-dev videoautoplay
#或者使用yarn
#yarn add videoauto
- 调用
const videoAutoPlay = require("videoautoplay");
videoAutoPlay("#videoFrame",{
playOnClick:true,
allowMuted:true
});
参数说明
videoAutoPlay(videoSelector,options);
-
videoSelector 是视频Dom的选择器
-
options 配置:
-
allowMuted ture|false 在浏览器容许的情况下是否启用“静音自动播放”
-
playOnClick true|false 是否在用户点击视频区域后取消静音,只有在“静音自动播放”模式下生效