Load video source into videojs or mediaelementjs dynamically from ajax?

Question

I need to load video source, multiple types, from another website, which on get returns text link into video.

For example i open:

http://www.getthisvideoexample.com?whichvideo=id0

it shows in web browser text link: http://someotherserver.com/somesubdomainrandomuniquenumber/thisisyourvideovalidforsometime.mp4

or http://www.getthisvideoexample.com?whichvideo=id0&webm=true

and it shows in web browser text link: http://someotherserver.com/somesubdomainrandomuniquenumber/thisisyourvideovalidforsometime.webm

But this server sometimes, when load is high,returns 500 error. So i need to handle it all.

Lets take for example:

<video id="myVideo"></video>
var player = new MediaElementPlayer('#myVideo', {
type: ['video/mp4', 'video/webm'],
success: function (mediaElement, domObject) {

    var sources = [
        { src: "HOW_TO_PUT_HERE_DYNAMICALLY_LOADED_MP4_LINK?", type: 'video/mp4' },
        { src: "HOW_TO_PUT_HERE_DYNAMICALLY_LOADED_WEBM_LINK?", type: 'video/webm' }
    ];

    mediaElement.setSrc(sources);
    mediaElement.load();
    mediaElement.play();
}

});

Also how to make it so, that if 500 or other error is returned instead of link to video, code will just wait few seconds and try again, or display message with text "trying again, wait...."? Thanks.

score 0 · Answer 1 · answered Jan 14 '15 at 03:11

I would try a different approach.

I would place an ajax request (using jQuery.ajax()) within a setInterval loop (every 2 seconds perhaps). If the AJAX request, either

http://www.getthisvideoexample.com?whichvideo=id0 // returns a MP4 file

... or

http://www.getthisvideoexample.com?whichvideo=id0&webm=true // returns a webm file

... is successful, then clear the interval (clearInterval()), otherwise keep trying until the server responds successfully (you may need to set a method to clear the interval after some time in case the server is not available, otherwise you will end up in an infinity loop)

How-to?

If the ajax request is successful, then I would build the <video> tag structure with the response and append the tag to a video container (a <div> perhaps)

Then I would bind MEJS to the selector of the newly appended tag like :

var URL = "http://www.getthisvideoexample.com?whichvideo=id0 "; // request video URL
jQuery(document).ready(function ($) {
    var getVideo = setInterval(function () {
        $.ajax({
            url: URL,
            cache: false,
            dataType: "json", // or else
            success: function (response) {
                clearInterval(getVideo); // ends loop
                // build video tag
                // select proper type, based on response
                var video = '<video id="video_player" width="320" height="240" controls>' +
                    '<source src="' + response + '" type="video/' + (response.indexOf("webm") == -1 ? 'mp4' : 'webm') + '" />' +
                    '</video>';
                // target container's selector
                $("#videoContainer")
                .html(video) // insert video tag
                .find("#video_player") // find video selector after insertion
                // bind MEJS
                .mediaelementplayer({
                    // MEJS options
                });
            },
            error: function () {
                // error in ajax, will try again in 2 seconds
            }
        });
    }, 2000);
}); // ready

Load video source into videojs or mediaelementjs dynamically from ajax?

1 Answers1

Linked