西瓜播放器 HTML5 video video.js 播放器 HTML5播放器 mp4 hls hls.js flv flv.js dash dash.js 无缝切换

关于自动播放

Note

文中描述的自动播放是指非用户行为触发的播放操作,包括autoplay:true配置,也包括js代码制直接调用player.play(), 定时器中player.play()之类非用户交互行为触发的播放

移动端自动播放

对于大多数移动 webview 和浏览器,默认情况下会阻止有声自动播放,即使 config.autoplay 的配置值为 true 也是如此. 如果你想知道自动播放何时被阻止,请监听事件Events.AUTOPLAY_PREVENTED, 如果想知道自动播放成功触发,则可以监听事件Events.AUTOPLAY_STARTED

import Player, { Events } from 'xgplayer'
const player = new Player({
  ...,
  autoplay: true
})

player.on(Events.AUTOPLAY_PREVENTED, () => {
  console.log('autoplay was prevented!!')
})

player.on(Events.AUTOPLAY_STARTED, () => {
  console.log('autoplay success!!')
})

因为视频有声自动播放通常会被block,无法触发,因此我们可以选择设置config.autoplayMutedtrue进行静音起播,达到自动播放的目的。但是只能是大多数场景可以自动播放,不能保证一定能够自动播放,不同的app和浏览器配置不一样,表现不一样。具体配置如下

var player = new Player({
  ...,
  autoplayMuted: true,
  autoplay: true
})

如果你是在自己的app webView中打开页面,webview的配置是可控的情况下,你可以定制webview的setting来达到自动播放的目的,这需要native端的开发人员配合,具体实现参考以下文档

  • IOS

mediaplaybackrequiresuseraction

IOS10+ TypesRequiringUserActionForPlayback

Notice

IOS端省电模式下,即使支持添加上webview配置支持自动播放、或者是默认静音也都无法自动播放,因为播放视频是个耗能行为

  • Android

setMediaPlaybackRequiresUserGesture

PC端自动播放

  1. 在pc端自动播放的支持会更统一一些,基本上都可以静音起播;非静音的情况下,在chrome中会根据有用户在网站的交互,对你的域名有一个是否能自动播放的打分,浏览器会有一个策略根据用户交互来决定是否能非静音情况下自动播放,具体原理请看chrome内核自动播放策略
var player = new Player({
  ...,
  autoplayMuted: true,
  autoplay: true
})
  1. 对chrome用户而言, 浏览器控制栏打开 chrome://media-engagement/ 查看当前站点是否允许有声音自动播放

  2. 对于safari用户人眼, 用户可以通过配置网站的权限,可以授权网站自动播放声音, 具体设置如下:

【地址栏右键】 =>【此网站设置】=>自动播放】

  1. 同样的监听事件Events.AUTOPLAY_PREVENTED得知当前环境自动播放失败, 监听事件Events.AUTOPLAY_STARTED可以知道自动播放成功触发
import Player, { Events } from 'xgplayer'
const player = new Player({
  ...,
  autoplay: true
})

player.on(Events.AUTOPLAY_PREVENTED, () => {
  console.log('autoplay was prevented!!')
})

player.on(Events.AUTOPLAY_STARTED, () => {
  console.log('autoplay success!!')
})