Question

我想知道如何控制/编辑html5视频控制器的状态栏（我认为这就是所谓的..它是你视频中当前位置的标尺）？

我要做的是创建一个程序，让用户可以选择部分视频并一遍又一遍地循环播放。

一旦用户点击按钮，进度条下方将有2个滑块按钮（一个用于开始和结束），用户可以通过滑动滑块选择开始和结束时间，并让程序突出显示它们的部分地选择。

我感到困惑的是java脚本如何影响视频元素（进度条），以及如何制作栏的选择部分。（突出显示的部分）

任何帮助都会很棒。

这里是我想要解释的图片

http://imgur.com/a/XX1e3#0

谢谢大家

Answer 1

<video>元素的进度条实际上并没有被JS“影响”本身...... 进度条只是<div>，内部带有彩色<div>（显示进度）。

视频对象（JS对象）具有控制播放/位置的属性和方法，以及触发更新事件以允许您做出反应。

<video id="my-video" src="/media/my-video.mp4"></video>

然后该对象的JS属性非常简单：

var video = document.querySelector("#my-video");
video.play();      // plays
video.pause();     // pauses
video.currentTime; // gets or sets the current playback time
video.duration;    // gets the length of the media file

// stop doesn't exist, but it's easy enough to make
video.stop = function () { video.pause(); video.currentTime = 0; };

video.addEventListener("timeupdate", function () {
    /* more of the video has played */
});

你真正需要做的就是花一些时间思考酒吧本身的运作方式如果条形图的100％等于视频持续时间的100％，那么当用户点击其他div来移动它们时，您可以找出这些光标在时间条上的位置......

例如：你的酒吧是500px，你的视频是300秒用户将一个光标从条形图的左侧设置为100px（100px / 500px == 0.2 * 300s == 60s）。

所以现在你知道，当你回过头来时，你将设置video.currentTime = 60; 你怎么知道什么时候这样做？

video.addEventListener("timeupdate", function () {
    var end_percent = end_cursor_pos_px / bar_width_px,
        start_percent = start_cursor_pos_px / bar_width_px,
        end_time = video.duration * end_percent;

    if (video.currentTime > end_time) {
        /* set video.currentTime to the "start_time" */
        video.currentTime = video.duration * start_percent;
    }
});

作为性能考虑因素，您应该在用户移动光标时更新start-percent / end-percent 然后，当视频告诉你它播放得更多时，你应该计算持续时间的百分比。

请注意，在视频播放了一段时间之前，您可能没有完整的持续时间（或者直到它完全播放，甚至）。你可以听到一个“装载的元数据”事件，它会告诉你什么时候你已经完成了但是，如果仅加载30秒，30秒的50％仍然是50％如果您希望它不是它的工作方式，那么您需要解决它，或者通过等待该事件（即使视频必须100％完成），或者通过在JSON请求中发送它，或者阅读它来自AJAX“HEAD”请求中的标题。

光标和条形位置的数学计算也很简单。只要你保证游标保持在栏的范围内，（并且用户没有将窗口滚动到栏的一部分离屏，左或右），它就是：

var start_cursor = startEl.getBoundingClientRect(),
    end_cursor   = endEl.getBoundingClientRect(),
    scrub_bar    = scrubEl.getBoundingClientRect();

var start_percent = (start_cursor.left - scrub_bar.left) / scrub_bar.width,
    end_percent   = (end_cursor.left - scrub_bar.left)   / scrub_bar.width;

如果他们向左/向右滚动，那么您只想将window.pageXOffset添加到这些值。

没有更多的东西只要确保在光标移动时更新开始/结束百分比，并根据最终百分比检查播放百分比，并在任何时间过去时更新currentTime（回调每秒发生几次）。

希望有所帮助。

使用javascript控制HTML 5视频控制器？

1 个答案: