chrome浏览器video无法自动播放

最新推荐文章于 2024-07-12 16:06:10 发布

destiny026

最新推荐文章于 2024-07-12 16:06:10 发布

阅读量2k

点赞数 1

文章标签： javascript html js

本文链接：https://blog.csdn.net/qq_42324241/article/details/117653509

版权

在Chrome浏览器中，由于安全策略限制，video标签默认无法自动播放有声音的视频。通过添加muted属性可实现静音播放，但若需有声音自动播放，需要用户交互后才能调用play()方法。一种解决办法是使用模态框，在用户确认后播放。此外，尝试通过loadeddata事件监听视频加载，但在视频数据加载完成后，若画布未准备好，视频不会显示在画布上。

摘要由CSDN通过智能技术生成

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

最低0.47元/天解锁文章

destiny026

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
chrome浏览器video无法自动播放

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

扫一扫