How to load src in html5 Video tag from JavaScript?
- by luis_laurent
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
