HTML5 视频播放器暂停时如何显示 div？ [关闭]答案

【问题标题】：How to make a div show when HTML5 video player is paused? [closed]HTML5 视频播放器暂停时如何显示 div？ [关闭]
【发布时间】：2014-08-13 15:22:23
【问题描述】：

我正在尝试让一个 div 显示 HTML5 视频播放器何时暂停。

【问题讨论】：

如果你自己解决了这个问题，你可以在这篇文章中添加你自己的答案......在这里阅读 cmets 中的代码非常困难......

标签： jquery html video html5-video

【解决方案1】：

您需要检测视频元素触发的pause 事件。

这样的东西应该适合你：

var vid = document.getElementById( 'your_video_element_id' );
vid.addEventListener( 'pause', on_pause ); 
function on_pause( e ){
  // handle pause event - ie. show your div element
}

【讨论】：

你知道我如何在这个“视频暂停时显示 div”上设置延迟吗？

【解决方案2】：

我找到了办法，

function playPause(){
if(vid.paused){
    vid.play();
    playbtn.style.background = "url(pause.png)";
    pausebox.style.display = "none";
} else {
    vid.pause();
    playbtn.style.background = "url(play.png)";
    pausebox.style.display = "block";
}

}

【讨论】：

【解决方案3】：

不幸的是，视频元素没有任何相关属性，但我会考虑使用 onclick 属性。你可以这样做：

<video onclick="showDiv()">
  ...
</video>


<script>
  function showDiv(){
    //Use jQuery or basic javascript to hide/show the div element
  }
</script>

【讨论】：

如何区分“点击播放”和“点击暂停”？
在 jQuery 中选择视频并使用 .paused var video = $('selector').children('video'); var videoElement = video.get(0); if (videoElement.paused) {...}
好的...那么为什么您的答案中没有这些信息？这是最重要的部分……不是吗？ :)