Question

我的页面中有一个视频，我希望有一个div对视频进行特定控制，而不是常规视频。

我尝试将div设置为绝对，但即使出现按钮，也无法点击。

有没有办法（没有jquery）这样做，div中的按钮位于视频上方并可点击？

视频：

<div id="divVideo" style="text-align:center"> 
<video id="video1" width="720" autoplay loop>
<source src="01_vid.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>

按钮（它们有一个小脚本）：

<button type="button" onclick="playPause(this)" class="btn btn-primary">&#9646;&#9646</button>
<button type="button" onclick="muteUnmute(this)" class="btn btn-primary">Mute</button>
<button type="button" onclick="goHD(this)" class="btn btn-primary">HD</button>

脚本（可能不必要）：

var myVideo = document.getElementById("video1"); 

function playPause(btn) { 
if (myVideo.paused) {
    myVideo.play(); 
    btn.innerHTML = "&#9646;&#9646"
} else {
    myVideo.pause();
    btn.innerHTML = "&#9658"
}
} 

function muteUnmute(etc) { 
if (myVideo.muted) {
    myVideo.muted = false
    etc.innerHTML = "Mute"
}   else {
    myVideo.muted = true; 
    etc.innerHTML = "Unmute"
} 
}

function goHD(el)   {
if (myVideo.width != 1280){
    myVideo.width = 1280
    el.innerHTML = "SD"
    }
else{
    myVideo.width = 720
    el.innerHTML = "HD";
}
}

这是我的CSS：

#botoes {
float: center;
position: absolute;
bottom: 0; z-index: 1; 
width: 100%; 
text-align: center;
margin-bottom: 10px;
}
#divVideo {
position: relative;
width: 720px;
float: left;
height: 405px;
}
#video {
position: relative;
width: 720px;
height: 405px;
background-color: blue;
float: left;
display: block;
}

如何让按钮漂浮在视频上（在div中）？

Answer 1

我无法在这里添加逼真的视频。所以想象一下这个图像是一个视频。

＆＃13;

.video {position: relative; width: 350px;}
.video img {display: block;}
.video .buttons {position: absolute; bottom: 0; z-index: 1; width: 100%; text-align: center;}

＆＃13;

<div class="video">
  <img src="http://placehold.it/350x150" />
  <div class="buttons">
    <button type="button" onclick="playPause(this)" class="btn btn-primary">&#9646;&#9646</button>
    <button type="button" onclick="muteUnmute(this)" class="btn btn-primary">Mute</button>
    <button type="button" onclick="goHD(this)" class="btn btn-primary">HD</button>
  </div>
</div>

＆＃13;

如果你想让它只在你将鼠标悬停在视频上时出现，那么你就去了：

＆＃13;

.video {position: relative; width: 350px;}
.video img {display: block;}
.video .buttons {position: absolute; bottom: 0; z-index: 1; width: 100%; text-align: center; display: none;}
.video:hover .buttons {display: block;}

＆＃13;

<div class="video">
  <img src="http://placehold.it/350x150" />
  <div class="buttons">
    <button type="button" onclick="playPause(this)" class="btn btn-primary">&#9646;&#9646</button>
    <button type="button" onclick="muteUnmute(this)" class="btn btn-primary">Mute</button>
    <button type="button" onclick="goHD(this)" class="btn btn-primary">HD</button>
  </div>
</div>

＆＃13;

Answer 2

video {
  width: 300px;
  height: auto;
}
div {
  background: rgba(255, 255, 255, .85);
  height: 50px;
  width: 500px;
  position: relative;
  top: -50px;
  padding: 5px;
}

<video id="video" controls="" preload="none" mediagroup="myVideoGroup" poster="http://media.w3.org/2010/05/sintel/poster.png">
  <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4" />
  <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm" />
  <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg" />
  <p>Your user agent does not support the HTML5 Video element.</p>
</video>
<div>
  <button>Start</button>
  <button>End</button>
</div>

在视频上有按钮的div

2 个答案: