Chrome 在加载网页时停止了视频

Question

我的网站上有一个自动播放的视频 http://vakuutustiedot.fi/arkhaltia/它在Mozilla上运行良好，但在Chrome上不起作用。加载页面时，视频立即停止，直到您刷新页面(至少 2 次(才播放。

<div class="homepage-hero-module">
<div class="video-container">
<video id="vid" autoplay loop class="fillWidth">
<source src="video/video1.mp4" type="video/mp4" />
<source src="video/video1.webm" type="video/webm" />
</video>
<div class="poster hidden">
<img src="images/smoke.jpg" alt="">
</div>
<script>
$('#vid')[0].play()
</script>
</div>
</div>

.JS：

$( document ).ready(function() {
scaleVideoContainer();
initBannerVideoSize('.video-container .poster img');
initBannerVideoSize('.video-container .filter');
initBannerVideoSize('.video-container video');
$(window).on('resize', function() {
scaleVideoContainer();
scaleBannerVideoSize('.video-container .poster img');
scaleBannerVideoSize('.video-container .filter');
scaleBannerVideoSize('.video-container video');
});
});
function scaleVideoContainer() {
var height = $(window).height() + 5;
var unitHeight = parseInt(height) + 'px';
$('.homepage-hero-module').css('height',unitHeight);
}
function initBannerVideoSize(element){
$(element).each(function(){
$(this).data('height', $(this).height());
$(this).data('width', $(this).width());
});
scaleBannerVideoSize(element);
}
function scaleBannerVideoSize(element){
var windowWidth = $(window).width(),
windowHeight = $(window).height() + 5,
videoWidth,
videoHeight;
// console.log(windowHeight);
$(element).each(function(){
var videoAspectRatio = $(this).data('height')/$(this).data('width');
$(this).width(windowWidth);
if(windowWidth < 1000){
videoHeight = windowHeight;
videoWidth = videoHeight / videoAspectRatio;
$(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'});
$(this).width(videoWidth).height(videoHeight);
}
$('.homepage-hero-module .video-container video').addClass('fadeIn animated');
});
}

实际上，我已经注意到，如果通过链接，它会立即工作，但是如果您刷新，它将无法再次工作。谁知道问题出在哪里？

Answer 1

您可能需要添加"muted"属性以允许它自动播放 - 请参阅此示例：

下面的代码段在 chrome 中播放，例如，如果您想要引用：

<video autoplay muted poster="path to video" id="bgvid">
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>