Question

我希望我的HTML5视频能够以600px的速度消失，因为手机不会自动播放，并且似乎无法正常运行javascript等等。问题是我的@media查询只能在600px处显示非显示视频的视觉部分，而不是音频 - 但我需要禁用音频低于600px。我已经在堆栈溢出上进行了研究，并且已经有一些可能的解决方案，但是如果可能的话，我需要帮助将代码与我的程序联系起来。

有一个复杂因素，因为我已经在我的视频＆＃39;上运行了javascript。和＆＃34; videoEnd＆＃34;标签工作正常，一旦视频自动播放，视频，填充和文本就会消失。

这是我现有的代码：

<html>
  <video id="video" width="" height="" controls autoplay > 
    <source src="clip.mp4" type="video/mp4"> 
    Your browser does not support the video tag.  
  </video>
  <div id="videoEnd" style="display:block">James Presents</div> 
</html>

<script>

    document.getElementById('video').addEventListener('ended',myHandler,false);
    function myHandler(e) {
        if(!e) { e = window.event; }

        // What you want to do after the event
        document.getElementById('video').style.display="none";
        document.getElementById('videoEnd').style.display="none";
    }
</script>

之前的回答是建议使用此代码在一定宽度上完全禁用视频，但作为新手我不确定代码是jquery还是javascript以及如何将下面的代码与我的id标签联系起来？

$(function() {

  // onload
  if(document.body.clientWidth >= 870) {
    $('video').attr('autoplay', true);
  }

  // If you want to autoplay when the window is resized wider than 780px 
  // after load, you can add this:

  $(window).resize(function() {
    if(document.body.clientWidth >= 870) {
        $('video').attr('autoplay', true);
    }
  });
});

以下更新代码

<script type="text/javascript">
$(function() {
var video = document.getElementById('video');
if (document.body.clientWidth >= 630) {
video.setAttribute('autoplay', true);
video.classList.remove('hide');
}

$(window).resize(function() {
if (document.body.clientWidth >= 630) {
video.classList.remove('hide')
video.play();
video.setAttribute('autoplay', true);
} else {
video.classList.add('hide');
video.removeAttribute('autoplay');
video.pause();
}
});
});
</script>

<video id="video" width="" height="" controls class="hide" >
<source src="clip.mp4" type="video/mp4">
Your browser does not support the video tag. 
</video>

<div id="videoEnd" style="display:block">James Presents</div>

<script>





          document.getElementById('video').addEventListener('ended',myHandler,false);
    function myHandler(e) {
        if(!e) { e = window.event; }

        // What you want to do after the event
        document.getElementById('video').style.display="none";
        document.getElementById('videoEnd').style.display="none";
    }
</script>

//ALL CSS THAT RELATES IS BELOW
.hide {
display: none;
}

#videoEnd
{

margin-top:0;
margin-bottom:0;
text-align:center;
position:fixed;
z-index:9999;
top: 15%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%); 

font-size:325%;
color:white;
font-family: Kroftsmann;
src:url('Kroftsmann.ttf');
}



video {
margin-top:10%;
width:65%;
position: fixed;
top: 40%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%); 
background-color:rgb(15, 15, 15);
padding:2000px;
z-index:9999;



}


@media screen and (max-width:630px){
#videoEnd
{
visibility:hidden;
}
}

@media screen and (max-width:630px){
video
{
display: none;
visibility:hidden;
}    

}

Answer 1

从HTML视频元素中删除autoplay以将其禁用为默认操作，添加类.hide（或用于隐藏元素的任何内容），以便它默认隐藏。然后在加载时，添加autoplay并删除.hide，如果视口宽度＆gt;你的断点。

然后在调整大小时，如果视口是＆lt;你的断点，添加一个隐藏视频的CSS元素（display: none;），删除autoplay属性（如果存在）和pause()视频。如果视口是>你的断点，撤消所有这些。

＆＃13;

$(function() {
  var video = document.getElementById('video');

  if (document.body.clientWidth >= 870) {
    video.setAttribute('autoplay', true);
    video.classList.remove('hide');
  }

  $(window).resize(function() {
    if (document.body.clientWidth >= 870) {
      video.classList.remove('hide')
      video.play();
      video.setAttribute('autoplay', true);
    } else {
      video.classList.add('hide');
      video.removeAttribute('autoplay');
      video.pause();
    }
  });
});

＆＃13;

.hide {
  display: none;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<p>something before the video</p>
<video id="video" controls class="hide">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
<p>something after the video</p>

＆＃13;

Answer 2

代码建议是jQuery和普通javascript的混合。

这是一种方法，使用普通的javascript，在页面加载时，检查宽度是否大于600，如果是，则显示并播放视频。您现有的事件处理程序将在完成后隐藏它。

window.addEventListener('load', function() {
  if (window.innerWidth >= 600) {
    var vid = document.getElementById('video');
    var wrap = document.getElementById('videowrapper');
    wrap.classList.toggle('hide');
    vid.play();
    vid.addEventListener('ended',function(e) {
      wrap.classList.toggle('hide');    
    });
  }
})

.hide {
  display: none;
}

<div id="videowrapper" class="hide">
  <video id="video" controls>
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
  <div>James Presents</div>
</div>

禁用手机以较低宽度自动播放的视频

2 个答案: