HTML5视频-在特定时间开始播放视频并播放x倍的时间 [英] HTML5 Video - Start video at certain time and play for x amount of time

问题描述

我正在尝试创建一些按钮，这些按钮可以在某个时间点开始播放我的本地视频，并使其播放一定的时间.我已经在特定时间点播放了它，但不确定如何在特定时间段播放它.

I'm trying to create buttons that start my local video at a certain point in time and have it play for a certain duration. I've got it to play at a certain point but not sure how to let it play for only certain duration.

这是代码.

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:

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

推荐答案

为实现此目的，您需要在播放视频时对视频的 currentTime 属性进行轮询，也许使用这种通用代码.

In order to achieve this you need to poll the video's currentTime property as it's playing, perhaps with something like this general code...

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

更新

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

Let's look at how you might implement this for your app.

您有两个跳转"按钮和一个播放按钮.当这些按钮中的任何一个被激活时，您都可以调用一个函数，该函数根据所单击按钮的HTML id 来设置开始时间和结束时间.这些值可以将它们传递到类似我上面已经概述的函数中.

You have two 'jump' buttons and a play button. When any of these buttons are activated you could call a single function which sets the start time and end time according to the HTML id of the clicked button. Those values could them be passed into something like the function I've already outlined above.

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

To begin with, assign an event listener to each button...

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()函数.该功能可能看起来像这样...

Here each of you three HTML buttons will call a buttonEvents() function when clicked. That function might look something like this...

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

将您的播放按钮"功能与上面概述的常规功能结合在一起，我们会得到这样的结果:一个函数接收参数的开始和结束时间，并在暂停的情况下播放视频，或者在暂停时跳转到新的开始时间玩...

Combining your 'playbutton' function with the general function outlined above would give us something like this: a function that receives a start and end time as it's arguments and plays the video if it's paused or jumps to a new start time if it's playing...

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倍的时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！