问题描述
我正在尝试通过从远程方法调用中检索到的 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 "}) 它播放没有问题。我在这里缺少什么?这是不可能的吗?
解决方法
您显示的示例代码为 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);
});
}