我在div中有一个HTML 5视频.然后我有一个自定义播放按钮 - 工作正常.
并且我将视频的可见性设置为在加载时隐藏,并且在单击播放按钮时可见,当再次单击播放按钮时,如何将其返回到隐藏状态?
function showVid() {
document.getElementById('video-over').style.visibility = 'visible';
}
Run Code Online (Sandbox Code Playgroud)
#video-over {
visibility: hidden;
background-color: rgba(0, 0, 0, .7)
}
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)
我基本上只是试图在可见和隐藏的两种状态之间切换它,除非我不能使用切换,因为该显示并隐藏了div.我需要它,只是隐藏,所以它保持正确的高度.
我有一个html5视频,它是隐藏的,然后显示并使用自定义播放按钮播放.但是,在iphone上,当用户从视频查看屏幕点击"完成"时,视频仍然可见.我很确定"完成"按钮是暂停功能.假设是这种情况,有没有办法可以在移动设备上暂停视频暂停?