Question

我正在尝试找到一个HTML5视频播放器，我可以“不”使用进度条来搜索视频的特定部分，但让视频播放器的水平区域相对于视频的长度。

例如，如果我点击视频播放器div的中间，我将能够获得我点击的位置的当前时间。我可以通过媒体事件（http://www.w3.org/2010/05/video/mediaevents.html）得到这个，但这假设我点击了实际的进度条。

最后，我希望能够通过单击并水平拖动来选择视频剪辑的一部分（有点像我在SoundCloud中所做的那样）。我假设我最终可以用分层div做到这一点。

Answer 1

虽然它不是您正在寻找的完整解决方案，但此示例演示了如何使用video元素上的点击来确定相对于持续时间的位置并调整播放头。

您可以对此进行调整以跟踪两次点击，或者单击并拖动以设置起点和终点

<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>

在HTML5视频中操纵currentTime

1 个答案: