context_menu_blob_buffered.html (1401B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" content="width=device-width, height=device-height" /> 5 <title>Context Menu Test Blob Buffered</title> 6 </head> 7 <body> 8 <video id="video" controls preload></video> 9 </body> 10 <script> 11 window.addEventListener("DOMContentLoaded", function () { 12 const video = document.getElementById("video"); 13 const mediaSource = new MediaSource(); 14 video.src = URL.createObjectURL(mediaSource); 15 mediaSource.addEventListener("sourceopen", createBuffer); 16 17 function createBuffer(event) { 18 const mediaSource = event.target; 19 const assetURL = "/assets/www/videos/gizmo.webm"; 20 const codec = 'video/webm; codecs="opus"'; 21 const sourceBuffer = mediaSource.addSourceBuffer(codec); 22 23 function addBuffer(response) { 24 sourceBuffer.addEventListener("updateend", function () { 25 mediaSource.endOfStream(); 26 }); 27 sourceBuffer.appendBuffer(response); 28 } 29 30 fetchVideoData(assetURL, addBuffer); 31 } 32 33 function fetchVideoData(assetURL, videoArrayBuffer) { 34 const request = new XMLHttpRequest(); 35 request.open("get", assetURL); 36 request.responseType = "arraybuffer"; 37 request.onload = function () { 38 videoArrayBuffer(request.response); 39 }; 40 request.send(); 41 } 42 }); 43 </script> 44 </html>