Динамическая загрузка Sublime HTML5 Video player

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, перестраиваю его и перезагружаю. Тем не менее, я включил код «play» в обратном вызове функции 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(); 
}