我使用以下代码:
<video width="440px" loop="true" autoplay="true" controls>
<source src="http://www.example.com/CorporateVideo.mp4" type="video/mp4" />
<source src="http://www.example.com/CorporateVideo.ogv" type="video/ogv" />
<source src="http://www.example.com/CorporateVideo.webm" type="video/webm" />
</video>
我想让视频自动播放,但当页面加载视频不播放。这看起来像是一个缓冲问题,因为当我将鼠标悬停在视频上(以显示控件)时,视频总是在2秒内,但随后停止并且不继续。
注意:我刚刚访问了网站再次和自动播放似乎工作,但当我再次尝试同样的问题发生,这是一个缓冲问题?我能做些什么来阻止这一切吗?
Chrome不允许自动播放,如果视频不是静音。试试这样:
<video width="440px" loop="true" autoplay="autoplay" controls muted>
<source src="http://www.tuscorlloyds.com/CorporateVideo.mp4" type="video/mp4" />
<source src="http://www.tuscorlloyds.com/CorporateVideo.ogv" type="video/ogv" />
<source src="http://www.tuscorlloyds.com/CorporateVideo.webm" type="video/webm" />
</video>
尝试autoplay="autoplay"
代替"true"
值。这是文档中启用自动播放的方法。我知道这听起来有点多余。
移动浏览器通常会忽略此属性,以防止在用户明确开始下载之前消耗数据。
UPDATE: Android和iOS上较新版本的移动浏览器支持自动播放功能。但是它只在视频静音或没有音频通道时起作用:
一些附加信息:https://webkit.org/blog/6784/new-video-policies-for-ios/
工作方案 2018年10月,用于包含音频通道的视频
$(document).ready(function() {
$('video').prop('muted',true).play()
});
看看我的另一个更深入的答案:https://stackoverflow.com/a/57723549/3049675
就用吧:自动播放控件静音
html {
padding: 20px 0;
background-color: #efefef;
}
body {
width: 400px;
padding: 40px;
margin: 0 auto;
background: #fff;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}
video {
width: 400px;
display: block;
}
<video onloadeddata="this.play();this.muted=false;" poster="https://durian.blender.org/wp-content/themes/durian/images/void.png" playsinline loop muted controls>
<source src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4" />
Your browser does not support the video tag or the file format of this video.
</video>
如果您的软件不支持jQuery或给出任何引用类型错误,您可能需要添加一些脚本。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
//Use above scripts only if the software you are working on doesn't support jQuery.
<script>
$(document).ready(function() {
//Change the location of your mp3 or any music file.
var source = "../Assets/music.mp3";
var audio = new Audio();
audio.src = source;
audio.autoplay = true;
});
</script>