原以为在< video >标签上加入"autoplay" 属性就能自动播放了,没想到会受到浏览器的安全限制,会阻止视频的自动播放,具体说明可查看:
https://developer.mozilla.org/zh-CN/docs/Web/Media/Autoplay_guide
想让浏览器自动播放视频/音频媒体的具体解决方法如下:
1、首先要在video标签上加入必要的属性,例如:
html
<video id="Video" playsinline muted preload autoplay loop>
<source type="video/mp4" src='xxxx.mp4' />
</video>
- 尤其注意需要设置 "音频文件静音或其音量设置为0"
- 苹果设备还需要额外设置 "playsinline" 私有属性
2、如果还不能自动播放,就在js代码里加入video元素的play()事件
javascript
document.querySelector("#Video").play();
3、如果还需要满屏显示,就给video加一个样式属性
css
.video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}