2

我目前有一个响应式 HTML 横幅，其中包含视频（使用视频标签）。我的单位反应灵敏，因为整个东西都会缩放，视频也会缩放。我有一个断点设置，当窗口在 820 像素以下关闭时会打开新的 div。这是通过

 @media (max-width:820px) {

//css is here
}

我想包括 jquery 的 javascript，当达到这个大小时，它也会删除或暂停视频，这样视频就不会继续在看不见的地方播放。我的简单：

  .ad_div2
 {
 display:none;
 }

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

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

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

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

一如既往，任何帮助将不胜感激。谢谢！

4

2 回答 2

1

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

$(document).ready(function () {
    $(window).resize(function () {
        if ($(this).width() < 820)
            $(videoSelector)[0].pause().css({display:'none'});
    });
});
于 2013-08-19T19:18:25.550 回答
0

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

$(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.

于 2013-08-19T19:18:43.000 回答