動態加載Sublime HTML5視頻播放器

Question

我正在嘗試從頁面中動態加載一堆精美的視頻，但是我對“精美的”和“精美的視頻”對象之間的區別感到困惑，而且文檔也不太有用。

我正在使用此代碼觸發視頻的加載和“卸載”

$(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（）函數的回調中包含了“播放”代碼-也許這是代碼的問題？ 我的代碼位於.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();
}