Настройка источника VideoJS с помощью Javascript

#javascript #jquery #json #video.js

Вопрос:

Я пытаюсь установить источник и тип для Video.js динамически через объект JSON, который извлекается из удаленного вызова метода.

 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»}) воспроизводится без проблем. Чего мне здесь не хватает? Разве это невозможно сделать?

1. Пример кода предоставляет объект JS для src() метода, но вы предоставляете JSON. Удалите JSON.stringify() вызов или просто используйте radioPlayer.src(stationObject);

2. Что сказал Рори, ты вызываешь radioPlayer.src('{"src":"http://wlca-stream.lc.edu:8004/wlca","type":"audio/mpeg"}'); , когда запускаешь JSON.stringify()

Ответ №1:

Приведенный вами пример кода предоставляет объект 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);
  });
}