我目前使用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