1

I am trying to play a base 64 encoded MP4 using the HTML5 data URI. For some reason, the video won't play. The approach works fine for image files (jpeg and png), however for some reason it won't work for media files.

On the client side I have:

document.getElementById("video_holder").src = "data:video/mp4;base64,"  + xmlhttp.responseText;

HTML something like:

<video controls> <source type="video/webm" src="" id="video_holder" />...

I am fetching the file using PHP and base64 encode it before sending it to the user:

$file = file_get_contents($path);
echo chunk_split(base64_encode(trim($file)));

I also tried:

$file = file_get_contents($path);
echo base64_encode(trim($file));

Any suggestions?

Arnaud Leyder
  • 6,674
  • 5
  • 31
  • 43
JB2
  • 1,587
  • 2
  • 24
  • 40
  • just because you CAN supply a data uri doesn't mean that the back-end player will accept such a thing... – Marc B Nov 05 '14 at 20:31

1 Answers1

2

I would say you first need to decode in JavaScript your Base 64 file. This is explained here but some browsers do not support it.

I would then create a Blob object from the decoded file and then create an objectURL from the blob and push this objectURL as the src of the HTML5 video tag.

I have not done this yet but this is how I would do it if I had to. Why do you need to base64 encode your video file in the first place? This can create overhead and increase processing time. If you need encryption a DRM solution would be better.

Community
  • 1
  • 1
Arnaud Leyder
  • 6,674
  • 5
  • 31
  • 43
  • thanks, will try. Is there any way to use the data URI without encoding the file in base64? I tried not encoding the file and then just using: document.getElementById("video_holder").src = "data:video/mp4;" + xmlhttp.responseText; – JB2 Nov 06 '14 at 10:01
  • 1
    you should be able to: var videoBlob = new Blob(videoData, {type : 'video/mp4'}); and push the blob to an objectURL and the objectURL to the src of the video tag. [More info](https://developer.mozilla.org/en-US/docs/Web/API/Blob.Blob) – Arnaud Leyder Nov 06 '14 at 10:13