Как можно предотвратить предварительную загрузку HTML5-видео в браузере Safari для Mac OS, чтобы сократить время загрузки страницы

Question

У меня есть сова карусель с несколькими видео HTML5.Я добавил preload = "none", и он отлично работает в Chrome и Mozila, но не в версии Mac Safari.

    <div id="CustomVideo" class="banner-video webview">
 <video muted="true" preload="metadata">
    <source src="demo.webm" type="video/webm">
    <source src="demo.mp4" type="video/mp4">
 </video>
</div>


 <script>
        var owl = $('.slider_owl');
        $('.slider_owl').owlCarousel({
            items: 1,
            loop: true,
            dots: false,
            video: true,
            lazyLoad:true,
            autoplay:true,
            autoplayHoverPause:false,
            autoplayTimeout:5000,   
            responsive : {
                // breakpoint from 768 up
                768 : {
                    onInitialized: function () {
                        if ($(".owl-item.active video", this.$element).length) {
                            $(".owl-item.active video", this.$element)[0].play();

                            owl.trigger('stop.owl.autoplay');
                            $(".owl-item.active video", this.$element).on('ended', function () {
                                owl.trigger('play.owl.autoplay')
                            });
                        }
                    },
                    onTranslated: function () {
                        if ($(".owl-item.active video", this.$element).length) {
                            $(".owl-item.active video", this.$element)[0].play();
                            owl.trigger('stop.owl.autoplay');
                            $(".owl-item.active video", this.$element).on('ended', function () {
                                owl.trigger('play.owl.autoplay')
                            });
                        }
                    }
                }
            }              
        });
    </script>

Answer 1

Вы можете попробовать изменить свой атрибут предварительной загрузки на preload=“none”,, но есть несколько задокументированных проблем с атрибутом предварительной загрузки.В основном браузеры, кажется, имеют несколько разных случаев, когда они будут полностью игнорировать тег или обрабатывать тег иначе, чем ожидалось.Некоторые версии safari не поддерживают версию метаданных этого тега, например.

Возможно, вы захотите уменьшить размер файла или количество видео или изменить способ их передачи пользователю.Вы можете использовать js для их динамической загрузки при загрузке страницы, а не загружать их непосредственно в разметку.

Рассмотрите эту статью о передовых методах предварительной загрузки видео: https://developers.google.com/web/fundamentals/media/fast-playback-with-video-preload