13

ビデオファイルの読み込みが完了したことを検出する必要があります。progress-> bufferを使うべきだと思っていますが、心の奥底で、これは信頼できないと読んだことを覚えています。より良い方法はありますか、それともこれは安全ですか？

注：各ユーザーが完全にダウンロードしたビデオのlocalStorageキャッシュを保持するので、ビデオがすでにロードされているかどうかを事前に知っており、それが問題になる場合は、progress->bufferをバイパスする可能性があります。

前もって感謝します。

4

3 に答える 3

20

「バッファリングされた」イベントをバインドできますが、（少なくともChromeでは）最後の「バッファリングされた」イベントを呼び出さないことを除いて、これは正常に機能します（つまり、90％... 94％... 98％を検出します。 ..しかし、100％を呼び出すことはありません）。

注：jQueryの最近のバージョンでは、.attr（）ではなく.prop（）を使用する必要があります

これを回避するために、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);
于 2011-03-17T23:33:55.103 に答える
2

私は同じ問題を抱えており、進行状況イベントにアタッチされたタイマーを使用しています。これはハックですが、これを行う他の方法は見たことがありません。（私はこれを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

于 2011-03-16T12:14:54.670 に答える
0

これは、GoogleのMDC-Webのmdc-linear-progressUIコンポーネントを使用した具体的な実装です。

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>

于 2018-04-25T01:21:17.983 に答える