2013-07-09 71 views
0

對於我的Rails應用程序,我有項目,用戶可以通過Redactor Rails發佈更新。我爲每個項目製作了BLOGPOSTS控制器和型號。現在,他們可以用這款富文本編輯器嵌入視頻。但是,我正在探索添加一個選項,允許用戶直接在我的網站上使用YouTube進行網絡攝像機錄製並將其上傳到YouTube並作爲項目的BLOGPOST發佈。 Blogposts目前被保存在blogupdates表中,作爲t.text "content"Youtube Webcam Widget - 抓取視頻ID

我在這裏引用文檔:https://developers.google.com/youtube/youtube_upload_widget

* *問題:當我加入的YouTube上傳控件,它顯示了網絡攝像頭。然後錄製,之後,它只會生成上傳的視頻進行播放。但是有沒有辦法讓我抓住視頻ID,並在錄製視頻後自動保存爲帶有嵌入html的「BLOGPOST」content

所以我增加了以下每個項目頁面:

視圖/項目/ show.html.erb

<script> 
    // 2. Asynchronously load the Upload Widget and Player API code. 
    var tag = document.createElement('script'); 
    tag.src = "https://www.youtube.com/iframe_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

    // 3. Define global variables for the widget and the player. 
    // The function loads the widget after the JavaScript code 
    // has downloaded and defines event handlers for callback 
    // notifications related to the widget. 
    var widget; 
    var player; 
    function onYouTubeIframeAPIReady() { 
    widget = new YT.UploadWidget('widget', { 
     width: 500, 
     events: { 
     'onUploadSuccess': onUploadSuccess, 
     'onProcessingComplete': onProcessingComplete 
     } 
    }); 
    } 

    // 4. This function is called when a video has been successfully uploaded. 
    function onUploadSuccess(event) { 
    alert('Video ID ' + event.data.videoId + ' was uploaded and is currently being processed.'); 
    } 

    // 5. This function is called when a video has been successfully 
    // processed. 
    function onProcessingComplete(event) { 
    player = new YT.Player('player', { 
     height: 390, 
     width: 640, 
     videoId: event.data.videoId, 
     events: {} 
    }); 

    } 
</script> 
<div class = "container"> 
    <div id="widget"></div> 
    <div id="player"></div> 
</div> 

此外,每個頁面顯示的修訂者Rails的形式:

<%= form_for([@project, @project.blogposts.build]) do |f| %> 
    <div class="field"> 
    <%= f.text_area :content, label: "Blog Posts", :class => "redactor", %> 
    </div> 

    <%= f.hidden_field :user_id, :value => current_user.id %> 

    <div class="actions"> 
    <%= f.submit "Add Blog Post", :class => "btn btn-header" %> 
    </div> 
<% end %> 

blogposts_controller.rb

def create 
    @project = Project.find(params[:project_id]) 

    params[:blogpost][:content] = sanitize_redactor(params[:blogpost][:content]) 

    @blogpost = @project.blogposts.create!(params[:blogpost]) 

    if @blogpost.save 
    redirect_to blogs_project_path(@project), notice: "Blog entry created." 
    end 
end 

schema.rb

create_table "blogposts", :force => true do |t| 
    t.integer "user_id" 
    t.integer "project_id" 
    t.text  "content" 
    t.datetime "created_at", :null => false 
    t.datetime "updated_at", :null => false 
end 

回答

0

我不熟悉的博客平臺,所以我的回答是不會具體到這一點。

通常,有兩種方法可以使用YouTube iframe播放器嵌入視頻。一種是以編程方式添加嵌入,使用YT.Player構造函數替換頁面DOM中的現有元素。這就是你在你提供的代碼中所做的。

另一種方法是在頁面的DOM中明確包含一個,其中包含適當的屬性。機會是遵循標準模板,另一個需要改變的是視頻ID。一個例子標籤爲VIDEO_ID嵌入式播放器中加載是

<iframe type="text/html" width="640" height="390" 
src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0"></iframe> 

所以,如果你想節省一些HTML(到數據存儲或其他地方),包含一個YouTube的嵌入,這樣做將是最好的方式在HTML中包含標記,其中正確的VIDEO_ID值對應於新上傳的視頻。