Question

我尝试创建按钮，在某个时间点启动我的本地视频并让它播放一段时间。我已经让它在某个时刻发挥但不确定如何让它在一定时间内发挥。

这是代码。

HTML：

<video id="myvideo" width="1000">
        <source src="video.mp4" type="video/mp4">
        Your browser does not support HTML5 video.
</video>
    <div>
        <p>
            <button id="playme">Play/Pause Video</button>
        </p>
        <p>
            <button id="jump">Jump to 4 seconds</button>
        </p>
        <p>
            <button id="jump2">Jump to 11 seconds</button>
        </p>
    </div>

使用Javascript：

var myvideo = document.getElementById('myvideo'),
playbutton = document.getElementById('playme'),
jumplink = document.getElementById('jump'),
jumplink2 = document.getElementById('jump2');

jumplink.addEventListener("click", function (event) {
    event.preventDefault();
    myvideo.play();
    myvideo.pause();
    myvideo.currentTime = 4;
    myvideo.play();
}, false);

jumplink2.addEventListener("click", function (event) {
    event.preventDefault();
    myvideo.play();
    myvideo.pause();
    myvideo.currentTime = 11;
    myvideo.play();
}, false);

playbutton.addEventListener("click", function () {
    if (myvideo.paused) {
        myvideo.play();
    } else {
        myvideo.pause();
    }
}, false);

Answer 1

为了实现这一目标，您需要在播放视频的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();
}

<强>更新

让我们看看如何为您的应用实现此功能。

你有两个跳跃＆＃39;按钮和播放按钮。当激活任何这些按钮时，您可以调用单个函数，该函数根据单击按钮的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);
}

结合您的播放按钮＆＃39;具有上述一般功能的函数会给我们这样的东西：一个函数，它接收一个开始和结束时间作为它的参数，并播放视频如果它被暂停或跳转到一个新的开始时间，如果它＆＆＃39;正在玩......

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();
}

希望有所帮助。

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

1 个答案: