HTML5 视频自动播放并不总是被触发

Question

我正在通过 JS 创建一个自动播放视频元素，但它的播放事件不能总是被触发。

const video = document.createElement('video')
video.src = 'http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv'
// video.muted = true
video.loop = true
video.autoplay = true

video.addEventListener('canplay', () => {console.log('can')})
video.addEventListener('play',() => {
  console.log('playing')
  // setTimeout(() => {console.log(video.currentTime)}, 5000)
}, true)

https://codepen.io/drafting-dreams/pen/MWyxwRX

Answer 1

这是因为您已评论video.muted = true 。 带声音的视频只能在特定条件下自动播放 ( https://developers.google.com/web/updates/2017/09/autoplay-policy-changes )

Answer 2

添加这行代码似乎可以解决问题：

video.setAttribute('crossorigin', 'anonymous')

我还在 MDN (Mozilla) 上找到了这篇文章，它阐明了图像元素上crossorigin属性的用法，但它为视频元素提供了有用的见解。

Answer 3

我认为你应该补充：

video.load();