How to load src in html5 Video tag from JavaScript?

Posted by luis_laurent on Stack Overflow See other posts from Stack Overflow or by luis_laurent
Published on 2012-10-24T21:42:12Z Indexed on 2012/10/25 5:01 UTC
Read the original article Hit count: 155

Here is the thing, I'm working with ASP.NET and I'm using this particular SignalR library to broadcast a video to my clients, but as far as I know I can not stream video because signalR is a messaging system and it is not intended to stream video, files or things like that.

Now what I am trying to do is to split the video into buffers that is Base64-encoded into a string, then on the client I am decoding this string and I am trying to load it into the source of a Video tag.

Here I show you what I am doing on the client:

HTML Code:

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

Javascript Code:

 //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("avi", message));
          myVideo.load();
          myVideo.play();         
      };

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

Well as you can see, at the moment I'm facing a scenario a little weird, but I already have the video encoded on the client, now I just need to find out the way to reproduce that video.

And here is when my question comes up, does any one has done something like this before, or you have any idea or suggestion to do that?

P.S I am using this jquery-base64 library to decode my string

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery