时间戳

首页 > 解决方案 > 通过 Javascript 设置 VideoJS 源

javascript - 通过 Javascript 设置 VideoJS 源

问题描述

我正在尝试通过从远程方法调用中检索到的 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 "}) 播放没有问题。我在这里想念什么？这不可能吗？

标签： javascriptjqueryjsonvideo.js

解决方案

您显示的示例代码为该方法提供了一个 JS 对象src()，但您提供的是 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);
  });
}

推荐阅读