3

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

    //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 += "<video id='downloadedVideo_"+id+"' class='video-js vjs-default-skin' width='320' height='240' controls preload='auto' width='640' height='264' poster='"+PHOTOSTORAGEMEDIUM + id'>";
    html += "<source src='"+url+".mp4' type='video/mp4' />";
    html += "</video>";
    $videoBox.html(html);
    $("#downloadedVideo_"+id).load();
    $videoBox.dialog( "open" );
    _V_("downloadedVideo_"+id);  //initialize video player
}

首次单击视频缩略图时，此代码可在所有浏览器上完美运行。当用户点击他已经观看过的视频的视频缩略图时，我的错误就会触发。

在 FF 中，我在第二遍时收到“未找到支持的 mime 类型的视频”错误。chrome 和 safari 在第二遍加载和播放视频；但这样做使用他们的默认 html5 播放器而不是 video.js 播放器。

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

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

在此先感谢您的帮助。

4

2 回答 2

2

我通过只创建一个视频播放器实例（而不是为每个新视频创建一个新实例）解决了这个问题。然后，我使用 video.js 的 src 方法动态更改该播放器的 src 属性。

首先，我创建了一个初始化的全局变量来保存视频播放器实例 ( var videoPlayer = _V_("downloadedVideo))。然后我用以下代码替换了旧的视频缩略图点击事件代码：

`           var $videoBox = $("div#video_box"),
                url = VIDEOSTORAGE + id + "/" + encodeURI(post.video_file_name.split(".")[0]);    
            $videoBox.dialog('option', 'title', post.video_file_name);
            $videoBox.dialog('option', 'position', ["center", 100]);
            $videoBox.dialog( 'open' );
            $(video).attr('poster', PHOTOSTORAGEMEDIUM + id + "/" + post.photo_file_name);
            videoPlayer.src({type: 'video/mp4', src: url + '.mp4'});`

现在 video.js 正在所有现代浏览器上工作，除了移动 safari。由于某种我无法弄清楚的原因，移动 safari 不会加载/播放任何视频。我只是得到一个空白播放器，“加载”图像绕了一圈。它甚至不会在海报属性处加载图像。我可能会在今天晚些时候就此单独发表一篇文章。

于 2012-08-27T20:35:27.110 回答
0

是的，看起来播放器仅在第一次呈现时才被识别，因此每次将播放器 HTML 加载到 DOM 时，您都需要您的代码来确认它是 videoJS 播放器。

查克好像有。除此以外：

我所做的是将播放器加载到 DOM 中一次，如果不需要则将其隐藏，在加载新的 src 以进行播放时显示它。

希望这可以帮助！

于 2012-12-19T18:46:37.323 回答