43

Javascript Blob/FileオブジェクトのビデオをHTML5ビデオタグで表示したいと思います。

このコードは小さなビデオでのみ機能します：

var reader = new FileReader();
reader.onload = function(e) {
    document.getElementById("video").src=reader.result;
 }
reader.readAsDataURL(vid);

これを大きなビデオ（> 10MB）には使用できません。HTML 5でblobオブジェクトから大きなビデオを表示するための解決策はありますか？

4

2 に答える 2

54

見つけました。とてもシンプルだったので、私もそれを見ませんでした...


/**
 * @param {Blob} videoFile
 * @param {HTMLVideoElement} videoEl 
 * @returns {void}
 */
function display( videoFile, videoEl ) {

    // Preconditions:
    if( !( videoFile instanceof Blob ) ) throw new Error( '`videoFile` must be a Blob or File object.' ); // The `File` prototype extends the `Blob` prototype, so `instanceof Blob` works for both.
    if( !( videoEl instanceof HTMLVideoElement ) ) throw new Error( '`videoEl` must be a <video> element.' );
    
    // 

    const newObjectUrl = URL.createObjectURL( videoFile );
        
    // URLs created by `URL.createObjectURL` always use the `blob:` URI scheme: https://w3c.github.io/FileAPI/#dfn-createObjectURL
    const oldObjectUrl = videoEl.currentSrc;
    if( oldObjectUrl && oldObjectUrl.startsWith('blob:') ) {
        // It is very important to revoke the previous ObjectURL to prevent memory leaks. Un-set the `src` first.
        // See https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

        videoEl.src = ''; // <-- Un-set the src property *before* revoking the object URL.
        URL.revokeObjectURL( oldObjectUrl );
    }

    // Then set the new URL:
    videoEl.src = newObjectUrl;

    // And load it:
    videoEl.load(); // https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/load
    
}
于 2013-01-16T14:40:14.973 に答える
1

場合によっては、blobObject.dataをcreateObjectURL（）メソッドで提供する必要があります。この簡単なトリックを参照してください。

function playVideo(videoStream){ // as blob 

 var video = document.querySelector('video');

 var videoUrl=window.URL.createObjectURL(videoStream.data);// blob.data gives actual data

 video.src = videoUrl;
}
于 2018-06-29T06:19:01.810 に答える