Javascript HTML5视频-在特定时间启动视频并播放x个时间

我正在尝试创建按钮，在某个时间点启动本地视频，并让它在某个时间段内播放。我必须在某一点上比赛，但不确定如何让它只在某一段时间内比赛

这是密码

HTML:

---

为了实现这一点，您需要在播放视频时轮询视频的

currentTime

属性，也许可以使用类似于此常规代码的内容

var button = document.getElementById('play')
var video = document.getElementById('video');
var startTime = 10;
var endTime = 20;

button.addEventListener('click', playVideo, !1);

function playVideo(e) {

    function checkTime() {
        if (video.currentTime >= endTime) {
           video.pause();
        } else {
           /* call checkTime every 1/10th 
              second until endTime */
           setTimeout(checkTime, 100);
        }
    }

    video.currentTime = startTime;
    video.play();
    checkTime();
}

更新

让我们看看你如何为你的应用程序实现这一点

您有两个“跳转”按钮和一个播放按钮。当这些按钮中的任何一个被激活时，您可以调用一个函数，该函数根据单击按钮的HTML

id

设置开始时间和结束时间。这些值可以被传递到类似于我上面所概述的函数中

首先，为每个按钮分配一个事件侦听器

var myvideo = document.getElementById('myvideo');

/* add the same event and 
   handler function to each 
   of the three buttons */
var buttons = ['playme','jump','jump2'];

buttons.forEach(function(bn) {
    document.getElementById(bn).addEventListener(
        'click', buttonEvents, !1
    );
});

在这里，三个HTML按钮中的每一个都将在单击时调用

buttonEvents（）

函数。这个函数可能看起来像这样

function buttonEvents(e) {
    /* get the id of the clicked button */
    var element_id = e.target.id;
    /* E.G. element_id = 'playme', 'jump', or 'jump2' */

    /* declare variables before setting them */
    var timeStart = 0;
    var timeEnd = 0;

    /* set start and end values depending 
       on which button was clicked */
    switch(element_id) {
        case 'playme':
            /* example values... */
            timeStart = 0;
            timeEnd = 100; 
            break;
        case 'jump':
            timeStart = 4;
            timeEnd = 12;
            break;
        case 'jump2':
            timeStart = 12;
            timeEnd = 24;
    }

    /* call 'playVideo()' */
    playVideo(timeStart, timeEnd);
}

将“playbutton”函数与上面概述的常规函数结合起来，我们可以得到这样的结果：一个函数接收开始和结束时间作为参数，并在视频暂停时播放视频，或者在播放时跳转到新的开始时间

function playVideo(startTime, endTime) {

    function checkTime() {
        if (myvideo.currentTime >= endTime) {
           myvideo.pause();
        } else {
           /* call checkTime every 1/10th 
              second until endTime */
           setTimeout(checkTime, 100);
        }
    }

    /* stop if playing (otherwise ignored) */
    myvideo.pause();
    /* set video start time */
    myvideo.currentTime = startTime;
    /* play video */
    myvideo.play();
    /* check the current time and 
       pause IF/WHEN endTime is reached */
    checkTime();
}

---

希望这能有所帮助。

谢谢，但我如何在当前代码中实现这一点？仍在学习javascript，因此需要一些帮助。谢谢你没有提到你正在使用的浏览器，但是如果是Chrome，你可能遇到了一个bug。（这些年来，类似的漏洞已经被归档并关闭了无数次，因为它显然只出现在一些视频中。）

function buttonEvents(e) {
    /* get the id of the clicked button */
    var element_id = e.target.id;
    /* E.G. element_id = 'playme', 'jump', or 'jump2' */

    /* declare variables before setting them */
    var timeStart = 0;
    var timeEnd = 0;

    /* set start and end values depending 
       on which button was clicked */
    switch(element_id) {
        case 'playme':
            /* example values... */
            timeStart = 0;
            timeEnd = 100; 
            break;
        case 'jump':
            timeStart = 4;
            timeEnd = 12;
            break;
        case 'jump2':
            timeStart = 12;
            timeEnd = 24;
    }

    /* call 'playVideo()' */
    playVideo(timeStart, timeEnd);
}

function playVideo(startTime, endTime) {

    function checkTime() {
        if (myvideo.currentTime >= endTime) {
           myvideo.pause();
        } else {
           /* call checkTime every 1/10th 
              second until endTime */
           setTimeout(checkTime, 100);
        }
    }

    /* stop if playing (otherwise ignored) */
    myvideo.pause();
    /* set video start time */
    myvideo.currentTime = startTime;
    /* play video */
    myvideo.play();
    /* check the current time and 
       pause IF/WHEN endTime is reached */
    checkTime();
}