通过 Javascript 设置 VideoJS 源

Question

我正在尝试通过从远程方法调用中检索到的 JSON 对象动态设置 Video.js 的来源和类型。

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 将抛出流无效的错误。但是，如果我采用该 jsonStr 变量并像这样硬编码该值 radioPlayer.src({"src":"http://wlca-stream.lc.edu:8004/wlca","type":" =16=]"}) 播放没有问题。我在这里错过了什么？这不可能吗？

Answer 1

您显示的示例代码为 src() 方法提供了一个 JS 对象，但您提供的是 JSON。尝试直接向方法提供对象。

另请注意，我建议您使用委托事件处理程序，而不是在 AJAX 回调中绑定事件，这可能会导致重复事件的问题。试试这个：

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);
  });
}

通过 Javascript 设置 VideoJS 源

Setting VideoJS Source via Javascript

javascript

jquery

json

video.js