[英]HTML5 Video - File Loading Complete Event?
我需要檢測視頻文件何時完成加載。 我想我應該使用progress-> buffer，但在我的腦海中，我記得讀到這是不可靠的。 有更好的方法，還是這樣安全？
請注意，我將保留每個用戶已完全下載的視頻的localStorage緩存，因此我事先知道視頻是否已加載，如果這是一個棘手的問題，可能會繞過進度 - >緩沖區。
提前致謝。
您可以綁定“緩沖”事件，但（至少在Chrome中）此工作正常，但它不會調用最后一個“緩沖”事件（即它將檢測90％... 94％... 98％。 ..但不會撥打100％）。
注意：最新版本的jQuery應該使用.prop（）而不是.attr（）
為了解決這個問題，我使用setInterval（）每隔500毫秒檢查緩沖區（其中$ html5Video是你的<video>元素：
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);
我遇到了同樣的問題，並使用附加到progress事件的計時器。 這是一個黑客，但我沒有看到任何其他方式這樣做。 （我在Chome 10上測試了這個 - Windows）。
var video = document.getElementById('#example-video-element');
var timer = 0;
video.addEventListener('progress', function (e) {
if (this.buffered.length > 0) {
if (timer != 0) {
clearTimeout(timer);
}
timer = setTimeout(function () {
if(parseInt(video.buffered.end() / video.duration * 100) == 100) {
// video has loaded....
};
}, 1500);
}
}, false);
這看起來像你想要采用的方法類型，但我想我會為那些可能正在尋找快速代碼示例的匿名用戶發布一個示例= p
GJ
這是使用Google的MDC-Web的mdc-linear-progress UI組件實現的豐富實現。
var doc = document; var bufferLengthDetector; var linearProgress; var mdc = window.mdc; mdc.autoInit(); var video = doc.querySelector('video'); if(doc.getElementById("footer-progress")){ linearProgress = mdc.linearProgress.MDCLinearProgress.attachTo(doc.getElementById("footer-progress")); } if(video){ video.addEventListener('timeupdate', function() { var percent = Math.floor((100 / video.duration) * video.currentTime); linearProgress.progress = percent/100; }, false); video.addEventListener('progress', function() { var duration = video.duration; if (duration > 0) { bufferLengthDetector = setInterval(readBuffer, 500); } }); } function readBuffer(){ var percent = video.buffered.end(video.buffered.length - 1) / video.duration; if (percent >= .9) { linearProgress.buffer = 1; clearInterval(bufferLengthDetector); } else { linearProgress.buffer = percent; } }
html { height:100%; } body{ margin: 0; } #footer-progress{ position: fixed; bottom: 0; width: 100%; visibility: visible; opacity: 1; } video { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; transform: translateX(-50%) translateY(-50%); background: #212121; background-size: cover; transition: visibility 1s, opacity 1s linear; visibility: visible; opacity: 1; }
<head> <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css"> <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script> </head> <body> <video class="bg-video" playsinline autoplay> <source src="//rack.pub/media/do-not.webm" type="video/webm"> <source src="//rack.pub/media/do-not.mp4" type="video/mp4"> I'm sorry your browser doesn't support HTML5 video in WebM with VP8/VP9 or MP4 with H.264. </video> <div role="progressbar" class="mdc-linear-progress" data-buffer="true" id="footer-progress"> <div class="mdc-linear-progress__buffering-dots"></div> <div class="mdc-linear-progress__buffer"></div> <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar"> <span class="mdc-linear-progress__bar-inner"></span> </div> <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar"> <span class="mdc-linear-progress__bar-inner"></span> </div> </div> </body>
通過綁定到 div 的 onclick 事件在 iPad 上加載 HTML5 視頻
[英]Loading HTML5 video on iPad via onclick event tied to a div
如果視頻正在加載（緩沖），則顯示帶有加載 GIF 圖像的 HTML5 視頻
[英]Showing HTML5 Video with a loading GIF image if the video is loading (buffering)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.