时间戳

首页 > 解决方案 > 如何防止在 mac OS Safari 浏览器中预加载 HTML5 视频以减少页面加载时间

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

问题描述

我有带有多个 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>

标签： htmlvideo

解决方案

您可以尝试将您的 preload 属性更改为，preload=“none”,但 preload 属性有几个记录在案的问题。主要是，浏览器似乎有几个不同的实例，它们会完全忽略标签，或者以与预期不同的方式对待标签。例如，某些版本的 safari 不支持此标记的元数据版本。

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

考虑这篇关于预加载视频最佳实践的文章：https ://developers.google.com/web/fundamentals/media/fast-playback-with-video-preload

推荐阅读