chrome浏览器video无法自动播放

2023-11-24 21:08| 来源: 网络整理| 查看: 265

chrome浏览器中video无法自动播放

功能实现：canvas画布上视频的自动播放

问题描述：

chrome浏览器中，设置autoplay,无法实现自动播放。（1）在代码方面，将video加muted属性可以实现静音播放，但我想实现有声音的自动播放（2）直接手动播放，video.play(),但出现dom异常，浏览器需要与用户交互之后才能调用这个方法，因此采用模态框的方法，当用户点击是时，视频自动播放，否则不播放。因为只是一个test,所以其他细节暂不考虑。

踩坑记录：

刚开始想要通过通过loadeddata监听视频数据是否加载完，然后在加载完后播放视频，把视频的每一帧渲染在画布上。调试的时候发现这样视频根本都不会显示在画布上。起先我以为我没拿到video,但去看了发送请求，发现video是拿到了的。最后发现可能原因是视频数据加载完成的时候，我还没拿到画布。改动之后的代码如下：

*{ 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:1; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: auto; } .none{ opacity: 0; pointer-events: none; } .modal > div { width:400px; position: relative; margin:10% auto; padding:5px 20px 13px 20px; border-radius:10px; background:#fff; background: -moz-linear-gradient(#fff, #999); background: -webkit-linear-gradient(#fff, #999); background: -o-linear-gradient(#fff, #999); } .yes,.no { background:#606061; color:#FFFFFF; line-height:25px; position: absolute; right: -12px; text-align: center; top: -10px; width:24px; text-decoration: none; font-weight: bold; -webkit-border-radius:12px; -moz-border-radius:12px; border-radius:12px; -moz-box-shadow:1px 1px 3px #000; -webkit-box-shadow:1px 1px 3px #000; box-shadow:1px 1px 3px #000; } .no{ right: 24px; } .yes:hover, .no:hover{ background:#00d9ff;} 是否提示信息：是否允许本页中的音/视频自动播放？ window.onload = function(){ var oc = document.querySelector('#oc'); var video = document.querySelector('video'); let oModal=document.querySelector("#modal"); let oYes=document.querySelector("#yes"); let oNo=document.querySelector("#no"); let userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 //chrome下的判断 if (userAgent.indexOf("Chrome") > -1){//判断是否是Chrome浏览器 //alert("我是 Chrome"); oModal.className="modal"; oYes.onclick=function () {//选择是 oModal.className="none";//隐藏模态框 if(oc.getContext){ var ctx = oc.getContext("2d"); video.play(); setInterval(function(){ ctx.drawImage(video,0,0,oc.width,oc.height); }) } } oNo.onclick=function () {//选择否 oModal.className="none";//隐藏模态框，无自动播放 } } }

模态框的部分是copy的https://blog.csdn.net/weixin_44093239/article/details/85803103

【本文地址】

公司简介

联系我们