web 播放fmp4 demo
websocket+fmp4
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>HTML5视频直播测试</title> </head> <body> <button onclick="disableMute()" type="button">打开声音</button> <button onclick="enableMute()" type="button">关闭声音</button> <video id="mse" muted width="1280" height="720"></video> <script> var video = document.querySelector('video'); var assetURL = 'frag_bunny.mp4'; // Need to be specific for Blink regarding codecs // ./mp4info frag_bunny.mp4 | grep Codec var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'; if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) { var mediaSource = new MediaSource(); //console.log(mediaSource.readyState); // closed video.src = URL.createObjectURL(mediaSource); mediaSource.addEventListener('sourceopen', sourceOpen); } else { console.error('Unsupported MIME type or codec: ', mimeCodec); } function sourceOpen(_) { //console.log(this.readyState); // open var mediaSource = this; var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec); fetchAB(assetURL, function (buf) { sourceBuffer.addEventListener('updateend', function (_) { mediaSource.endOfStream(); video.play(); //console.log(mediaSource.readyState); // ended }); sourceBuffer.appendBuffer(buf); }); }; function fetchAB(url, cb) { console.log(url); var xhr = new XMLHttpRequest; xhr.open('get', url); xhr.responseType = 'arraybuffer'; xhr.onload = function () { cb(xhr.response); }; xhr.send(); }; function enableMute() { video.muted=true; } function disableMute() { video.muted=false; } </script> </body> </html>
