CODEWITHSUNDEEP
jqueryajaxhtmlhtml5-video
Dave
Dave

Reputation: 2984

Html 5 video not working after ajax call

I want to make an ajax call, and then display an html 5 video.

The following code doesn't work.

 $.ajax({
            type: "POST",
            url: "Videos.aspx/GetBlocs",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {

                $("#videoPlayer").html(
                   '<video id="Video1" src="" class="video-js vjs-default-skin" ' +
                   ' controls preload="auto" width="640" height="360" ' +
                   ' data-setup=\'{ "techOrder": ["youtube"], "src": "http://www.youtube.com/watch?v=xjS6SftYQaQ" }\'>' +
                   '</video>'
                   );

            }
        });

As you can see, I dont even use the ajax call back value for now.

However, if the video is displayed BEFORE the ajax call, it works.

$("#videoPlayer").html(
                       '<video id="Video1" src="" class="video-js vjs-default-skin" ' +
                       ' controls preload="auto" width="640" height="360" ' +
                       ' data-setup=\'{ "techOrder": ["youtube"], "src": "http://www.youtube.com/watch?v=xjS6SftYQaQ" }\'>' +
                       '</video>'
                       );
            $.ajax({
                type: "POST",
                url: "Videos.aspx/GetBlocs",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    .....

                }
            });

Edit: I am also using video-js and youtube video-js plugins.

Upvotes: 0

Views: 3263

Answers (2)

Dave
Dave

Reputation: 2984

Fixed. Found it in the, you know the thing they call... the official doc ? yeah. that thing.

So basically when you insert the video dynamically after an ajax call, you have to remove the data setup thing and add it with videojs

$("#videoPlayer").html('<video id="Video1" src="" class="video-js vjs-default-skin"  ' + // preload="auto"
                                   ' controls width="640" height="360"></video>');

            videojs("Video1", { "techOrder": ["youtube"], "src": "http://www.youtube.com/watch?v=" + youtubeVideoID + "&vq=hd720" }, function () {

                var v = this;
                v.on("progress", function () { ... }); 
           });

Upvotes: 1

Mina
Mina

Reputation: 1516

Have you tried to explicitly run videojs in your success() callback?

success: function (data) {

   // Load the HTML here

   // Initialise the video
   videojs("Video1", {}, function(){
       // Player (this) is initialized and ready.
   });
}

Upvotes: 0

Related Questions