通过Javascript设置VideoJS源

debugcn 发表于 Dev

迈克尔·霍尔

我正在尝试通过从远程方法调用检索的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”：“ audio / mpeg “}）可以正常播放。我在这里想念什么？这是不可能的吗？

罗里·麦克罗森（Rory McCrossan）

您显示的示例代码为该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);
  });
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。