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

Question

是否可以使用具有特定视频标签 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"的点击事件吗

Answer 1

您可以通过以下方式为视频播放器添加事件监听器：

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 值来收听您的进度条。

Answer 2

使用 <progress> 元素与 HTML5 视频

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

Answer 3

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

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

希望对您有所帮助。

感谢和问候考图克萨尼

Answer 4

尝试 "seeking" 活动。点击进度条就会调用

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

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

html5 video player progress bar click funcion

html

jquery

html5-video