Question

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

    //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播放器。

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

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

提前感谢您的帮助。

Answer 1

我通过只创建一个视频播放器实例（而不是每个新视频的新实例）解决了这个问题。然后我使用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将不会加载/播放任何视频。我只是得到一个空白的玩家，“加载”图像围成一圈。它甚至不会在海报属性中加载图像。我可能会在今天晚些时候单独发表一篇文章。

Answer 2

是的，看起来玩家只有在第一次渲染时才会被识别，因此每次将玩家HTML加载到DOM中时，您都需要使用ur代码来确认它是一个videoJS播放器。

看起来像查克有它。否则：

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

希望这有帮助！

将video.js与动态创建的视频标签结合使用

2 个答案: