Javascript 动态加载Supreme HTML5视频播放器

我正在尝试从我的页面动态加载一堆sublime视频，但我对“sublime”和“sublimevideo”对象之间的差异感到困惑，文档也没有太大帮助

我正在使用此代码触发视频加载和“卸载”

$（文档）.ready（函数（）{
升华加载（）；
$（'ul li'）。单击（函数（）{
var元素=$（此）
var video=element.data（'video'）；
var title=元素数据（“title”）；
var description=元素.数据（'description'）；
变量内容=“”+
'' +
'' +
'' +
'' +
'' +
''+标题+''中+
“
目标：“+description+”
”+
'' +
“回来”+
'' +
''
$（'body'）。追加（内容）；
升华加载（）；
sublimitevideo.ready（函数（）{
sublivevideo.prepareAndPlay（）；
$（'.overlay'）。设置动画（{opacity:1，
左：0}，400）；
$（'.overlay'）。单击（函数（）{
$（此）。设置动画({
不透明度：0，
左：'-100px'}，
400,
函数（）{
无准备的，无准备的；
$（'body'）.find（'overlay'）.remove（）；
});
});
});
});
});

如果我只看一次视频，效果会很好。如果我再次尝试点击视频，覆盖将打开，视频将永远（似乎）加载，永远不会播放。我曾经在这一点上得到一个js错误，但现在不再是了

你知道为什么会这样吗？显然，我在准备和取消准备视频方面遇到了麻烦

---

谢谢

我不知道您是否还在研究这个问题，但我在动态加载视频时遇到了类似的问题……是的，不幸的是，文档中的示例很少。和您一样，我删除DOM元素，重新构建它，然后重新加载它。但是，我在prepare（）函数的回调中包含了“play”代码——这可能是您的代码的问题所在？My.on（'click'）函数中的我的代码，其中我的视频标记的源标记有一个类“.mp4\u 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();
}

var current_source=$（'.mp4_source'）.attr（'src'）；
if（当前\u源！=视频\u位置\u mp4）{
var current_width=$（“#视频_包装器”）.width（）；
var current_height=$（'#video_wrapper'）.height（）；
var new_video_wrapper=$（''）；
var new_video_player=$（''）
.addClass（‘升华’）
.attr（“宽度”，当前宽度）
.attr（'高度'，当前高度）
.attr（'预加载'，'无'）
.attr（'data-uid'，video\u id）
.attr（'data-name'，viddata['subject']））
.attr（'data-autoresize'，'fit'）；
var new_source=$（''）
.addClass（“mp4_源”）；
新的视频播放器。附加（新的源）；
新的视频包装器.append（新的视频播放器）；
$（“#视频_包装”）.remove（）；
新的视频包装器。insertBefore（'#videoinfo'）；
崇高准备（“视频播放器”，功能（播放器）{
player.on（'metadata'，函数（player）{
player.seekTo（时间戳）；
});
player.play（）；
});
}否则{
var player=sublime.player（“视频播放器”）；
player.seekTo（时间戳）；
player.play（）；
}

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();
}