使用javascript控制HTML 5视频控制器？-Java 学习之路

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

我要做的是创建一个程序，使用户能够选择部分视频并一遍又一遍地循环 .

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

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

任何帮助都是极好的 .

这是我想要解释的图片

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

多谢你们

1 回答

2
JS的一个 <video> 元素的进度条本身并不是"affected"本身......进度条只是一个 <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（回调每秒发生几次） .

希望有所帮助 .
回复于 2024-05-17T14:36:47+08:00

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

1 回答

相关问题