html动态添加video地址,使用video.js动态创建视频标签

我目前使用video.js处理来自html5视频的闪回回退。当用户点击我网站上的缩略图时，我动态地(使用js/jquery)创建并将所需的html插入jquery ui对话窗口，然后显示视频，使用html5或flash后退。以下是相关代码：使用video.js动态创建视频标签

//setup jquery ui dialog window

$("div#video_box").dialog({

autoOpen: false,

modal: true,

width: 'auto',

resizable: false,

draggable: true,

close: function() {

$("video").remove()

}

});

//the following code runs after a video thumbnail click event.

{

var $videoBox = $("div#video_box"),

url = VIDEOSTORAGE + id , //url to s3 storage bucket + id of the video/thumbnail that was clicked

html ="";

html += "";

html += "";

html += "";

$videoBox.html(html);

$("#downloadedVideo_"+id).load();

$videoBox.dialog("open");

_V_("downloadedVideo_"+id); //initialize video player

}

此代码在所有浏览器首次单击视频缩略图时都能正常工作。当用户点击他已经观看的视频的视频缩略图时，我的bug就会触发。

在FF中，第二遍我收到了“没有支持MIME类型的视频”错误。第二遍Chrome和Safari都加载并播放视频;但是使用默认的html5播放器而不是video.js播放器。

我认为我的问题是，video.js必须使用唯一的视频标签ID进行初始化，并且第二次用户单击视频缩略图时，我的代码尝试使用视频标签ID初始化播放器已使用。

有谁知道一个干净的方法来避免这个问题？

在此先感谢您的帮助。

2012-08-26

chuck w