我希望我的 HTML5 视频在 600px 时消失，因为手机不会自动播放并且似乎不能很好地运行 javascript 等。问题是我的@media 查询在 600px 时不显示任何内容，只不显示视频的视觉部分，而不是音频 - 但我需要在 600 像素以下禁用音频。我已经在研究堆栈溢出问题，并且已经有一些可能的解决方案，但如果可能的话，我需要帮助将代码与我的程序相关联。
有一个复杂的问题，因为我已经在我的“video”和“videoEnd”标签上运行了 javascript，它工作正常并且在自动播放视频后使视频、填充和文本消失。
这是我现有的代码:
<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;
}
}
最佳答案
从您的 HTML 视频元素中删除 autoplay 以将其禁用为默认操作，添加类 .hide (或您用来隐藏该元素的任何内容)以便它默认隐藏。然后在加载时，添加 autoplay 并删除 .hide 如果视口(viewport)宽度 > 您的断点。
然后在调整大小时，如果视口(viewport)是 < 您的断点，添加一个将隐藏视频的 CSS 元素 (display: none;)，如果是，则移除 autoplay 属性它存在，pause() 视频。如果视口(viewport) > 你的断点，撤消所有这些。
$(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();
}
});
});.hide {
display: none;
}<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>关于javascript - 禁用在手机上以较低宽度自动播放的视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42888931/