Videos 自動播放

張貼者:2019年11月18日 上午3:05Jobs Dennis   [ Jack Liou 已於 2019年11月18日 下午6:07 更新 ]
會有這篇是因為有老師問,在 Moodle 課程中使用像 mp4 的影音素材,最近遇到的問題:
就是這個錯誤訊息: DOMException: play() failed because the user didn't interact with the document first.
這就要帶出以下的內容。在這之前如果你對 Moodle 使用影片教材有疑問,IT邦幫忙有篇文章說明Youtube有些資源: Youtube 影片嵌入(頁面) 、HTML5 影片嵌入(檔案資源)都可以參考。

Chrome 對 Autoplay 的限制

大家最常使用的  moodle 教材,應該就是影片了,以影片教材為例;你可能會注意到我們 Moodle 上的活動(videos) 預設都是無聲音的,回想一下以前逛過的部落格一進去,馬上就有音樂播放(好聽的音樂大家會覺得很悅耳,但每個人的喜好不同,你播放的音樂不一定是別人喜歡的,某種程度上或許會給別人帶來一些困擾)。
Moodle Cam (Screen capture & web camera recording)
那麼,影音在Chrome瀏覽器(Moodle)上,預設到底可不可以讓 video 自動播放呢?在早期瀏覽器是允許這個行為的,但現在是不允許的,但在一些條件下,還是可以自動播放的:
  • 設定靜音,則允許自動播放(Muted autoplay is always allowed)
  • 用戶的行為(使用者與瀏覽器互動),  如: click、touch 事件,當使用者點擊播放...
  • 使用 iframe: 頂部 frame 可以將自動播放權限委託給他們的 iframe,允許自動播放聲音

Video tag

以影片播放來舉例:
<video id="videos" controls="controls" preload="none" poster="http://media.w3.org/2010/05/sintel/poster.png">
    <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4" />
</video>
建立活動就像下圖(當然您在建立時要切到 HTML 模式, 可參考: iframe 影音教材影音教材資源
Moodle edit video tag with autoplay

自動撥放

若是透過 JavaScript 來操控這個 Video 來讓他自動播放:
<script type="text/javascript">
  window.onload = function() {
    var player = document.querySelector('video#videos');
    player.play();
  }
</script>

開啟F12(開發人員工具)會看到 console 有如下的錯誤:
DOMException: play() failed because the user didn't interact with the document first.
意思是,如果使用者和瀏覽器沒有互動的話,play() 會失敗;

解決方案

如果想要解決這個問題可以根據上面的方式,在 video tag 加入 muted 這樣 JavaScript 就可以成功執行 play() 方法。
以上面的例子,修改後:
<video id="videos" controls="controls" preload="none" poster="http://media.w3.org/2010/05/sintel/poster.png" muted>
    <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4" />
</video>


上面分享的 youtube 也有教大家怎麼用
加入 Video 的方法,歡迎參考。(這個影片全程用 Moodle Catch 錄製)

Comments