Question

我目前有一个响应式HTML横幅，里面有视频（利用视频标签）。我的单位是响应性的，因为整个事情将扩展，视频也将如此。我有一个断点设置，当窗口关闭低于820px时打开新的div。这是通过

完成的

 @media (max-width:820px) {

//css is here
}

我想要包含javascript的javascript，当达到这个尺寸时也会移除或暂停视频，这样视频就不会继续播放。我的简单：

  .ad_div2
 {
 display:none;
 }

视频元素的生命只是隐藏了div，但您仍然可以听到在后台播放的视频。

我尝试过几件事，但不确定我是否正确设置。

 <script>
 var parent=document.getElementById("div1");
 var child=document.getElementById("p1");
 parent.removeChild(child);
 </script>

（使用我合适的id名称）并且在我的@media标签中没有这样做 - 也许我把它放在错误的区域或者它不是我需要的。

任何帮助都将一如既往地受到高度赞赏。谢谢！

Answer 1

这个jQuery函数调用向窗口的resize函数添加一个事件处理程序，然后停止并隐藏视频。

$(document).ready(function () {
    $(window).resize(function () {
        if ($(this).width() < 820)
            $(videoSelector)[0].pause().css({display:'none'});
    });
});

Answer 2

您需要在窗口调整大小事件上添加一个侦听器。

$(function() {
    var videoElement = document.getElementById('yourVideoID'),
        $window      = $(window);

    $window.resize(function() {
        var windowWidth = $window.width();

        if (windowWidth < 820 && !videoElement.paused) {
            videoElement.pause();
        }
        else if (windowWidth >= 820 && videoElement.paused) {
            videoElement.play();
        }
    });
});

基本上，当窗口宽度低于820px时，如果视频当前未暂停，请暂停该视频。当窗口大小为>= 820px时，我添加了一些额外的功能来播放它。

在窗口调整大小时暂停/停止或删除HTML5视频

2 个答案: