chrome浏览器中video无法自动播放
功能实现:canvas画布上视频的自动播放
问题描述:
chrome浏览器中,设置autoplay,无法实现自动播放。
(1)在代码方面,将video加muted属性可以实现静音播放,但我想实现有声音的自动播放
(2)直接手动播放,video.play(),但出现dom异常,浏览器需要与用户交互之后才能调用这个方法,因此采用模态框的方法,当用户点击是时,视频自动播放,否则不播放。因为只是一个test,所以其他细节暂不考虑。
踩坑记录:
刚开始想要通过通过loadeddata监听视频数据是否加载完,然后在加载完后播放视频,把视频的每一帧渲染在画布上。调试的时候发现这样视频根本都不会显示在画布上。起先我以为我没拿到video,但去看了发送请求,发现video是拿到了的。最后发现可能原因是视频数据加载完成的时候,我还没拿到画布。改动之后的代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#oc{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
/* background-color: gray; */
}
/*模态框的样式*/
.modal {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top:0;
right:0;
bottom:0;
left:0;
background:rgba(0,0,0,0.8);
z-index:99999;
opacity