html5视频播放进度条点击功能答案

【问题标题】：html5 video player progress bar click funcionhtml5视频播放进度条点击功能
【发布时间】：2016-06-28 06:51:59
【问题描述】：

是否可以使用具有特定视频标签 ID 的 j 查询来收听 html 5 视频播放器默认进度条点击？视频标签就像

<video width="250" height="150" id="videoplayer" controls="" autoplay="" src="blob:https%3A//fiddle.jshell.net/91a12a0d-f082-4fbd-a70c-7fa94563690c"></video>

我可以在进度条上获得 id="videoplayer" 的点击事件

【问题讨论】：

标签： jquery html html5-video

【解决方案1】：

所有可能跟踪的事件集都列在提到的链接中：- 链接：-http://www.w3schools.com/tags/ref_av_dom.asp

示例：- https://www.w3.org/2010/05/video/mediaevents.html

希望对你有帮助。

感谢和问候考图克萨尼

【讨论】：

【解决方案2】：

您可以通过这种方式将事件监听器添加到视频播放器：

document.getElementById('videoplayer').addEventListener("click", function(){
    //the code you want to do in click event
});

另一方面，您可以像这样使用自定义视频播放器来处理它：

<div id="video-controls" class="controls" data-state="hidden">
   <button id="playpause" type="button" data-state="play">Play/Pause</button>
   <button id="stop" type="button" data-state="stop">Stop</button>
   <div class="progress">
      <progress id="progress" value="0" min="0">
         <span id="progress-bar"></span>
      </progress>
   </div>
   <button id="mute" type="button" data-state="mute">Mute/Unmute</button>
   <button id="volinc" type="button" data-state="volup">Vol+</button>
   <button id="voldec" type="button" data-state="voldown">Vol-</button>
   <button id="fs" type="button" data-state="go-fullscreen">Fullscreen</button>
</div>

然后，您可以使用它的 id 值来收听进度条。

【讨论】：

【解决方案3】：

使用<progress> 元素与 HTML5 视频

<progress id='p'></progress>

【讨论】：

【解决方案4】：

尝试“寻找”事件。点击进度条会调用。

let videoPlayer = document.getElementById('videoPlayer');
videoPlayer.addEventListener("seeking", function(){
  console.log('seeking', videoPlayer.currentTime)
});

【讨论】：