视频自动播放的限制与解决方案

| | IOS微信 | 安卓微信 | IOS携程 | 安卓携程 | PC 端 | | ---- | ---- | ---- | ---- | ---- | ---- | | 是否支持 | 支持(有声音) | 不支持 | 不支持 | 支持(有声音) | 支持(无声音) | | 解决方案| 自动播放 | 默认不播放，用户点击页面任何地方后播放| 默认不播放，用户点击页面任何地方后播放 | 自动播放 |默认静音自动播放，用户点击页面后有声继续播放 |

使用方法

方法1:直接调用

1. videoautoplay.js
2. 引入并调用

<!--./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 

2. 调用

const videoAutoPlay = require("videoautoplay");
videoAutoPlay("#videoFrame",{
  playOnClick:true,
  allowMuted:true
});

参数说明

videoAutoPlay(videoSelector,options);

• videoSelector 是视频Dom的选择器

• options 配置：

• allowMuted ture|false 在浏览器容许的情况下是否启用“静音自动播放”

• playOnClick true|false 是否在用户点击视频区域后取消静音，只有在“静音自动播放”模式下生效