octopress 如何添加youku視頻和本地視頻（octopress how to add a youku video or a local video）

時間 2019-11-24

標籤 octopress 如何添加 youku 視頻本地 add video local 简体版

原文原文鏈接

用octopress 官方的video tag 能夠添加視頻，可是因爲國內常用的是youku,因此下面是如何添加youku視頻到octopress的教程。html

首先添加youku.rb文件到路徑:octopress/plugins/html5

class Youku < Liquid::Tag

def initialize(tagName, markup, tokens)
  super
  
  @params = markup.split(" ")
  if @params.count >= 1
    @id = @params[0]
    if @params.count >= 3
      @width = @params[1]
      @height = @params[2]
    else
      @width = 560
      @height = 420
    end
  else
    raise "No Youku ID provided in the \"youku\" tag"    
  end
end

def render(context)
# "<iframe height=498 width=510 src="http://player.youku.com/embed/XNTEzNzcwNDI0" frameborder=0 allowfullscreen></iframe>"
"<iframe style=\"margin:0 auto; display: block\" height=\"#{@height}\" width=\"#{@width}\" src=\"http://player.youku.com/embed/#{@id}?color=white&theme=light\"></iframe>"
end

Liquid::Template.register_tag "youku", self
end

View Code

而後就能夠像以下添加youku視頻文件：瀏覽器

{% youtube 3dNDUNYT1fY 640 480 %}


其中 ‘3dNDUNYT1fY’是指視頻的ID，獲取視頻ID 以下:

而後編輯markdown 文件，好比個人2014-11-14-test-new-theme.markdownmarkdown

---
layout: post
title: "test new theme"
date: 2014-11-14 11:22:16 +0800
comments: true
categories: 
---
{% video http://s3.imathis.com/video/zero-to-fancy-buttons.mp4 640 320 http://s3.imathis.com/video/zero-to-fancy-buttons.png %}

Add Youku Video


{% youku XODQ0NzY2MDg4 640 480 %}

View Code

而後執行:ide

rake generatepost

rake previewui

而後在瀏覽器http://localhost:4000/ 預覽便可this

octopress 是徹底支持html5的，徹底能夠在markdown文件裏面直接插入html5 video的語法來添加本地視頻。spa

首先在source目錄下面新建videos文件夾（images也是在這個文件夾下面），而後copy 兩個視頻在videos目錄下：3d

http://yun.baidu.com/share/link?shareid=2373040970&uk=3910054188

而後編輯markdown文件以下：

---
layout: post
title: "test new theme"
date: 2014-11-14 11:22:16 +0800
comments: true
categories: 
---

Add Youku Video

<video src="/videos/mov_bbb.mp4"   controls="controls">
Your browser does not support the video tag.
</video>

{% youku XNzM1MTM5ODEy 640 480 %}

{% img /images/email.png 400 250%}

View Code

而後執行:

rake generate

rake preview

而後在瀏覽器http://localhost:4000/ 預覽便可

html5 video 標籤屬性以下：