Permalink
Browse files

Adds a video_tag helper for the HTML5 video tag (similar to how the i…

…mage_tag works) (tests included); removes a duplicate test line for image_tag; adds boolean attributes for video tag to tag()'s boolean attributes

Signed-off-by: Yehuda Katz + Carl Lerche <ykatz+clerche@engineyard.com>
  • Loading branch information...
tiegz authored and Yehuda Katz + Carl Lerche committed Jun 26, 2009
1 parent 9eab435 commit 51d7b3070c68492f5376c19d24d8e5a2d746d7ea
@@ -454,6 +454,21 @@ def image_path(source)
end
alias_method :path_to_image, :image_path # aliased to avoid conflicts with an image_path named route
# Computes the path to a video asset in the public videos directory.
# Full paths from the document root will be passed through.
# Used internally by +video_tag+ to build the video path.
#
# ==== Examples
# video_path("hd") # => /videos/hd
# video_path("hd.avi") # => /videos/hd.avi
# video_path("trailers/hd.avi") # => /videos/trailers/hd.avi
# video_path("/trailers/hd.avi") # => /videos/hd.avi
# video_path("http://www.railsapplication.com/vid/hd.avi") # => http://www.railsapplication.com/vid/hd.avi
def video_path(source)
compute_public_path(source, 'videos')
end
alias_method :path_to_video, :video_path # aliased to avoid conflicts with an video_path named route
# Returns an html image tag for the +source+. The +source+ can be a full
# path or a file that exists in your public images directory.
#
@@ -505,6 +520,58 @@ def image_tag(source, options = {})
tag("img", options)
end
# Returns an html video tag for the +sources+. If +sources+ is a string,
# a single video tag will be returned. If +sources+ is an array, a video
# tag with nested source tags for each source will be returned. The
# +sources+ can be full paths or files that exists in your public videos
# directory.
#
# ==== Options
# You can add HTML attributes using the +options+. The +options+ supports
# two additional keys for convenience and conformance:
#
# * <tt>:poster</tt> - Set an image (like a screenshot) to be shown
# before the video loads. The path is calculated like the +src+ of +image_tag+.
# * <tt>:size</tt> - Supplied as "{Width}x{Height}", so "30x45" becomes
# width="30" and height="45". <tt>:size</tt> will be ignored if the
# value is not in the correct format.
#
# ==== Examples
# video_tag("trailer") # =>
# <video src="/videos/trailer" />
# video_tag("trailer.ogg") # =>
# <video src="/videos/trailer.ogg" />
# video_tag("trailer.ogg", :controls => true, :autobuffer => true) # =>
# <video autobuffer="autobuffer" controls="controls" src="/videos/trailer.ogg" />
# video_tag("trailer.m4v", :size => "16x10", :poster => "screenshot.png") # =>
# <video src="/videos/trailer.m4v" width="16" height="10" poster="/images/screenshot.png" />
# video_tag("/trailers/hd.avi", :size => "16x16") # =>
# <video src="/trailers/hd.avi" width="16" height="16" />
# video_tag("/trailers/hd.avi", :height => '32', :width => '32') # =>
# <video height="32" src="/trailers/hd.avi" width="32" />
# video_tag(["trailer.ogg", "trailer.flv"]) # =>
# <video><source src="trailer.ogg" /><source src="trailer.ogg" /><source src="trailer.flv" /></video>
# video_tag(["trailer.ogg", "trailer.flv"] :size => "160x120") # =>
# <video height="120" width="160"><source src="trailer.ogg" /><source src="trailer.flv" /></video>
def video_tag(sources, options = {})
options.symbolize_keys!
options[:poster] = path_to_image(options[:poster]) if options[:poster]
if size = options.delete(:size)
options[:width], options[:height] = size.split("x") if size =~ %r{^\d+x\d+$}
end
if sources.is_a?(Array)
content_tag("video", options) do
sources.map { |source| tag("source", :src => source) }.join
end
else
options[:src] = path_to_video(sources)
tag("video", options)
end
end
def self.cache_asset_timestamps
@@cache_asset_timestamps
end
@@ -8,7 +8,8 @@ module Helpers #:nodoc:
module TagHelper
include ERB::Util
BOOLEAN_ATTRIBUTES = %w(disabled readonly multiple checked).to_set
BOOLEAN_ATTRIBUTES = %w(disabled readonly multiple checked autobuffer
autoplay controls loop).to_set
BOOLEAN_ATTRIBUTES.merge(BOOLEAN_ATTRIBUTES.map {|attr| attr.to_sym })
# Returns an empty HTML tag of type +name+ which by default is XHTML
@@ -138,11 +138,38 @@ def teardown
%(image_tag("error.png", "size" => "45 x 70")) => %(<img alt="Error" src="/images/error.png" />),
%(image_tag("error.png", "size" => "x")) => %(<img alt="Error" src="/images/error.png" />),
%(image_tag("http://www.rubyonrails.com/images/rails.png")) => %(<img alt="Rails" src="http://www.rubyonrails.com/images/rails.png" />),
%(image_tag("http://www.rubyonrails.com/images/rails.png")) => %(<img alt="Rails" src="http://www.rubyonrails.com/images/rails.png" />),
%(image_tag("mouse.png", :mouseover => "/images/mouse_over.png")) => %(<img alt="Mouse" onmouseover="this.src='/images/mouse_over.png'" onmouseout="this.src='/images/mouse.png'" src="/images/mouse.png" />),
%(image_tag("mouse.png", :mouseover => image_path("mouse_over.png"))) => %(<img alt="Mouse" onmouseover="this.src='/images/mouse_over.png'" onmouseout="this.src='/images/mouse.png'" src="/images/mouse.png" />)
}
VideoPathToTag = {
%(video_path("xml")) => %(/videos/xml),
%(video_path("xml.ogg")) => %(/videos/xml.ogg),
%(video_path("dir/xml.ogg")) => %(/videos/dir/xml.ogg),
%(video_path("/dir/xml.ogg")) => %(/dir/xml.ogg)
}
PathToVideoToTag = {
%(path_to_video("xml")) => %(/videos/xml),
%(path_to_video("xml.ogg")) => %(/videos/xml.ogg),
%(path_to_video("dir/xml.ogg")) => %(/videos/dir/xml.ogg),
%(path_to_video("/dir/xml.ogg")) => %(/dir/xml.ogg)
}
VideoLinkToTag = {
%(video_tag("xml.ogg")) => %(<video src="/videos/xml.ogg" />),
%(video_tag("rss.m4v", :autoplay => true, :controls => true)) => %(<video autoplay="autoplay" controls="controls" src="/videos/rss.m4v" />),
%(video_tag("rss.m4v", :autobuffer => true)) => %(<video autobuffer="autobuffer" src="/videos/rss.m4v" />),
%(video_tag("gold.m4v", :size => "160x120")) => %(<video height="120" src="/videos/gold.m4v" width="160" />),
%(video_tag("gold.m4v", "size" => "320x240")) => %(<video height="240" src="/videos/gold.m4v" width="320" />),
%(video_tag("trailer.ogg", :poster => "screenshot.png")) => %(<video poster="/images/screenshot.png" src="/videos/trailer.ogg" />),
%(video_tag("error.avi", "size" => "100")) => %(<video src="/videos/error.avi" />),
%(video_tag("error.avi", "size" => "100 x 100")) => %(<video src="/videos/error.avi" />),
%(video_tag("error.avi", "size" => "x")) => %(<video src="/videos/error.avi" />),
%(video_tag("http://media.rubyonrails.org/video/rails_blog_2.mov")) => %(<video src="http://media.rubyonrails.org/video/rails_blog_2.mov" />),
%(video_tag(["multiple.ogg", "multiple.avi"])) => %(<video><source src="multiple.ogg" /><source src="multiple.avi" /></video>),
%(video_tag(["multiple.ogg", "multiple.avi"], :size => "160x120", :controls => true)) => %(<video controls="controls" height="120" width="160"><source src="multiple.ogg" /><source src="multiple.avi" /></video>)
}
def test_auto_discovery_link_tag
AutoDiscoveryToTag.each { |method, tag| assert_dom_equal(tag, eval(method)) }
@@ -272,6 +299,18 @@ def test_image_tag_windows_behaviour
end
end
def test_video_path
VideoPathToTag.each { |method, tag| assert_dom_equal(tag, eval(method)) }
end
def test_path_to_video_alias_for_video_path
PathToVideoToTag.each { |method, tag| assert_dom_equal(tag, eval(method)) }
end
def test_video_tag
VideoLinkToTag.each { |method, tag| assert_dom_equal(tag, eval(method)) }
end
def test_timebased_asset_id
expected_time = File.stat(File.expand_path(File.dirname(__FILE__) + "/../fixtures/public/images/rails.png")).mtime.to_i.to_s
assert_equal %(<img alt="Rails" src="/images/rails.png?#{expected_time}" />), image_tag("rails.png")
@@ -284,7 +323,7 @@ def test_timebased_asset_id_with_relative_url_root
ensure
ActionController::Base.relative_url_root = ""
end
def test_should_skip_asset_id_on_complete_url
assert_equal %(<img alt="Rails" src="http://www.example.com/rails.png" />), image_tag("http://www.example.com/rails.png")
end

2 comments on commit 51d7b30

@eric1234

This comment has been minimized.

Show comment
Hide comment
@eric1234

eric1234 Jul 3, 2009

Contributor

Real nice. I can already see someone monkey-patching this in a plugin to look at the user agent headers and send back a flash video if using a legacy browser and a video tag if using a grade A browser. But the developer wouldn't really have to care. They would just use the video helper.

Contributor

eric1234 replied Jul 3, 2009

Real nice. I can already see someone monkey-patching this in a plugin to look at the user agent headers and send back a flash video if using a legacy browser and a video tag if using a grade A browser. But the developer wouldn't really have to care. They would just use the video helper.

@tiegz

This comment has been minimized.

Show comment
Hide comment
@tiegz

tiegz Jul 15, 2009

Contributor

Although both solutions work, I disagree with bugmenot. I think the best way to vote is with your markup, so I purposely omitted a block on this helper. If you need to fallback, you could do it with JS.

Contributor

tiegz replied Jul 15, 2009

Although both solutions work, I disagree with bugmenot. I think the best way to vote is with your markup, so I purposely omitted a block on this helper. If you need to fallback, you could do it with JS.

Please sign in to comment.