octopress 如何添加youku视频和本地视频(octopress how to add a youku video or a local video)
用octopress 官方的video tag 可以添加视频,但是由于国内经常使用的是youku,所以下面是如何添加youku视频到octopress的教程。
首先添加youku.rb文件到路径:octopress/plugins/
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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
然后就可以像如下添加youku视频文件:
{% youtube 3dNDUNYT1fY 640 480 %}
其中 ‘3dNDUNYT1fY’是指视频的ID,获取视频ID 如下:
然后编辑markdown 文件,比如我的2014-11-14-test-new-theme.markdown
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
--- 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 %}
然后执行:
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文件如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
--- 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%}
然后执行:
rake generate
rake preview
然后在浏览器http://localhost:4000/ 预览即可
html5 video 标签属性如下: