Chrome остановил видео при загрузке страницы - PullRequest
Новая
       5

Chrome остановил видео при загрузке страницы

0 голосов
/ 21 мая 2018

У меня на сайте есть видео с автовоспроизведением 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');

    });
}

На самом деле я заметил, чтоесли перейти по ссылке, она работает сразу, но если вы обновите, она не будет работать снова.Кто знает в чем проблема?

1 Ответ

0 голосов
/ 22 мая 2018

Возможно, вам потребуется добавить атрибут '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>
...