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

所有可能追踪的事件都列在上述链接中： - 链接： - http://www.w3schools.com/tags/ref_av_dom.asp

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

我希望这会对你有所帮助。

谢谢和问候 Kautuk Sahni

Answer 2

您可以通过以下方式将eventlistener添加到视频播放器：

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 3

使用<progress>元素使用HTML5视频

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

Answer 4

尝试“寻求”事件。如果单击进度条，它将被调用。

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

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

4 个答案: