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