所以我有一个按钮,它可以切换并显示视频。如果再次点击它将隐藏它,然后打开。它工作正常唯一的问题是,当你第一次点击它时,你必须点击它两次因为某种原因我似乎无法弄明白。
function togglevid() {
var e = document.getElementById("movie");
if (e.style.display == 'none') e.style.display = 'block';
else e.style.display = 'none';
if (e.pause == false) e.pause()
else e.pause()
}
#movie {
position:absolute;
top:158px;
left:470px;
display:none;
z-index:10
}
<video controls="" height="400" id="movie" oncontextmenu="return false;"
width="960">
<source src="" type="video/mp4">
Your browser does not support HTML5 video.</video>
<input id="mcodebtn" onclick="togglevid()" type="button" value=
"">
我相信这个错误的原因是我有视频设置显示的事实:无;默认情况下。
答案 0 :(得分:0)
尝试用window.getComputedStyle()
代替e.style.display
function togglevid() {
var e = document.getElementById("movie");
e.style.display = window.getComputedStyle(e, null)
.getPropertyValue("display") === "none"
? "block" : "none";
}
&#13;
#movie {
position: absolute;
top: 158px;
left: 470px;
display: none;
z-index: 10
}
&#13;
<video controls="" height="400" id="movie" oncontextmenu="return false;" width="960">
<source src="" type="video/mp4">
Your browser does not support HTML5 video.</video>
<input id="mcodebtn" onclick="togglevid()" type="button" value="toggle">
&#13;