video遇到问题汇总

1、调取视频自动播放video.play()时报错

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

因为没法在页面加载完成的时候播放音频或视频。这是Chrome 66的新特性，

解决：静音就可以了，Chrome 66为了避免标签产生随机噪音。

<video muted></video>

用原生写法

正确：

//Js写法
var video = document.getElementById("video");
video.play();

// Jquery写法
$("#video")[0].play();
//或
$("#video").get(0).play();

JQ写法报错

$("#video").play();

2、<video>视频画中画功能，火狐或一些其他浏览器是不支持的，移动端画中画不同浏览器手机效果也不同，

解决：pc端画中画功能可以用改变视频大小，拖拽自行实现来模拟大致效果，移动端同理

 

3、video移动端视频无法自动播放

移动端两个问题 ，因为不同手机浏览器的机制不同：

问题一：
移动端视频需要用户手动触发才能播放，这样就导致进入有视频的界面是黑色的

问题二：
移动端H5页面浏览器机制下，视频浮层一直在最上方；微信下不是最上方　　

解决办法：
只要有点击事件就可以，可以在视频上放一视频封面背景图，在加播放按钮图标，这样触发最上层遮罩时视频也会被触发 ，因为有用户点击事件在

 $("#videoPlay").click(function () {
      var video= document.getElementById("video");
      video.play();
}

　

效果如下：