Question

我正在尝试从我的页面动态加载一堆崇高的视频，而我在“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（）函数的回调中包含了“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();
}

动态加载Sublime HTML5视频播放器

1 个答案: