javascript - 如何从 JavaScript 加载 html5 视频标签中的 src？

Question

事情是这样的，我正在使用 ASP.NET，我正在使用这个特定的 SignalR 库向我的客户广播视频，但据我所知，我无法流式传输视频，因为 signalR 是一个消息传递系统，它不打算流式传输视频、文件或类似内容。

现在我要做的是将视频拆分为缓冲区，这些缓冲区被 Base64 编码为字符串，然后在客户端上我试图将其加载到视频标签的源中。

在这里，我向您展示了我在客户端上所做的事情:

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;
    }

如您所见，目前我遇到了一个有点奇怪的场景，但我已经在客户端上对视频进行了编码，现在我只需要找出重现该视频的方法即可。

当我的问题出现时，有没有人以前做过这样的事情，或者你有什么想法或建议这样做？

Answer 1

感谢您提出一个有趣的问题；我以前从未想过它，但它似乎确实是可能的。 Ian Devlin 解释了如何使用 Data URIs with HTML5 media , 包括视频 - a working example也包括在内。

我看到的唯一区别是 type属性添加到 <source>标签;如果添加这个不起作用，你确定你的编码正确吗？当您尝试时会发生什么，您是否收到任何错误？