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');

     });
});
}

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

1 个答案: