| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script> | |
| var source; | |
| var request; | |
| function playVideo() | |
| { | |
| document.getElementById('test-video').play(); | |
| request = new XMLHttpRequest(); | |
| request.responseType = 'arraybuffer'; | |
| request.open('GET', 'test-mse.mp4', true); | |
| request.addEventListener('load', load); | |
| request.send(); | |
| } | |
| function load(event) | |
| { | |
| source = new MediaSource(); | |
| source.addEventListener('sourceopen', sourceopen); | |
| var video = document.getElementById('test-video'); | |
| video.src = URL.createObjectURL(source); | |
| } | |
| function sourceopen(event) | |
| { | |
| var sourceBuffer = source.addSourceBuffer('video/mp4;codecs="avc1.4D4001,mp4a.40.2"'); | |
| sourceBuffer.appendBuffer(request.response); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <p> | |
| <video id="test-video" controls></video> | |
| </p> | |
| <p> | |
| <button onclick="playVideo()">Play video</button> | |
| </p> | |
| </body> | |
| </html> |