force-autoplay

基于浏览器自动播放的规则，实现媒体的自动播放, 并支持校验媒体元素是否允许自动播放，支持PC和移动端

example

demo1: 常见的视频播放页面场景, 支持ios微信自动播放, 传送门

功能

• 检验媒体元素是否允许自动播放
• 支持由用户交互触发的自动播放(主流浏览器都支持)
• 检测是否需要静音才能自动播放
• 特殊浏览器的非正常情况的强制自动播放, 主要是移动端的浏览器(ios微信自动播放，未来可能无效)

原理

可以在掘金看详细说明 传送门

安装

yarn add force-autoplay

npm install force-autoplay

接入方式

方式1 : import导入

import forceAutoplay from 'force-autoplay'

forceAutoplay.check(config).then((checkResult) => {
  const { result } = checkResult;
  console.log(result);
})

// !!!要兼容移动端的话，建议配置参数mediaSrc， 详细见文档底部的说明
forceAutoplay.force({mediaSrc: 'https://xxx/xxx.mp4'}).then((forceResult) => {
  const { media } = checkResult;

  media.play();
})

方式2 : 使用umd包，浏览器通过script导入

<script src="./dist/force-autoplay.min.js"></script>
<script>
forceAutoplay.check(config).then((rs) => {
  if(rs.result) {
    console.log('allow autoplay!!!')
  }
})

// !!!要兼容移动端的话，建议配置参数mediaSrc， 详细见文档底部的说明
forceAutoplay.force(config).then((rs) => {
  const { media } = checkResult;

  media.play();
});
</script>

API

点击👉 typedoc API文档

关于插件

插件是用于一些特殊场景(不通用, 可能随时无效)，所以是没有直接写在库中，目前仅写了一个ios微信自动播放(仅支持ios微信！！！以前安卓也支持的，后面没用了)的插件，后续会根据其他浏览器的测试情况，再补充插件。 插件是写在项目的【/example/plugins】目录中

关于这个库

实际上是无法强制自动播放的(浏览器限制)，只是利用一些自动播放的规则去自动播放。 其实是练手的一个库啦，提供一个思路，对于接入的同学来说，方便了自动播放的检测，并且支持检测了是否需要静音才能自动播放。 当然你按照上述的原理，直接在用户交互的事件内创建video对象或调用play()，肯定是最有效的方式....

其他

喜欢的话可以给作者一个star哦, 欢迎提Issues。

测试记录 ｜ 浏览器兼容性记录

1.测试touchstart事件跟click事件。发现在click事件内触发video.play()才有效，touchstart内调用video.play是无效的 2.UC、夸克浏览器对于播放blob视频有点问题，会出现视频能播放，但是检测自动播放失败，这种可以使用mediaSrc参数，使用mp4来检测

License

MIT

ChangeLog

【1.0.3】

• 补充文档
• 修复import导入的方式跟文档(快速接入)不匹配的问题

【1.0.4 - 1.05】

• 补充文档
• 补充线上typedoc文档

【1.0.6】

• 补充文档
• 简化check 跟 force的逻辑

【1.1.0】

• 新增静音自动播放检测
• 预播放去掉touchstart事件
• 传参修改
• 其他代码小改动

【1.1.x】

• 文档修改

【1.2.0】

• 新增mediaEle参数，支持检测自定义video的对象是否允许自动播放

【1.2.1】

• 删除debug
• 检测完自动播放后或强制自动播放后，返回的video对象的src设置为空，避免一些奇奇怪怪的问题

【1.3.0】

• 增加参数checkMuted，自定义是否检是否允许测静音自动播放