html5视频播放器，并使用ruby+Liquid语法简单封装了一个播放视频的插件，详见本文章最下面

观看延时虫洞视频：

ruby + Liquid 代码：
使用Video for Everybody

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
module Jekyll
    class SCVideo < Liquid::Tag
 
        def initialize(tagName, params, tokens)
            super
            options = params.split
            @poster = options[0]
            @mp4Url = options[1]
            @webmUrl = options[2]
            @oggUrl = options[3]
        end
 
        def render(context)

            "<!-- \"Video For Everybody\" http://camendesign.com/code/video_for_everybody -->\
            <video controls=\"controls\" poster=\"#{@poster}\" width=\"100%\" height=\"100%\">\
                <source src=\"#{@mp4Url}\" type=\"video/mp4\" />\      
                <source src=\"#{@webmUrl}\" type=\"video/webm\" />\
                <source src=\"#{@oggUrl}\" type=\"video/ogg\" />\
                <object type=\"application/x-shockwave-flash\" data=\"http://player.longtailvideo.com/player.swf\" width=\"#100%\" height=\"#100%\">\
                    <param name=\"movie\" value=\"http://player.longtailvideo.com/player.swf\" />\
                    <param name=\"allowFullScreen\" value=\"true\" />\
                    <param name=\"wmode\" value=\"transparent\" />\
                    <param name=\"flashVars\" value=\"controlbar=over&amp;image=#{@poster}&amp;file=#{@mp4Url}\" />\
                    <img alt=\"说明\" src=\"#{@poster}\" width=\"100%\" height=\"100%\" title=\"浏览器不支持在线观看\" />\
                </object>\
            </video>"
        end
    end
end

Liquid::Template.register_tag('SCVideo', Jekyll::SCVideo)

说明：

1
2
3
4
5
*params*里：
第1个参数为未播放时的默认图片  
第2个参数为mp4视频的地址  
第3个参数为webm视频的地址（可选）    
第4个参数为ogg视频的地址（可选）