播放几秒钟的视频 onclick答案

【问题标题】：Play few seconds of video onclick播放几秒钟的视频 onclick
【发布时间】：2014-03-31 20:16:45
【问题描述】：

有没有办法只播放几秒钟的html视频？

目前，当用户点击表格行时，视频会搜索到预定义的时间（在下方突出显示）。因此，在下面的示例中，视频将寻求 7 秒。

有没有办法从几秒钟开始播放视频仅 10 秒钟？即寻找到 00:07 并播放到 00:17 并停止？

谢谢

【问题讨论】：

标签： javascript jquery html video

【解决方案1】：

您可以将 timeupdate 事件与 currentTime 属性一起使用

function playVideo() {
    var starttime = 7;  // start at 7 seconds
    var endtime = 17;    // stop at 17 seconds

    var video = document.getElementById('yourVideoId');

    video.addEventListener("timeupdate", function() {
       if (this.currentTime >= endtime) {
            this.pause();
        }
    }, false);

    //suppose that video src has been already set properly
    video.load();
    video.play();    //must call this otherwise can't seek on some browsers, e.g. Firefox 4
    try {
        video.currentTime = starttime;
    } catch (ex) {
        //handle exceptions here
    }
}

【讨论】：

【解决方案2】：

您可以创建一个计时器，以便在您“搜索”视频后，它会在 10 秒内停止视频。所以在你里面寻找你要放置的功能。

var Video = $('Video Element')[0];
// After getting the video element play it.
Video.play(); 
// Now create a timer so in 10 second (1s = 1000 so 10s = 10000 ms) it will pause the video.
setTimeout(function(){
    Video.pause(); 
},10000);

【讨论】：

如果函数在 10 秒内没有被调用，这可以正常工作。但是当它是时间不会重置回10。“/

【解决方案3】：

我制作了一个小脚本，可能会对此有所帮助。 https://github.com/demux/jquery-video-cuepoints

用法：

$(document).ready(function() {
    var $v = $('#video');
    $v.cuepoints({
        17: function() {
            $v[0].stop();
        }
    });

    $('button').click(function(){
        $v[0].play();
        try {$v[0].currentTime = 7;} catch(e) {}
    });
});

【讨论】：