Pazartesi, Kasım 4, 2024

Jekyll HTML5 Video Eklentisi

yüksek çözünürlüklü ruby logosu

Elinizde misal herhangi bir siteden direk olarak mp4 uzantılı yada ona benzer bir link var ise bu güzel eklenti sayesinde kullanıcıya HTML5 player sunabilirsiniz oldukça güzel oluyor. Octopress den araklama yaparak jekyll üzerindede çalıştırabiliyoruz. bu tarz ihtiyaçlarınızı karşılayabilirsiniz.

Nasıl kullanabileceğinizide direk olarak aşağıdaki dosyaya ekledim _plugins klasörünüze atıp gösterildiği gibi ekleme yapmanız yeterli.

# Syntax {% video url/to/video [width height] [url/to/poster] %}
#
# Example:
# {% video  720 480  %}
#

module Jekyll

  class VideoTag < Liquid::Tag
    @video = nil
    @poster = ''
    @height = ''
    @width = ''

    def initialize(tag_name, markup, tokens)
      @videos = markup.scan(/((https?://|/)S+.(webm|ogv|mp4)S*)/i).map(&:first).compact
      @poster = markup.scan(/((https?://|/)S+.(png|gif|jpe?g)S*)/i).map(&:first).compact.first
      @sizes  = markup.scan(/s(dS+)/i).map(&:first).compact
      super
    end

    def render(context)
      output = super
      types = {
        '.mp4' => "type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'",
        '.ogv' => "type='video/ogg; codecs=theora, vorbis'",
        '.webm' => "type='video/webm; codecs=vp8, vorbis'"
      }
      if @videos.size > 0
        video =  "<video #{sizes} preload='metadata' controls #{poster}>"
        @videos.each do |v|
          video << "<source src='#{v}' #{types[File.extname(v)]}>"
        end
        video += "</video>"
      else
        "Error processing input, expected syntax: {% video url/to/video [url/to/video] [url/to/video] [width height] [url/to/poster] %}"
      end
    end

    def poster
      "poster='#{@poster}'" if @poster
    end

    def sizes
      attrs = "width='#{@sizes[0]}'" if @sizes[0]
      attrs += " height='#{@sizes[1]}'" if @sizes[1]
      attrs
    end
  end
end

Liquid::Template.register_tag('video', Jekyll::VideoTag)