javascript - 动态加载 Sublime HTML5 视频播放器

Question

我正在尝试从我的页面动态加载一堆 sublime 视频，但我在区分“sublime”和“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() 函数的回调中包含了“播放”代码——也许这是您的代码的问题？我的 .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();
}