Setting VideoJS Source via Javascript

Question

I'm trying to set the source and type for Video.js dynamically via a JSON object that is retrieved from a remote method call.

radioPlayer = videojs("RadioPlayer");

function RadioListPage() {
  $.getJSON(serviceURL + 'rbApp.cfc?method=Radio', function(data) {
    $.each(data.DATA, function(index, itemData) {
      $('#radioList').append('<div class="play" data-type="' + itemData[4] + '" data-src="' + itemData[3] + '" data-station="' + itemData[1] + '" data-id="' + itemData[0] + '"><img src="' + itemData[2] + '"></div>');
      lastIDNumberVideo = itemData[0];
    });

    $('#radioList .play').click(function() {
      var stationObject = new Object();
      stationObject.src = $(this).data("src");
      stationObject.type = $(this).data("type");
      var jsonStr = JSON.stringify(stationObject);
      radioPlayer.src(jsonStr);
      radioPlayer.play();
    });

    loading('hide', 100);
  });
}

VideoJS will throw an error that the stream isn't valid. However, if I take that jsonStr variable and hard code that value like this radioPlayer.src({"src":"http://wlca-stream.lc.edu:8004/wlca","type":"audio/mpeg"}) it plays with no issue. What am I missing here? Is this not possible to do?

Answer 1

The example code you show provides a JS object to the src() method, yet you're providing JSON. Try providing the object directly to the method.

Also note that I'd suggest you use a delegated event handler instead of binding events in the AJAX callback, which can lead to issues with duplicated events. Try this:

radioPlayer = videojs("RadioPlayer");

$('#radioList').on('click', '.play', function() {
  radioPlayer.src({
    src: $(this).data("src"),
    type: $(this).data("type")
  });
  radioPlayer.play();
});

function RadioListPage() {
  $.getJSON(serviceURL + 'rbApp.cfc?method=Radio', function(data) {
    let html = data.DATA.map(item => `<div class="play" data-type="${item[4]}" data-src="${item[3]}" data-station="${item[1]}" data-id="${item[0]}"><img src="${item[2]}"></div>`);
    $('#radioList').append(html);

    lastIDNumberVideo = data.DATA.slice(-1)[0];
    loading('hide', 100);
  });
}