我的 div 中有一个 HTML 5 视频。然后我有一个自定义播放按钮 - 效果很好。
我将视频的可见性设置为加载时隐藏，单击播放按钮时可见，再次单击播放按钮时如何将其恢复为隐藏？
function showVid() {
document.getElementById('video-over').style.visibility = 'visible';
}
#video-over {
visibility: hidden;
background-color: rgba(0, 0, 0, .7)
}
<div id="video-over">
<video class="home-banner" id="video" controls="">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
</video>
</div>
<button type="button" id="play-pause" onclick="showVid();">
<img class="img-home-apply" src="/wp-content/images/apply-pic.png" alt="Apply Now">
</button>
我基本上只是想在可见和隐藏两种状态之间切换它，但我不能使用切换，因为该显示并隐藏 div。我需要它在那里，只是隐藏起来，这样它就能保持正确的高度。
使用 jQuery：
$('#play-pause').click(function(){
if ( $('#video-over').css('visibility') == 'hidden' )
$('#video-over').css('visibility','visible');
else
$('#video-over').css('visibility','hidden');
});
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
