1

Trying change src on 2 html5 video element. And when I am trying to play both videos I get this eror:

Uncaught (in promise) DOMException: Failed to load because no supported source was found.

This is the code:

// First the video file is converted to base64 string with PHP and then send it though ajax

$array[$video_id] = 'data:video/mp4;base64,'.base64_encode(file_get_contents(get_template_directory().'/video/'.$video_id.'.mp4'));




var current = // base64 video string

// Current exercises
$('#video_run source').attr('src', current );
video_current = document.getElementById('video_run');
video_current.load();
video_current.play();

var next = // base64 video string

// Next exercises
$('#video_next source').attr('src', next );
video_next = document.getElementById('video_next');
video_next.load();
video_next.play();

An exemple on base64 string:

data:video/mp4;base64,[string]

Any idea what I am doing wrong?

Erik Andershed
  • 363
  • 2
  • 17
  • Is it CORS issue? try video.crossOrigin = 'anonymous'; And make sure that the server response has the header Access-Control-Allow-Origin: *. Or instead of the asterisk wildcard, specify the domain of the website that is allowed to access the video from the server. – pk_code Jun 20 '17 at 19:02
  • Hi. Sorry but I don´t understand. I get this eror in Chomre. But the problem with only one video is playing is also in safari and on ios. Also the src is an base64 video string. – Erik Andershed Jun 20 '17 at 20:03
  • Check this one out https://stackoverflow.com/a/40238567/3373348 – pk_code Jun 20 '17 at 20:33
  • Ok, where should I add this video.crossOrigin = 'anonymous'; ? – Erik Andershed Jun 20 '17 at 20:41
  • In HTML tag like this OR inside Javascript onload vid.crossOrigin = "anonymous"; – pk_code Jun 20 '17 at 20:54
  • did try to add crossOrigin="anonymous" to the html video tag. But it do not work. – Erik Andershed Jun 21 '17 at 07:20
  • @JackRyder, dataURI are not a cross-origin resource, the crossOrigin attribute is useless a best here. To OP: where does this dataURI comes from ? And are `.js-session-video source` and `.js-next-session-video source` children of `#video_run` and `#video_next` respectively ? – Kaiido Jun 21 '17 at 07:29
  • I have updated the question with the answers. I make the base64 in PHP from the video file. And yes the source is the children of the #video_run and #video_next – Erik Andershed Jun 21 '17 at 07:42
  • Wow... Why do you send it as base64 from an file ? Set directly your source to the file. If you absolutely want to download the file entirely before playing it, then fetch the file through ajax as a blob and then create an blobURI from it, but base64 encoding an video file is never gonna be an good idea. – Kaiido Jun 21 '17 at 07:42
  • Yes I like to download all videos before starting the exercises. Will the blobURL solve this play problem I have? Do you have any exempel on how I do an BlobURL? – Erik Andershed Jun 21 '17 at 07:44
  • for modern browsers : `fetch(yourURL).then(resp => res.blob()).then(blob => { url = URL.createObjectURL(blob); source.src = url; ...})`. For oldies, `var xhr = new XMLHttpRequest(); xhr.open('get', yourURL); xhr.responseType = 'blob'; xhr.onload = function(){var url = URL.createObjectURL(xhr.response); source.src = url; ...}; xhr.send();` – Kaiido Jun 21 '17 at 07:49
  • Thanks, I will try this. But do you know why the video won't play? I am changing the src of 2 video elements and try to play both video at the same time. I do this multiple time with different videos src under each session. – Erik Andershed Jun 26 '17 at 08:59

0 Answers0