Question

我希望能够在开始播放之前根据使用javascript / jquery的媒体查询更改视频源。前提是，如果屏幕分辨率低于某个值，那么设备是移动的，并假设它在移动网络上，因此加载较低分辨率的视频。

以下工作，但我得到一个'故障'原始视频加载之前jQuery做的事情和更改视频源。我已经研究过使用html5视频标签内置的媒体查询，但了解它的支持有限。

<style>
#mobile-indicator {
display: none;
}

@media (max-width: 767px) {
    #mobile-indicator {
        display: block;
    }
}
</style>

html如下

<script type="text/javascript">
    (function($){
        $(window).on("load",function(e){
            $('video source').each(function(){
                var isMobile = $('#mobile-indicator').is(':visible');
                if (isMobile == true){
                    var videoSrc = ($(this).attr('src'));
                    var videoSmall = $(this).attr('src').replace('.mp4', '_small.mp4');
                    $(this).attr('src', videoSmall);
                    $("video")[0].load();
                    //console.log(newExt);
                }
            });

        });
    })(jQuery);
</script>
<div class="bg_video">
    <video class="video" poster="<?PHP echo $bg_image; ?>" id="bg_video" playsinline autoplay muted loop >
        <source src="https://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4" type="video/mp4">
    </video>
</div>
<div id="mobile-indicator"></div>

在视频开始播放之前我是如何进行媒体查询的？干杯，菲利普

我创建了一个展示问题的codepen

[基于VC.One解决方案更新]

<script type="text/javascript">
    (function($){
        $(window).on("load",function(e){
            $('video source').each(function(){
                var isMobile = $('#mobile-indicator').is(':visible');
                var videoSrc = 'images/backgrounds/<?PHP echo $bg_video; ?>';
                if (isMobile == true){
                    var videoSmall = videoSrc.replace('.mp4', '_small.mp4');
                    $(this).attr('src', videoSmall);
                }else{
                    $(this).attr('src', videoSrc);  
                }
                $("video")[0].load();
            });

        });
    })(jQuery);
</script>
<div class="bg_video">
    <video class="video" <?PHP echo ($bg_image !="") ? 'poster="' . $bg_image . '"' : ''; ?>" id="bg_video" playsinline autoplay muted loop >
        <source src="images/backgrounds/null.mp4" type="video/mp4">
    </video>
</div>

Answer 1

似乎一个简单的If/Else语句有效。让我知道它是怎么回事。

（1） HTML ：使用null.mp4之类的虚拟网址，以便视频标记在开始时不会加载任何内容。

<div class="bg_video">
    <video class="video" poster="<?PHP echo $bg_image; ?>" id="bg_video" playsinline autoplay muted loop >
    <source src="null.mp4" type="video/mp4">
    </video>
</div>

（2） JS ：在JavaScript代码中使用If/Else语句。

(function($)
{
    $(window).on("load",function(e)
    {
        $('video source').each(function()
        {
            var isMobile = $('#mobile-indicator').is(':visible');

            if (isMobile == true)
            {
                alert("is mobile");
                var videoSmall = "https://www.w3schools.com/html/mov_bbb.mp4";
                $(this).attr('src', videoSmall);
            }
            else
            {
                alert("not mobile");
                var videoLarge = "https://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4";
                $(this).attr('src', videoLarge);
            }

            $("video")[0].load();

        });
    });
})(jQuery);

使用jquery在播放之前更改视频源

1 个答案: