video 自動播放及循環播放問題

代碼

<video id="screenVideo"

       ref="video"

       :muted='muted'

       :src="videoSrc"

       webkit-playsinline="false"

       x-webkit-airplay="allow"

       x5-video-player-type="h5"

       x5-video-player-fullscreen="true"

       x5-video-orientation="portraint"

       style="object-fit:fill">

</video>

 

代碼關於video

　　-> muted: true/false 靜音

 

　　-> webkit-playsinline : ios 10中設置可以讓視頻在小窗內播放，即非全屏播放

 

　　-> x-webkit-airplay ：landscape|portrait 播放器顯示的方向，橫屏|豎屏，默認值為豎屏，該屬性只有在設置【x5-video-player-type="h5"】之后才生效

 

　　-> x5-video-player-type="h5" :  啟用x5內核H5播放器

 

　　-> x5-video-player-fullscreen="true" : 全屏設置，設置為 true 是防止橫屏

 

　　-> style="object-fit:fill" : 加這個style會讓 Android / web 的視頻在微信里的視頻全屏，如果是在手機上預覽，會讓視頻的封面同視頻一樣大小

 

video自動播放問題

報錯 一 ：

   場景： 視頻較大時，無法自動播放。已設置loop屬性，但依然無法自動播放。

 

   chrome報錯：Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD

 

   safari報錯：NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

 

  原因：chrome66版本新增的特性，為了避免標簽產生隨機噪音，不支持無用戶交互狀態下自動播放，即：禁止自動播放。

　　　  Chrome在18年4月做了更改，瀏覽器為了提高用戶體驗，減少數據消耗，現在都在遵循autoplay政策。

　　 1）.muted autoplay始終被允許

       2）.音樂的autoplay 只有在下面集中情況下起作用：

        　　2.1）. 有用戶行為發生像（click,tap,etc）;

         　2.2）. 對於桌面程序，用戶已經提前播放了音頻;

         　 2.3）. 對於移動端用戶將音頻網址home screen;

  以上，將loop循環播放以及autoplay更改為手動設置。代碼如下：

 

/*
 * 手動監聽視頻播放結束
 * */
let screenVideo = document.getElementById('screenVideo')
screenVideo && (this.muted = false)
screenVideo && (screenVideo.addEventListener('ended', function () {
    screenVideo.play && screenVideo.play()
}))

注意：video不能帶loop屬性，否則監聽不到ended事件 。

然而，去掉autoplay和loop屬性更改為手動配置，且設置為靜音模式muted為true，依然不能實現循環播放。播放結束后，頁面再次報錯。

報錯 二 ：

　　1. Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().報了一個promise的錯，play操作被pause操作暫停。

      2. Uncaught (in promise) DOMException: The element has no supported sources.

以及【eruda】報的錯。

　

查了原因，音頻文件還未被加載完成。那么既然play返回promise實例。我們可以在 play() 執行成功后，播放音頻，然后執行后續操作。

更改代碼如下：

    window.addEventListener('load', function () {
        var screenVideo = document.getElementById('screenVideo')
        screenVideo.addEventListener('ended', function () {
            screenVideo.load();
            let playPromise = screenVideo.play();
            if (playPromise !== undefined) {
                playPromise.then(() => {
                    screenVideo.play()
                }).catch(() => {
                    console.log('catch');
                })
            }
        }, false);
    })

至此成功！
===========番外篇=============

window.addEventListener('load', function () {
  var screenVideo = document.getElementById('screenVideo')
       screenVideo.addEventListener('ended', function () {
           screenVideo.pause()
           screenVideo.load()
           screenVideo.play()
       }, false);
})
以上也可實現，但是未找到理論依據......