1.0.3 • Published 3 years ago
videoautoplay v1.0.3
视频自动播放的限制与解决方案
| 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 是否在用户点击视频区域后取消静音，只有在“静音自动播放”模式下生效