2013-10-08 2 views
0

Я хочу сделать вызов ajax, а затем отобразить html 5 видео.Html 5 видео не работает после вызова ajax

Следующий код не работает.

$.ajax({ 
      type: "POST", 
      url: "Videos.aspx/GetBlocs", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function (data) { 

       $("#videoPlayer").html(
        '<video id="Video1" src="" class="video-js vjs-default-skin" ' + 
        ' controls preload="auto" width="640" height="360" ' + 
        ' data-setup=\'{ "techOrder": ["youtube"], "src": "http://www.youtube.com/watch?v=xjS6SftYQaQ" }\'>' + 
        '</video>' 
        ); 

      } 
     }); 

Как вы можете видеть, я даже не использую значение обратного вызова ajax.

Однако, если видео отображается ПЕРЕД вызовом ajax, оно работает.

$("#videoPlayer").html(
         '<video id="Video1" src="" class="video-js vjs-default-skin" ' + 
         ' controls preload="auto" width="640" height="360" ' + 
         ' data-setup=\'{ "techOrder": ["youtube"], "src": "http://www.youtube.com/watch?v=xjS6SftYQaQ" }\'>' + 
         '</video>' 
         ); 
      $.ajax({ 
       type: "POST", 
       url: "Videos.aspx/GetBlocs", 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: function (data) { 
        ..... 

       } 
      }); 

Редактировать: Я также использую видео-js и youtube видео-js-плагины.

+0

Как вы знаете, даже если вызов Ajax является успешным? – Musa

+0

Успешно. У меня был код, который я удалил, чтобы упростить фрагмент кода. Собственно, видеопроигрыватель выглядит как-то, но остается черным и никогда не загружается. – Dave

+0

В коде, который работает, загружаете ли вы сценарий video.js до или после создания видеоэлемента? – brianchirls

ответ

0

Исправлено. Найди его в, вы знаете то, что они называют ... the official doc? Да. это предмет.

Поэтому в основном при вставке видео динамически после вызова Ajax, вы должны удалить настройки данных вещи и добавить его с videojs

$("#videoPlayer").html('<video id="Video1" src="" class="video-js vjs-default-skin" ' + // preload="auto" 
            ' controls width="640" height="360"></video>'); 

      videojs("Video1", { "techOrder": ["youtube"], "src": "http://www.youtube.com/watch?v=" + youtubeVideoID + "&vq=hd720" }, function() { 

       var v = this; 
       v.on("progress", function() { ... }); 
      }); 
0

Вы пытались явно запустить videojs в своем обратном вызове success()?

success: function (data) { 

    // Load the HTML here 

    // Initialise the video 
    videojs("Video1", {}, function(){ 
     // Player (this) is initialized and ready. 
    }); 
} 
+0

Он добавляет круг ожидания и кнопку воспроизведения к черному прямоугольнику, который у меня был. Когда я проверяю его, я вижу, что он был представлен как плоский html. он не выполняется и преобразовывается в iframe. – Dave

Смежные вопросы