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

可能需要添加“静音”属性以允许其自动播放 - 请参阅此示例：

例如，如果你想要一个引用：

，下面的代码片会以chrome格式播放

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

当页面加载时，Chrome停止了视频

1 个答案: