[英]html5 video - using the progress event with dynamically loaded videos
我在使用“進度”事件檢查視頻是否已 100% 加載時遇到了一些困難。 它似乎只適用於 Chrome/Safari。 Firefox 似乎不想“預加載”視頻,除非我嘗試播放它。
這是我的 html:
<div id="control">
<a data-video="video/transport/1.0.webm">video1</a>
<a data-video="video/transport/2.0.webm">video2</a>
<a data-video="video/transport/3.0.webm">video3</a>
<a data-video="video/transport/4.0.webm">video3</a>
<a data-video="video/transport/5.0.webm">video3</a>
</div>
<video id="video" width="960" height="500" type="video/webm" autobuffer></video>
這是我的 js(從chrome html5 video buffered.end 事件借來的代碼):
$(function(){
var vid = document.getElementById('video');
vid.addEventListener('progress', onProgress, false);
$('#control a').click(function(){
vid.src = $(this).attr('data-video');
vid.load();
});
});
function onProgress(e){
var vid = document.getElementById('video');
var percent = null;
if (vid.buffered.length > 0 && vid.buffered.end && vid.duration) {
percent = vid.buffered.end(0) / vid.duration;
} else if (vid.bytesTotal != undefined && vid.bytesTotal > 0 && vid.bufferedBytes != undefined) {
percent = vid.bufferedBytes / vid.bytesTotal;
}
if (percent !== null) {
percent = 100 * Math.min(1, Math.max(0, percent));
console.log(percent);
}
}
檢查此討論: HTML5 視頻 - 文件加載完成事件?
var videoDuration = $html5Video.attr('duration');
var updateProgressBar = function(){
if ($html5Video.attr('readyState')) {
var buffered = $html5Video.attr("buffered").end(0);
var percent = 100 * buffered / videoDuration;
//Your code here
//If finished buffering buffering quit calling it
if (buffered >= videoDuration) {
clearInterval(this.watchBuffer);
}
}
};
var watchBuffer = setInterval(updateProgressBar, 500);
根據https://www.w3schools.com/jsref/event_onended.asp ,您可以使用 oneded 屬性來檢測視頻的結尾
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.