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);
})
以上也可实现，但是未找到理论依据......