Question

我正在为我的视频开发自定义控件。截至目前，我有一个Play/Pause按钮和一个搜索栏（<range>标签）。我无法将搜索栏同步到视频。这是我试过的：

$("#seekbar").val(video.duration);

然而，它不起作用。

的Javascript ：

    $(document).ready(function(){
        $("#play_pause_button").click(function(){
            var video = document.getElementById("video");
            if(video.paused){
                video.play();
                $("#play_pause_button").prop("value", "Pause");
                $("#seekbar").val(video.duration);
            }
            else{
                video.pause();
                $("#play_pause_button").prop("value", "Play");
            }                       
        });
    });

HTML ：

<div id="container">
    <video id="video" src="podcast_teaser.mp4" ></video>
    <br>
    <input type="button" id="play_pause_button" value="Play" />
    <input type="range" id="seekbar" min="0" max="10" />
</div>

我该如何运作？

Answer 1

请尝试使用此功能：

var factor = $("#seekbar").attr('max');
$("#seekbar").val(video.currentTime / video.duration * factor);

这将规范化当前进度（currentTime / duaration）。这将为开头产生0，为结束产生1，对于当前位置为任何分数。

要使其可用，您需要将其放大，以便1代表最大值（您可以将最大值设置为100或更高，以获得更高分辨率的滑块）。

注意：Firefox目前在输入中的小数值存在问题，其中type = range。解决方法是创建一个自定义进度条，单击已启用，并使用鼠标位置来设置时间。

<强>更新

当然，需要使用时间更新事件或循环来频繁调用此代码，例如：

var isPlaying = false;
var factor = $("#seekbar").attr('max');

function updateSeekbar() {
    $("#seekbar").val(video.currentTime / video.duration * factor);
    if (isPlaying) requestAnimationFrame(updateSeekbar);
}

然后在你的播放按钮开始循环：

...
if(video.paused){
    video.play();
    isPlaying = !video.paused;
    updateSeekbar(),
    ...

然后在暂停按钮中重置标志：

    isPlaying = false;

如果您不需要每帧更新（监视器框架），那么您可以使用setTimeout()代替requestAnimationFrame。

希望这有帮助！

如何将<range>与视频同步？</range>

1 个答案: