Không thể phát trực tuyến video qua websocket tới Firefox

Tôi đã viết một số video luồng mã qua websocket để sourcebuffer hoạt động trong Chrome và Edge.Không thể phát trực tuyến video qua websocket tới Firefox

Tuy nhiên, khi tôi chạy ứng dụng này trong Firefox, video không bao giờ phát lại, chỉ hiển thị hình động bánh xe quay. Khi tôi kiểm tra số liệu thống kê <video>, nó đọc HAVE_METADATA làm trạng thái sẵn sàng và NETWORK_LOADING làm trạng thái mạng.

Mã này trông sau:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"/> 
    </head> 
    <body> 
    <video controls></video> 
    <script> 
     var mime = 'video/mp4; codecs="avc1.4D401E,mp4a.40.2"'; 
     var address = 'ws://localhost:54132' 

     /* Media Source */ 

     var source = new MediaSource(); 
     var video = document.querySelector('video'); 
     video.src = URL.createObjectURL(source); 
     source.addEventListener('sourceopen', sourceOpen); 

     /* Buffer */ 

     var buffer; 
     var socket; 
     var queue = []; 
     var offset = -1; 
     var timescale; 

     // When the media source opens: 
     function sourceOpen() { 
     buffer = source.addSourceBuffer(mime); 
     buffer.addEventListener('updateend', processQueue); 

     socket = new WebSocket(address); 
     socket.binaryType = 'arraybuffer'; 
     socket.onmessage = onMessage; 
     } 

     // When more data is received. 
     function onMessage(event) { 
     queue.push(event.data); 
     processQueue(); 
     } 

     // Process queue if possible. 
     function processQueue() { 
     if ((queue.length == 0) || (buffer.updating)) { 
      return; 
     } 

     var data = queue.shift(); 
     if (offset === -1) { 
      var parsed = parseMP4(data); 
      if (parsed.hasOwnProperty('moov')) { 
      timescale = parsed.moov.mvhd.timescale; 
      } else if (parsed.hasOwnProperty('moof')) { 
      offset = 0 - (parsed.moof.traf[0].tfdt.baseMediaDecodeTime/this.timescale - 0.4); 
      buffer.timestampOffset = offset; 
      } 
     } 

     // console.log('appending ' + data.byteLength + ' bytes'); 
     buffer.appendBuffer(data); 
     } 

     // Parse out the offset. 
     function parseMP4(data) { 
     // SNIP for brevity 
     } 
    </script> 
    </body> 
</html>

Nguồn

2016-06-28 Hans

làm bạn nhận được sự kiện lỗi trên yếu tố video hoặc đệm nguồn? điều gì sẽ xảy ra khi bạn trực tiếp sử dụng URL video dưới dạng "src" (không có nguồn phương tiện truyền thông) – sbr

Không có sự kiện lỗi. Các dữ liệu được tạo ra trên bay bởi máy chủ (từ một dòng IP ví dụ), do đó, không có URL tôi có thể điểm yếu tố video. – Hans

Bạn có thể tạo một plnkr http://plnkr.co để minh họa không? – guest271314

thể không tái sản xuất <video> yếu tố không chơi ở firefox 47.

cách tiếp cận hợp nhất tại Mocking Websocket Message Events để tạo ra mô hình WebSocket sự kiện; bufferAll.html demo tại Let's Make a Netflix An Intro to Streaming Media on the Web cho MediaSource mẫu sử dụng.

Bao gồm <progress> và progress sự kiện để thông báo cho người dùng trạng thái tải phương tiện.

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"/> 
 
    </head> 
 
    <body> 
 
    <progress min="0" value="0"></progress><br><label></label><br> 
 
    <video controls></video> 
 
    <script> 
 
     // http://nickdesaulniers.github.io/netfix/demo/bufferAll.html 
 
     // http://jsfiddle.net/adamboduch/JVfkt/ 
 
     // The global web socket.  
 
     var sock, sourceBuffer; 
 
     sock = new WebSocket("ws://mock"); 
 
     sock.onerror = function(e) { 
 
      console.log("sock error", e) 
 
     } 
 
     // This is unchanging production code that doesn"t know 
 
     // we"re mocking the web socket. 
 
     sock.onmessage = function(e) { 
 
      console.log("socket message", e.data); 
 
      sourceBuffer.appendBuffer(e.data); 
 
     }; 
 
     var video = document.querySelector("video"); 
 
     var progress = document.querySelector("progress"); 
 
     var label = document.querySelector("label"); 
 
     var assetURL = "http://nickdesaulniers.github.io/netfix/" 
 
        + "demo/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); 
 
     } 
 
     video.addEventListener("canplay", function() { 
 
     alert("video canplay") 
 
     }) 
 
     function sourceOpen (_) { 
 
     //console.log(this.readyState); // open 
 
     var mediaSource = this; 
 
     sourceBuffer = mediaSource.addSourceBuffer(mimeCodec); 
 
     fetchAB(assetURL, function (buf) { 
 
      sourceBuffer.addEventListener("updateend", function (event) { 
 
      console.log("sourceBuffer updateend event;" 
 
         + "mediaSource.readyState:" 
 
        , mediaSource.readyState); 
 
      // mediaSource.endOfStream(); 
 
      // video.play(); 
 
      // console.log(mediaSource.readyState); // ended 
 
      }); 
 
      
 
     }); 
 
     }; 
 
     // mock `WebSocket` message 
 
     function fetchAB (url, cb) { 
 
     var xhr = new XMLHttpRequest; 
 
     xhr.open("get", url); 
 
     var file = url.split("/").pop(); 
 
     xhr.responseType = "arraybuffer"; 
 
     xhr.onload = function() { 
 
      // mock `WebSocket` message 
 
      sock.dispatchEvent(new MessageEvent("message", { 
 
      data: xhr.response 
 
     })); 
 
     console.log("video sent to sock", sock); 
 
     cb(); 
 
     }; 
 
     xhr.onprogress = function(e) { 
 
      progress.max = e.total; 
 
      progress.value = e.loaded; 
 
      label.innerHTML = "loading " + file + " ...<br>" 
 
          + e.loaded + " of " 
 
          + e.total + " bytes loaded"; 
 
     } 
 
     xhr.send(); 
 
     }; 
 
    </script> 
 
    </body> 
 
    </html>

plnkr http://plnkr.co/edit/RCIqDXTB2BL3lec9bhfz

Nguồn

2016-07-02 18:11:14 guest271314

Sau một phút trên Firefox 47, tôi nhận được một vòng tròn quay và không có gì xảy ra sau đó. – ManoDestra

Và không làm việc ở tất cả cho tôi trên IE hoặc Chrome. Odd. – ManoDestra

@ManoDestra _ "Sau một phút trên Firefox 47, tôi nhận được một vòng tròn quay và không có gì xảy ra sau đó." _ Bạn đã bấm phát ở điều khiển video? Không thể tạo lại hiệu ứng đó, tại đây, tại firefox 47. 'alert()' được gọi; lần phát video có độ dài đầy đủ '1: 00'. Có bất kỳ lỗi nào được ghi tại 'giao diện điều khiển' không? Đừng tin rằng chrome hỗ trợ codec cụ thể tại Câu hỏi 'var mime = 'video/mp4; codecs = "avc1.4D401E, mp4a.40.2" '; '; bạn đã kiểm tra 'console' tại plnkr tại chrome chưa? Không chắc chắn về nghĩa là. Lưu ý, Câu hỏi thực tế cụ thể là giải quyết vấn đề tại firefox _ "Không thể phát video qua websocket tới Firefox" _ – guest271314

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"/> 
    </head> 
    <body> 
    <progress min="0" value="0"></progress><br><label></label><br> 
    <video controls></video> 
    <script> 
     // http://nickdesaulniers.github.io/netfix/demo/bufferAll.html 
     // http://jsfiddle.net/adamboduch/JVfkt/ 
     // The global web socket.  
     var sock, sourceBuffer; 
     sock = new WebSocket("ws://mock"); 
     sock.onerror = function(e) { 
      console.log("sock error", e) 
     } 
     // This is unchanging production code that doesn"t know 
     // we"re mocking the web socket. 
     sock.onmessage = function(e) { 
      console.log("socket message", e.data); 
      sourceBuffer.appendBuffer(e.data); 
     }; 
     var video = document.querySelector("video"); 
     var progress = document.querySelector("progress"); 
     var label = document.querySelector("label"); 
     var assetURL = "http://nickdesaulniers.github.io/netfix/" 
        + "demo/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); 
     } 
     video.addEventListener("canplay", function() { 
     alert("video canplay") 
     }) 
     function sourceOpen (_) { 
     //console.log(this.readyState); // open 
     var mediaSource = this; 
     sourceBuffer = mediaSource.addSourceBuffer(mimeCodec); 
     fetchAB(assetURL, function (buf) { 
      sourceBuffer.addEventListener("updateend", function (event) { 
      console.log("sourceBuffer updateend event;" 
         + "mediaSource.readyState:" 
        , mediaSource.readyState); 
      // mediaSource.endOfStream(); 
      // video.play(); 
      // console.log(mediaSource.readyState); // ended 
      }); 

     }); 
     }; 
     // mock `WebSocket` message 
     function fetchAB (url, cb) { 
     var xhr = new XMLHttpRequest; 
     xhr.open("get", url); 
     var file = url.split("/").pop(); 
     xhr.responseType = "arraybuffer"; 
     xhr.onload = function() { 
      // mock `WebSocket` message 
      sock.dispatchEvent(new MessageEvent("message", { 
      data: xhr.response 
     })); 
     console.log("video sent to sock", sock); 
     cb(); 
     }; 
     xhr.onprogress = function(e) { 
      progress.max = e.total; 
      progress.value = e.loaded; 
      label.innerHTML = "loading " + file + " ...<br>" 
          + e.loaded + " of " 
          + e.total + " bytes loaded"; 
     } 
     xhr.send(); 
     }; 
    </script> 
    </body> 
    </html>

Nguồn

2016-07-07 15:12:06 John

Có phải bạn đã sao chép mã từ câu trả lời trước đó? – Hans

Không thể phát trực tuyến video qua websocket tới Firefox

Trả lời

Các vấn đề liên quan