Skip to content

Commit

Permalink
Adds a video_tag helper for the HTML5 video tag (similar to how the i…
Browse files Browse the repository at this point in the history 
…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
tiegz authored and Yehuda Katz + Carl Lerche committed Jul 2, 2009
1 parent 9eab435 commit 51d7b30
Show file tree
Hide file tree
Showing 3 changed files with 110 additions and 3 deletions.
67 changes: 67 additions & 0 deletions actionpack/lib/action_view/helpers/asset_tag_helper.rb
View file
Expand Up @@ -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.
#
Expand Down Expand Up @@ -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
Expand Down
3 changes: 2 additions & 1 deletion actionpack/lib/action_view/helpers/tag_helper.rb
View file
Expand Up @@ -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
Expand Down
43 changes: 41 additions & 2 deletions actionpack/test/template/asset_tag_helper_test.rb
View file
Expand Up @@ -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)) }
Expand Down Expand Up @@ -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")
Expand All @@ -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
Expand Down

1 comment on commit 51d7b30

@eric1234
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Please sign in to comment.