播放几秒钟的视频 onclick

Posted 2023-05-07

【中文标题】播放几秒钟的视频 onclick

【英文标题】：Play few seconds of video onclick

【发布时间】：2014-03-31 20:16:45

【问题描述】：

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

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

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

谢谢

【参考方案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) 
    );
);