jquery - 如何使用媒体查询删除视频元素

Question

我有一个在窗口加载时自动播放的视频。但是现在我正在做移动版本，我想将其删除。在我的移动查询中使用 display:none 会删除该元素，但视频仍会在后台播放。我的 html 中有一个脚本，它控制视频淡入和淡出，我想只使用窗口宽度添加一个 if else 语句，但没有运气。该元素已删除，但视频仍在后台播放。对此的任何指导将不胜感激。

<script type="text/javascript">
$(window).load(function() {

    if($(window).width()<761){
        $('video').get(0).pause();
        $('#intro').remove();
    }
    else{

    $('#intro').fadeIn(10000, function() {
    });

    $('video').bind('ended', function(){

        $('#intro').fadeOut(5000, function() {
        });
     });

     $('button').click(function() {
                $('video').get(0).pause();
                $('#intro').css('display', 'none');

     });
});
}
</script>

Answer 1

您是否尝试过从 DOM 中实际删除元素：

if($(window).width()<761){
        $('video').get(0).pause();
        $('#intro').remove();
    }

您还可以使用 Javascript 有条件地附加视频的标记。所以从标记中省略视频并添加以下 Javascript，显然这需要为您的视频定制。

$(window).load(function() {

    if($(window).width()<761){
        $('video').get(0).pause();
        $('#intro').remove();
    }
    else{
    //only add markup when screen size is large enough
    $(document).append('<video style="display:none" width="320" height="240" controls><source src="movie.mp4" type="video/mp4"><\/video>');

    $('#intro').fadeIn(10000, function() {
    });

    $('video').bind('ended', function(){

        $('#intro').fadeOut(5000, function() {
        });
     });

     $('button').click(function() {
                $('video').get(0).pause();
                $('#intro').css('display', 'none');

     });
});
}