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