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 的视频在微信里的视频全屏，如果是在手机上预览，会让视频的封面同视频一样大小

代码相关问题

1. 部分测试机（大屏显示器）无法循环播放

原因：可能是机型太老，视频过大

解决：去掉loop属性，给video绑定ended事件，手动播放；且设置【muted】属性默认为true，之后再手动更改为false

/*
* 手动监听视频播放结束
* */
let screenVideo = document.getElementById('screenVideo')
screenVideo && (this.muted = false)
screenVideo && (screenVideo.addEventListener('ended', function () {
    screenVideo.play && screenVideo.play()
}))

注意：video不能带loop属性，否则监听不到ended事件

2.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;

解决：设置video标签muted属性为true,播放之前，再手动更改为false关掉静音