Base64 value is not working with video tag?

Question

i am adding src for video source with base64 value but its not working here is my html

<video id="video" controls> 
  <source type="video/mp4"  id="jh">  
</video>

and my js is

$("#vd").click(function(){   
        $.ajax({
                url:"RetriveVedio",
                method: "get",
                dataType: 'text', 
                success:function(response){
                    console.log(response);

                     var src = 'data:video/mp4;base64,'+response;
                  $("#video").find("#jh").attr("src", src);
                // $('#video').load();
                 $("#video").trigger('load');
                 $("#video").trigger('play'); 
                }    
        });      
    });

base64 value which is coming from server is AAAAGGZ0eXBtcDQyAAAAAG1wNDFpc29tBNjldm1kYXQAAAAAAAAAEAA= value is getting added to the source like this <source type="video/mp4" id="jh" src="data:video/mp4;base64,AAAAGGZ0eXBtcDQyAAAAAG1wNDFpc29tBNjldm1kYXQAAAAAAAAAEAA="> but video is not getting played. i am not able to trace it ,can any one help me?

isn't there any solution for it??

Hmmm... Good question. I really dont know if base64 encoded src works with video. But I dont think so. — , Sep 11 '17 at 09:39
It does work vith videos too https://iandevlin.com/html5/data-uri/video.php — Valdrinium, Sep 11 '17 at 09:41
Your response looks a bit short. A very very small image has that base64 encoding, and here we're talking videos :/ — Valdrinium, Sep 11 '17 at 09:45
i am also talking about video . best of my knowledge blob also stores videos — bharath, Sep 11 '17 at 09:48
sorry for the misunderstanding, if its work with video too then ,why its not happening in my case can view my code once @ Valdrinit — bharath, Sep 11 '17 at 09:51
The problem lies in your response, you only have the header of your file here (and not even the metadata). But anyway, base64 expands the data by ~30% + Fetching it with ajax means that you'll have to download the whole video at once + the browser will have to keep it in memory twice = don't send a b64 version of your video. What's wrong with `source.src = video.mp4`? — Kaiido, Sep 12 '17 at 05:43
Well your video is stored somewhere on your server, right? Instead of encoding it from your server, sending the b64 and decoding it in the browser, tell directly the browser to load the video from its real origin. — Kaiido, Sep 12 '17 at 05:56
Also, don't post duplicate questions : https://stackoverflow.com/questions/46168670/encoded-base64-video-value-is-not-getting-translated-as-normal-video Please delete of these, maybe the other one since it has got less attention. — Kaiido, Sep 12 '17 at 05:57

score 5 · Answer 1 · answered Jul 24 '19 at 16:33

I ran into this issue recently, my solution was to add the src attribute directly onto the <video> element. Like

<video src="-base64 string here-" width="xx" height="yy">
    Your browser does not support HTML5 video.
</video>

adding the src in the <source> element caused the video to do nothing.

score 1 · Accepted Answer · answered Sep 13 '17 at 13:24

"...But video is not getting played. i am not able to trace it, can any one help me?"

(1) Your string "AAAAGGZ0eXBtcDQyAAAAAG1wNDFpc29tBNjldm1kYXQAAAAAAAAAEAA=" only provides 41 bytes. This is not enough to play a video.

00 00 00 18 66 74 79 70 6D 70 34 32 00 00 00 00         ....ftypmp42....
6D 70 34 31 69 73 6F 6D 04 D8 E5 76 6D 64 61 74         mp41isom.Øåvmdat
00 00 00 00 00 00 00 10 00                              .........

(2) Your bytes begin with mdat (which is a/v data all mixed up in one group), the decoder needs moov part of file (which has metadata) to know where frame1 bytes begin/end within all that mixed mdat section. Best to make MP4 file with moov first, followed by mdat.

Find fixing tool online with keywords : fast start MP4 moov at front

(3) Because mdat is first, we can see its size at bytes : 04 D8 E5 76 (which means 81.3 MB). So you must receive around 81 megs before you even begin having metadata for decoder.

Decoder needs metadata (stored in moov section, after 81 megs of this mdat) before it can display anything or decode sound.

score 0 · Answer 3 · answered Sep 14 '17 at 07:25

0

yes my response was not got encoded properly into the base64 value it was short and not valid one

answered Sep 14 '17 at 07:25

bharath

155
2
5
15

Base64 value is not working with video tag?

3 Answers3

Linked