在HTML5视频中操作currentTime_Html_Video

在HTML5视频中操作currentTime

html video

在HTML5视频中操作currentTime,html,video,Html,Video,我试图找到一个HTML5视频播放器，我不能使用进度条来寻找视频的特定部分，但是视频播放器的水平区域要与视频的长度相对例如，如果我在视频播放器div的中间点击，我就能得到我点击的位置的当前时间。我可以通过mediaevent（）来实现这一点，但前提是我正在单击实际的进度条最后，我希望能够通过单击并水平拖动来选择视频片段的一部分（我相信这与SoundCloud中的做法类似）。我假设我最终可以使用分层div来实现这一点。虽然这不是您想要的完整解决方案，但此示例演示了如何使用单击视频元素来确定相对于

我试图找到一个HTML5视频播放器，我不能使用进度条来寻找视频的特定部分，但是视频播放器的水平区域要与视频的长度相对

例如，如果我在视频播放器div的中间点击，我就能得到我点击的位置的当前时间。我可以通过mediaevent（）来实现这一点，但前提是我正在单击实际的进度条

最后，我希望能够通过单击并水平拖动来选择视频片段的一部分（我相信这与SoundCloud中的做法类似）。我假设我最终可以使用分层div来实现这一点。

虽然这不是您想要的完整解决方案，但此示例演示了如何使用单击

视频

元素来确定相对于持续时间的位置并调整播放头

您可以将其调整为跟踪两次单击，或单击并拖动以设置起点和终点

<body>

<p>Position video playhead in autoplaying video based on relative position of horizontal mouse click</p>

<video width="576" height="324" autoplay buffer="auto" id="video" onClick="getPositions()">
    <source src="big_buck_bunny_720p_surround.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

<script>
    var vid=document.getElementById('video')
    var vidWidth = vid.width;
    var dur = 0;
    vid.addEventListener("durationchange", trackDuration, false);

    function trackDuration() {
        dur = vid.duration
    }

    function getPositions(ev) {
        if (ev == null) { ev = window.event }
        if (dur == 0) {
            // ignore if duration not set
        } else {
            _mouseX = ev.clientX;
            // set currentTime based on position of mouse
            vid.currentTime = dur * _mouseX / vidWidth
        }
    }
</script>

</body>


根据水平鼠标单击的相对位置在自动播放视频中定位视频播放头
您的浏览器不支持视频标记。
var vid=document.getElementById（'视频'）
var vidWidth=vid.width；
var-dur=0；
参见addEventListener（“durationchange”，trackDuration，false）；
函数trackDuration（）{
dur=视频持续时间
}
功能位置（ev）{
如果（ev==null）{ev=window.event}
如果（dur==0）{
//如果未设置持续时间，则忽略
}否则{
_mouseX=ev.clientX；
//根据鼠标位置设置currentTime
vid.currentTime=dur*_鼠标/vidWidth
}
}