動態加載崇高的HTML5視頻播放器

Question

我想從我的頁面動態加載一串崇高的視頻，我有'崇高'和'sublimevideo'對象之間的差異的麻煩，並且文檔不是太有幫助。

我使用這個代碼來觸發在視頻加載和「卸載」

$(document).ready(function() { 
    sublimevideo.load(); 

    $('ul li').click(function() { 
    var element = $(this) 

    var video = element.data('video'); 
    var title = element.data('title'); 
    var description = element.data('description'); 


    var content = '<div class="overlay">' + 
        '<div class="content clearfix">' + 
         '<video id="video" width="640" height="400" style="margin: 0 auto;">' + 
         '<source src="../assets/video/' + video + '.mp4" type="video/mp4"></source>' + 
         '</video>' + 
         '<div class="meta">' + 
         '<h2 class="title">' + title + '</h2>' + 
         '<p class="description">Objective: ' + description + '</p>' + 
         '</div>' + 
         '<a class="close">Back</a>' + 
        '</div>' + 
        '</div>' 

    $('body').append(content); 
    sublimevideo.load(); 

    sublimevideo.ready(function() { 
     sublimevideo.prepareAndPlay(); 

     $('.overlay').animate({opacity: 1, 
     left: 0 }, 400); 

     $('.overlay').click(function() { 
     $(this).animate({ 
      opacity: 0, 
      left: '-100px'}, 
      400, 
      function() { 
      sublimevideo.unprepare(); 
      $('body').find('.overlay').remove(); 
     }); 
     }); 
    }); 
    }); 
}); 

這個偉大的工程，如果我只是看一個視頻一次。如果我再次嘗試點擊視頻，疊加層會打開，視頻只會永久加載（看起來），並且從不播放。我曾經在這一點上得到一個JS錯誤，但不再。

任何想法，爲什麼這可能是？我顯然在準備和不準備視頻時遇到了麻煩。

謝謝！

Answer 1

不知道你是否仍在處理這個問題，但我在動態加載視頻時遇到了類似的問題......是的，不幸的是，文檔對示例很少。和你一樣，我刪除DOM元素，重新構建它，然後重新加載它。不過，我在prepare（）函數的回調中包含了「play」代碼 - 也許這是您代碼的問題？我的.on（'click'）函數中的代碼，其中我的視頻標記的源標記具有一個類'.mp4_source'：

var current_source = $('.mp4_source').attr('src'); 

if (current_source != video_location_mp4) { 
    var current_width = $('#video_wrapper').width(); 
    var current_height = $('#video_wrapper').height(); 

    var new_video_wrapper = $('<div id="video_wrapper"></div>'); 
    var new_video_player = $('<video id="video_player"></video>') 
          .addClass('sublime') 
          .attr('width', current_width) 
          .attr('height', current_height) 
          .attr('preload', 'none') 
          .attr('data-uid', video_id) 
          .attr('data-name', viddata['subject']) 
          .attr('data-autoresize', 'fit'); 
    var new_source = $('<source src="' + video_location_mp4 + '"></source>') 
          .addClass('mp4_source'); 

    new_video_player.append(new_source); 
    new_video_wrapper.append(new_video_player); 

    $('#video_wrapper').remove(); 
    new_video_wrapper.insertBefore('#videoinfo'); 
    sublime.prepare('video_player', function(player) { 
     player.on('metadata', function(player) { 
      player.seekTo(timestamp); 
     }); 
     player.play(); 
    }); 
} else { 
    var player = sublime.player('video_player'); 
    player.seekTo(timestamp); 
    player.play(); 
}