我花了很多时间试图弄清楚为什么视频会像这样嵌入:
<video height="256" loop autoplay muted controls id="vid">
<source type="video/mp4" src="video_file.mp4"></source>
<source type="video/ogg" src="video_file.ogg"></source>
</video>
一旦页面在FireFox中加载，就开始自动播放，但不能在基于Webkit的浏览器中自动播放。这只发生在一些随机的页面上。到目前为止我还没有找到原因。我怀疑一些未关闭的标签或CMS编辑器创建的大量JS。
当前回答
尝试一下，这是简单和简短的，它与我的代码工作，而我有视频全屏和其他元素后面，我只是使用z-index -1;
<video autoplay loop id="myVideo">
其他回答
在React + Chrome中，最好导入视频，而不是将其作为src给。
import React from 'react';
import styled from 'styled-components';
import video from './videos.mp4';
const StyledVideo = styled.video`
width: 100%;
height: 100vh;
object-fit: cover;
`
const BackgroundVideo = () => {
return (
<StyledVideo autoPlay loop muted>
<source src={video} type="video/mp4" />
</StyledVideo>
);
}
还记得
视频在同一个目录下，导入即可。 要自动播放，视频在背景，使用自动播放和静音道具都有。
角10:
<video [muted]="true" [autoplay]="true" [loop]="true">
<source src="/assets/video.mp4" type="video/mp4"/>
</video>
我能得到的最好的修复是在</video>之后添加这段代码
<script>
document.getElementById('vid').play();
</script>
.．.虽然不漂亮，但还是管用的。
更新 最近许多浏览器只能自动播放视频的声音关闭，所以你需要添加静音属性的视频标签
<video autoplay muted>
...
</video>
在safari iPhone上，当电池电量不足，iPhone处于低电量模式时，它不会自动播放，即使你在视频html标签上设置了以下属性:自动播放，循环，静音，playsinline。
走一走我发现工作是有用户手势事件触发视频播放:
document.body.addEventListener("touchstart", function () {
var allVideos = document.querySelectorAll('video');
for (var i = 0; i < allVideos.length; i++) {
allVideos[i].play();
}
},{ once: true });
你可以在webkit网站上阅读更多关于iOS用户手势和视频策略的信息:
https://webkit.org/blog/6784/new-video-policies-for-ios/
尝试一下，这是简单和简短的，它与我的代码工作，而我有视频全屏和其他元素后面，我只是使用z-index -1;
<video autoplay loop id="myVideo">
