Предотвращение сброса текущего времени при загрузке видео?

Question

Я хочу, чтобы иметь возможность перезагрузить видео в видео HTML5 без необходимости сброса текущего времени при его загрузке. Способ, которым я в настоящее время это делаю, заключается в следующем:

<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 для обработчика событий (хотя вы можете легко использовать обычный яваскрипт обработчик события на то же событие, чтобы сделать то же самое)

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