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