网页中视频内容自动播放

目前主流的浏览器中已经禁止带声音的媒体自动播放。具体内容在这里chrome自动播放策略(可能国内网络访问不了)。此处重点是带声音的媒体自动播放。
里面也说明了集中播放的方式

静音播放。只要将video设置为muted，然后就可以自动播放了。
引导用户点击后再进行播放。此处的点击是只要用户点击过页面的任何位置，然后就可以调用video.play()进行播放了。不是一定要点击视频部分，但是一定是要用户在此页面进行了交互.
在pc上，已经超过了用于的“媒体参与度索引"阈值，这意味着该用户以前曾播放带声音的视频，就可以自动播放。此部分个人理解是类似视频网站的白名单。
通过iframe的方式加载带音视频的网页。
此页面已经获取了使用音视频设备权限。就是此页面可以获得了使用麦克风和摄像头的权限。具体方法可以参考获取浏览器麦克风、摄像头和屏幕共享

修改浏览器设置

以Chrome为例子，现打开要播放视频的网站，点击url左边的icon，在弹出菜单中选择网站设置

然后在新页面中找到声音，然后将声音设置为允许

然后就可以自动播放带声音的媒体了。此设置是针对域名的，所以要先打开要播放视频的网站，然后再进行设置。

静音播放

<html><head><title>mute autoplay</title></head><body><video id="video"style="width: 640px; height: 480px;" src="xxx.mp4" muted autoplay ></video><button id="unmuteButton" >unmute</button><script>let button = document.getElementById("unmuteButton");let video = document.getElementById("video");button.addEventListener("click", function() {\p        video.muted = false;})</script></body>
</html>

默认静音播放，如果点击按钮就可以取消静音了。当然也可以直接用document获取click，不需要按钮也是可以的。静音播放Demo

引导用户点击

<html><head><title>user action</title></head><body><video id="video"style="width: 640px; height: 480px;" src="xxx.mp4" ></video><button id="playButton" >play</button><script>let button = document.getElementById("playButton");let video = document.getElementById("video");button.addEventListener("click", function() {video.play();})</script></body>
</html>

点击按钮后，就可以开始播放了。点击后播放Demo

iframe方式

<!-- Autoplay is allowed. -->
<iframe src="xxx.html" allow="aotuplay"><!-- Autoplay an Fullscreen are allowed. -->
<iframe src="xxx.html" allow="autoplay; fullscreen">

抱歉，此处测试了一下，貌似还是不能成功播放，上面是官方给出的代码，所以没有Demo了

获取音视频权限

<html><head><title>autoplay</title></head><body><video id="video"style="width: 640px; height: 480px;" src="xxx.mp4" ></video><script>let video = document.getElementById("video");if (navigator && navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {navigator.mediaDevices.getUserMedia({audio: true}).then((mediastream) => {video.play();}).catch((err) => {alert("getUserMedia error");console.log('getUserMedia Error:', err);});} else {alert("not support getUserMedia");}</script></body>
</html>

先获取音频权限之后再进行播放，就可以自动播放了获取音频权限后播放Demo

尝试播放，失败后再处理

<html><head><title>autoplay</title></head><body><video id="video"style="width: 640px; height: 480px;" src="xxx.mp4" ></video><script>let video = document.getElementById("video");video.play().then(() => {// autoplay success}).catch((err) => {// show play button or mute video then play again})</script></body>
</html>

尝试自动播放demo，如果播放成功，则正常，如果不成功则显示播放按钮，点击后可以正常播放。

网页中视频内容自动播放相关推荐

关于网页中视频无法自动播放的问题
有不少小伙伴在日常写代码中需要在HTML页面中嵌入一小段视频,但是目前市面上很多浏览器已经不支持自动播放视频了,其主要原因在于声音的播放问题,如果将视频静音,则可以正常自动播放.
html背景音乐自动播放embed,怎样在网页中插入背景音乐(自动播放代码).doc
怎样在网页中插入背景音乐软件 Dreamweaver带浏览器的电脑 1 首先在网上下载一个Dreamweaver软件安装,当然使用其他的网站编程软件也可以. 2 打开软件界面如下. 3 选择&quo ...
关于如何在html网页中插入可以自动播放的背景音乐
昨天想做一个带有自动播放背景音乐的html网页,频繁碰壁,最后终于找到问题所在: 一般大家会考虑到audio标签,然后在标签里使用autoplay.理论上是可以的,但是一定要注意浏览器的设置,浏览器一 ...
谷歌浏览器html音频不能自动播放,谷歌浏览器已暂停禁止网站的音视频内容自动播放功能...
谷歌浏览器近期版本上线新功能即自动限制多数网站加载的音视频内容自动播放以免干扰到用户的正常浏览. 对于用户来说该功能还是非常有实际意义的,毕竟很多网站自动加载音视频内容并冷不丁的播放确实很烦人. 但有 ...
js调用vlc_web网页中使用vlc插件播放相机rtsp流视频
可参考: vlc功能还是很强大的,有很多的现成的二次开发接口,不需配置太多即可轻松做客户端播放器或web网页播放器. 下面代码是web网页中使用vlc插件播放相机rtsp流视频: 注意: 需提前在打开 ...
php怎么让视频自动播放,怎样让优酷等视频实现自动播放
优酷播放器自动播放方法: 方法一:1.把下面的代码复制到记事本中,保存备用. http://player.youku.com/player.php/sid/XMzg4NzEyOTY==/v.swf?V ...
微信公众号网页 H5 video 标签自动播放
目录微信公众号网页 H5 video 标签自动播放问题描述解决方案微信公众号网页 H5 video 标签自动播放环境:微信公众号网页需求:H5 video 标签自动播放视频 video 标 ...
实现类似微博视频滚动自动播放与暂停
最近需要实现一个类似于微博内容中视频自动播放与暂停的功能.拿到这个功能后,需要把技术点细化.首先分析微博实现视频自动播放暂停的流程,拿到了我的华为荣耀7打开微博玩了半个小时..发现当手机处于连接WiF ...
javascript如何实现类似西瓜视频的视频队列自动播放？
关注并将「趣谈前端」设为星标每天定时分享技术干货/优秀开源/技术思维前言去年利用空余时间研究了一下javascript的Interp Observer API,发现其有很大的应用场景,比如图片或 ...