Youtube 网络摄像头小工具 - 抓取 VideoID答案

【问题标题】：Youtube Webcam Widget - Grabbing VideoIDYoutube 网络摄像头小工具 - 抓取 VideoID
【发布时间】：2013-07-09 02:12:46
【问题描述】：

对于我的 Rails 应用程序，我有一些项目，用户可以通过 Redactor Rails 发布更新。我为每个项目制作了BLOGPOSTS 的控制器和模型。现在，他们可以用这个富文本编辑器很好地嵌入视频。但是，我正在探索添加一个选项，以允许用户在我的网站上直接使用 youtube 进行网络摄像头录制，并将其上传到 youtube 并作为项目的 BLOGPOST 发布。博文目前在 blogupdates 表中保存为t.text "content"。

我在这里参考了文档：https://developers.google.com/youtube/youtube_upload_widget

**问题：当我添加 youtube 上传小部件时，它会显示网络摄像头。然后我录制，之后，它只是生成上传的视频以供播放。但是有没有办法我可以获取视频 ID 并将其保存为“BLOGPOST”content，并在录制视频后自动设置嵌入 html？

所以我在每个项目页面中添加了以下内容：

查看/projects/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>

此外，每个页面都显示了 Redactor 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

【问题讨论】：

标签： ruby-on-rails youtube youtube-api webcam redactor

【解决方案1】：

我不熟悉那个博客平台，所以我的回答不具体。

一般来说，使用 YouTube iframe 播放器嵌入视频有两种方法。一种是以编程方式添加嵌入，使用YT.Player 构造函数替换页面DOM 中的现有元素。这就是您在提供的代码中所做的。

另一种方法是在页面的 DOM 中显式包含具有适当属性的 <iframe>。这可能会遵循标准模板，而另一个需要改变的是视频 ID。为VIDEO_ID 在嵌入式播放器中加载的示例<iframe> 标记是

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

因此，如果您想保存一些包含 YouTube 嵌入的 HTML（到数据存储或任何地方），最好的方法是在 HTML 中包含 <iframe> 标记，并使用正确的 VIDEO_ID 值对应新上传的视频。

【讨论】：