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

用octopress 官方的video tag 可以添加视频，但是由于国内经常使用的是youku,所以下面是如何添加youku视频到octopress的教程。

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

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.markdown

---
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

然后执行:

rake generate

rake preview

然后在浏览器http://localhost:4000/ 预览即可

 

octopress 是完全支持html5的，完全可以在markdown文件里面直接插入html5 video的语法来添加本地视频。

首先在source目录下面新建videos文件夹（images也是在这个文件夹下面），然后copy 两个视频在videos目录下：

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 标签属性如下：