Question

我希望能够将视频重新加载到HTML5视频中，而无需在加载时重置currentTime。我目前的做法如下：

<button onclick="getCurTime()" type="button">Get current time position</button>
<button onclick="setCurTime()" type="button">Set time position to 5 seconds</button><br> 
<div style="width:800px; height:445px;">
<video id="myVideo" width="100%" height="100%" controls="controls">
 <source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
<script>
var vid = document.getElementById("myVideo");

function setCurTime() { 
    vid.currentTime=100;
} 
$(document).ready(function () 
{ 
    $('#myVideo').videocontrols( 
    { 
        preview: 
        { 
            sprites: ['big_bunny_108p_preview.jpg'], 
            step: 10, 
            width: 200 
        }, 
        theme: 
        { 
            progressbar: 'blue', 
            range: 'pink', 
            volume: 'pink' 
        } 
    }); 
    vid.play();
}); 
setInterval(function(){ 
    if(vid.currentTime > vid.duration-1)
    {
    myVideo.src = "http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4";
myVideo.load();
myVideo.play();
vid.currentTime = vid.duration-60*5
}
 }, 1);
</script> 
</div>

我该怎么做呢？有没有办法只更新视频播放器中的数据而无需重新加载视频？我希望能够这样做，所以如果有人对视频进行了修改，它只会更新视频播放器中的数据，因此用户无需重新加载整个视频。

Answer 1

上面的评论帖子中的讨论，我仍然不能100％确定你为什么要重新加载相同的视频，所以我可能会错过一些上下文，但以下代码将让你更改视频源但保留当前时间。它假定事件处理程序为jQuery（尽管您可以轻松地在同一事件上使用常规javascript事件处理程序来执行相同的操作）

<video id="v" width="320" height="240" controls="controls" mute>
<source src="Video.mp4" />
</video>
<button onclick="reload()">Reload</button>

<script>
function reload() {
    vid=document.getElementById("v")
    // record the current time for the video that is playing
    curTime = vid.currentTime
    // set the source for the replacement video...
    vid.src = "http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4";
    // ... and load it
    vid.load();
    // add event handler for "canplay" to set the time, and then start the video
    $("#v").on("canplay",function() {
        vid.currentTime = curTime
        vid.play();
        // remove the event to stop it triggering multiple times
        $("#v").off("canplay")
    })
}
</script>

视频加载时防止重置currentTime？

1 个答案: