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.load();

Answer 2

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

Answer 3

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

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

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

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

HTML5 video autoplay is not always triggered

html

javascript

video

autoplay