Video Js loading source dynamically

Question

Hi I have an application which has a grid and a js video player. Currently I am populating the grid with data from a SQL database, I have a function call when ever a row is clicked which calls a stored procedure and returns a url i then use that url to change the source change the source. The funny thing is with a basic html 5 video player the code i have works fine but doesn't work for Video JS

My code -

function changesource(url) {

    var video = $("#vid1");
    video.src = url;
    document.getElementById('vid1').src = url;


 }
// calls the function for browse 
function getBrowseData() {
$.ajax({
    type: "post",
    data: JSON.stringify({
        archive_header_Key: testdata,
    }),
    url: "/Search.aspx/GetBrowseData",
    dataType: "json",
    contentType: "application/json",
    success: function (object) {
        response(object);
    },
    complete: function (object) {

    },
    error: function (object) {
    }
});
function response(object) {

        var obj = (object.d[0]["browse_file"]);

    var slashReplace = obj.replace(/\\/g, "/");
    var slashFinal = slashReplace.substring(10);
    var browsevalue = GetValue("BrowseServer");
    var slashfinal = "http://" + browsevalue + ":5060" + slashFinal;
    Location = slashfinal;
    $('#p1').text(slashfinal);     


    changesource(slashfinal);
}

}

var Video = ("<video id='vid1' class='video-js vjs-default-skin' controls  preload='none' width='640' height='264' data-setup='{}'><source src=" + Location + "  type='video/mp4'/></video>   <script>var options = { hidden: false }, mplayer = videojs('vid1'); mplayer.rangeslider(options); mplayer.showSlider();</script>");

Any help would be appreciated

Solution

If you're using video.js you need to use its API to set the source. The HTML5 video API does not work as once the video.js player is initialised the element with the id vid is not a video element.

var video = videojs("vid1");
video.src(url);

Video.js will infer the type of video for a few file extensions, but it's better to include the type:

video.src({
  type: 'video/mp4',
  src: 'https://example.com/myvideo.mp4'
});

Comments

[Mark Moonie Griffiths]

unfortunately that did not work the way i call the change (i have edited the question to include it.)

[misterben]

The code about would replace what you currently have in changesource(url). How you originally added the video element to the DOM makes no difference.

[Mark Moonie Griffiths]

Hi So i chnaged the function to function changesource(url) { var video = videojs("#vid1"); video.src(url); } But all i get oin the video player is no compatible source was found for this video. but when i put the link in directly it works. I have also checked its getting the right source and it is.

[Mark Moonie Griffiths]

Do i have to refresh the player when a new source is added?

[misterben]

No # in videojs("vid1");. You do not need to re-create a player to change the source. videojs('player-id') creates a video.js player from a video element with the id 'player' and returns it, or just returns the player if it already exists.

[Mark Moonie Griffiths]

I figured out what my problem was i was not setting a source to start with so it was throwing an error. once i set an initial source it works fine. Thank you for your help.