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属性更改为preload=“none”,，但是preload属性存在多个已记录的问题。主要是，浏览器似乎有几个不同的实例，在这些实例中，它们将完全忽略标签，或者以与预期不同的方式对待标签。例如，某些版本的safari不支持此标记的元数据版本。

您可能要考虑减少文件的大小或视频数量，或更改向用户提供视频的方式。您可以使用js在页面加载时动态加载它们，而不必直接将其加载到标记中。

考虑一下有关预加载视频的最佳做法的文章：https://developers.google.com/web/fundamentals/media/fast-playback-with-video-preload

如何防止在Mac OS Safari浏览器中预加载HTML5视频以减少页面加载时间

1 个答案: