如何在HTML5中加載src來自JavaScript的視頻標籤？

這是事情，我正在使用ASP.NET，我正在使用這個特定的SignalR庫向我的客戶端播放視頻，但據我所知我無法流式傳輸視頻，因爲signalR是一個消息系統，它是不是爲了流式傳輸視頻，文件或類似的東西。如何在HTML5中加載src來自JavaScript的視頻標籤？

現在我想要做的是將視頻分割成Base64編碼成字符串的緩衝區，然後在客戶端上我試圖將它加載到Video標籤的源中。

在這裏，我告訴你我做的客戶端上：

HTML代碼：

<video id="myVideo"> 
    <source id="video_source"> 
</video>

JavaScript代碼：

//here somehow I am getting the string with the base64-encoded video 
function playVideo(message) { 
      var myVideo = document.getElementById("myVideo"); 
      var mySource = document.getElementById("video_source"); 
      mySource.setAttribute("src", getEncodedVideoString("mp4", message)); 
      myVideo.load(); 
      myVideo.play();   
     }; 

    // here I am formatting and concatenating the string for my source attribute 
    function getEncodedVideoString(type, message) { 
     return 'data:video/' + type + ';base64,' + message; 
    }

好吧，你可以看到，此刻的我面對一個有點奇怪的場景，但我已經在客戶端上編碼了視頻，現在我只需要找出重現該視頻的方式。

這是當我的問題出現時，以前是否有人做過類似的事情，或者您有任何想法或建議來做到這一點？

來源

2012-10-24 luis_laurent

感謝您提出一個有趣的問題;它以前從來沒有過我的想法，但似乎確實有可能。 Ian Devlin解釋如何使用Data URIs with HTML5 media，包括視頻 - 還包括working example。

我看到的唯一區別是type屬性被添加到<source>標籤;如果添加這個不起作用，你確定你的編碼是正確的嗎？當你嘗試時會發生什麼，你有什麼錯誤嗎？

來源

2012-10-30 04:16:53

是的，其實我已經讀過這篇文章，你說的對，我的問題是在編碼我的緩衝區時在服務器上。此代碼示例是完美的工作，感謝您記住我！順便說一句，有可能使用SignalR流式傳輸視頻，雖然不是最好的選擇，但你當然可以。 –

如何在HTML5中加載src來自JavaScript的視頻標籤？

回答

相關問題