使用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 += "<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 
}

此代碼在所有瀏覽器首次單擊視頻縮略圖時都能正常工作。當用戶點擊他已經觀看的視頻的視頻縮略圖時，我的bug就會觸發。

在FF中，第二遍我收到了「沒有支持MIME類型的視頻」錯誤。第二遍Chrome和Safari都加載並播放視頻;但是使用默認的html5播放器而不是video.js播放器。

我認爲我的問題是，video.js必須使用唯一的視頻標籤ID進行初始化，並且第二次用戶單擊視頻縮略圖時，我的代碼嘗試使用視頻標籤ID初始化播放器已使用。

有誰知道一個乾淨的方法來避免這個問題？

在此先感謝您的幫助。

來源

2012-08-26 chuck w

我通過只創建一個視頻播放器實例（而不是每個新視頻的新實例）解決了該問題。然後，我使用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正在所有現代瀏覽器EXCEPT移動Safari瀏覽器。由於某些原因，我無法弄清楚，移動Safari不會加載/播放任何視頻。我只是得到一個空白球員與「加載」圖像繞圈。它甚至不會在海報屬性中加載圖像。今天晚些時候我可能會另外發表一篇文章。

來源

2012-08-27 20:35:27

是的，看起來玩家只有在第一次被渲染時纔會被識別出來，所以您需要通過代碼來確認每次將該玩家的HTML加載到DOM時，它的videoJS播放器。

看起來像查克有它。否則：

我所做的是將播放器加載到DOM一次，如果不需要將其隱藏，在加載新的src時顯示它。

希望這會有所幫助！

來源

2012-12-19 18:46:37 Cody

使用video.js動態創建視頻標籤

回答

相關問題