I'm trying to embed a video in my rails app with this code
<%= video_tag('greeting.mp4', controls: true, class: 'tnit-about-video') %>
In Chrome and Firefox everything works fine, but on Safari in Mac and general on iOS the video doesn't play.
I read on SO that the video should have certain dimensions and bitrate etc. and converted it accordingly, but it was no use.
Also tried webm instead of mp4.
In general I am open to use a different free solution than the standard rails video tag, if anyone can suggest a good videoplayer.
By default, files are loaded from public/videos. To load from assets/video add the following line to your config/application.rb file. So add this line to your application.rb.
config.assets.paths << "#{Rails.root}/app/assets/videos"
Try this code
<video loop autoplay controls="true" width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>
OR
using rails tags
<%= video_tag (["movie.mp4", "movie.ogg", "movie.webm"] :size => "320x240", :controls => true, :autobuffer => true) %>
Related
I have a rails application which use Paperclip gem to upload the videos and paperclip-av-transcoder gem to convert the format and size of videos.
Currently, I use
video_tag vod.video(:sd), controls: true, type: "video/mp4", size: "400x400"
to display the videos, but It can only display one format.
Therefore, I want to use JW Player to display the videos. But I didn't find the user guide in the official website. Even I cannot find the download link.
So how to use the jwplayer in my app? What html code and javascript code I should write in my html file?
Note: #vod is the model of video, #vod.video is the attribute to store the video
Reference:
Gem jwplayer-rails
Customization Reference:
Add this line to your application's Gemfile:
gem 'jwplayer-rails'
First include assets on the page
<%= jwplayer_assets %>
Than place a div with JW Player
<%= jwplayer %>
You can pass options to jwplayer helper to customize it:
<%= jwplayer({file: vod.video(:sd), width: 500, height: 200}) %>
User JwPlayer without gem:
html:
<div id='myElement'>Loading the player ...</div>
jquery:
<script type='text/javascript'>
var playerInstance = jwplayer('myElement');
playerInstance.setup({
file: '/uploads/example.mp4',
image: '/uploads/example.jpg'
});
</script>
Link to setup start guide.
I am trying to add subtitles to a video on my Rails-powered website using "video_tag" (http://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html#method-i-video_tag). This returns a HTML5 video tag. To add subtitles, though, you need to add a sub-node to the HTML5 tag as described here:
https://developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video:
<video id="video" controls preload="metadata">
<source src="video/sintel-short.mp4" type="video/mp4">
<source src="video/sintel-short.webm" type="video/webm">
<track label="English" kind="subtitles" srclang="en" src="captions/vtt/sintel-en.vtt" default>
</video>
The question is, how do I add another HTML tag through using Rails "video_tag" helper?
My current code is as follows:
<%= video_tag Video.last.file , size: "850x450", controls: true %>
And this generates the following HTML5 video tag:
<video controls="controls" width="850" height="450" src="/uploads/video/file/14/blah_blah.mp4"></video>
Not sure how I can fit in <track> tag inside Rails "video_tag". If I add another parameter to the helper, this simply produces another src HTML tag, and adding that as an option to the "video_tag" produces a HTML attribute, but not a child node.
I can obviously work around that by placing HTML code directly in my ERB template, but my assumption was that Rails "video_tag" helper should support this somehow.
Any help is appreciated. Thanks!
You can only pass sources without any attributes in video_tag:
video_tag(["trailer.ogg", "trailer.flv"], size: "160x120")
# => <video height="120" width="160"><source src="/videos/trailer.ogg" /><source src="/videos/trailer.flv" /></video>
Rails source code:
if sources.size > 1
content_tag(type, options) do
safe_join sources.map { |source| tag("source", :src => send("path_to_#{type}", source)) }
end
else
options[:src] = send("path_to_#{type}", sources.first)
content_tag(type, nil, options)
end
So HTML workaround is the only way to solve this.
I believe there is an HTML5 tag called track. Not really sure how to implement, I just started reading about this now.
https://www.w3schools.com/tags/tag_track.asp
Upload video using paperclip-ffmpeg.
It save fine.But when I show it on browser it shown but not play.It gvies error on video
Video format or MIME type is not supported
Showing video like this
<%= video_tag #ad.videod.url(:medium), controls: true, type: "video/flv", size: "640x480" %>
HTML <video> tag (and thus the Rails video_tag) does not support video/flv format. You need to use some Flash-based player to play it. Or, better, transcode the video to MP4 or OGG format.
I'm trying to use JW-Player in my application. Researching the issue a bit, there seems to be several abandoned efforts to produce a gem, and the latest is undocumented. So, here's how I'm going about it:
I downloaded the JW-Player version 6, unzipped and copied the files in my /app/assets/javascripts directory as follows:
app/assets/javascripts/jwplayer/jwplayer.js
app/assets/javascripts/jwplayer.html5.js
app/assets/javascripts/jwplayer.flash.swf
In my app/views/layouts/application.html.erb, I have the following:
<head>
<%= javascript_include_tag "/assets/javascripts/jwplayer/" %>
</head>
and in app/views/pages/about.html.erb, I have the following:
<%= jw_player("http://xxxxx/video.mp4",
:width => 200, :height => 110) %>
Here's what happens when I click on the About page link:
Showing xxxxxxxx/app/views/pages/about.html.erb where line #10 raised:
undefined method `jw_player' for #<#<Class:0x007fe77e37c018>:0x007fe780c1f678>
First time user of JW-Player.
When implementing JWPlayer 6.6, we stood before the choice of putting the jwplayer.flash.swf file into the public folder, to make the flash mode work, but it seemed very messy to have the files separated like that. What I did in the end to make it work both on development and production was:
Put all 3 files to vendor/assets/javascripts/jwplayer
Rename jwplayer.js to jwplayer.js.erb
Inside jwplayer.js.erb, update the flash file path config like this (the 1st line with the html5 file path config is just for reference)
j={type:"html5",src:e.base+"jwplayer.html5.js"},
b={type:"flash",src:"<%= asset_path('jwplayer/jwplayer.flash.swf') %>"};
(note that the "e.base+" before the path was removed for the flash file path - that's the trick that allowed working relative paths in the development environemtn)
In my understanding, the JWPlayer license allows modifications like this:
"Adaptations
Publisher shall be permitted to make Adaptations reasonably necessary for the purpose of exercising its rights under these Terms of Service, such as Adaptations to integrate the Products into Publisher’s websites or other properties. All Adaptations created by Publisher are strictly for its own Use and Publisher is prohibited from Distributing any Adaptation it creates. The Company reserves the right to prohibit the Use of any Adaptation in its sole discretion."
I have just finished working on a gem started by choix and improved by mattherick called jwplayer-rails that probably worked in older version of rails. It wasn't working with the assets pipeline but mattherick did a great job at fixing that up and I went on to update JWPlayer to the newest version.
You can see the repository here.
The following instructions are right out of the repo above.
To add this gem to your rails app just add this line to your application's Gemfile:
gem 'jwplayer-rails', :git => 'git://github.com/dutgriff/jwplayer-rails.git'
To use it first include assets on the page
<%= jwplayer_assets %>
Then place a div with JW Player
<%= jwplayer %>
You can pass options to jwplayer helper to customize it:
<%= jwplayer({width: 500, height: 200}) %>
More information for customization could be found here.
It works great for me so far but if you find an issue let me know on here or github.
I've found a solution to this.
The main issue you need to work-around is that jwplayer.js wants to fetch jwplayer.flash.swf and jwplayer.html5.js based on the path of jwplayer.js.
You can see that in Chrome Developer Toolbar for jwplayer.js (with pretty print):
(h.embed.config = function(b) {
var e = {fallback: !0,height: 270,primary: "html5",width: 480,base: b.base ? b.base : j.getScriptPath("jwplayer.js"),aspectratio: ""};
b = j.extend(e, h.defaults, b);
var e = {type: "html5",src: b.base + "jwplayer.html5.js"},
g = {type: "flash",src: b.base + "jwplayer.flash.swf"};
You can use that base property as an undocumented api to tell jwplayer where the jwplayer.flash.swf and jwplayer.html5.js can be found.
Example:
jwplayer("player-id").setup({
width: 640,
height: 480,
file: "www.w3schools.com/html/movie.mp4",
base: "http://cloudfront.net/assets/vendor/jwplayer/"
};
Then it will look for http://cloudfront.net/assets/vendor/jwplayer/jwplayer.flash.swf. Note: jwplayer has no notion of the asset pipeline fingerprint filenames, so make sure you sync both the file with md5 and without.
This worked for me:
Place jwplayer folder in public (Downloaded from longtail video)
Include it like an external script, without using asset pipeline (HAML).
%script{:src => '/jwplayer/jwplayer.js'}
In your video partial (ERB)
<script type="text/javascript">
jwplayer.key="Your key here";
$(document).ready(function(){
jwplayer("video").setup({
height: 360,
width: 640,
playlist: [
<% videos.each do |v| %>
{
image: "<%= v.poster %>",
sources: [
{ file: "<%= v.url %>" },
]
},
<% end %>
]
});
})
</script>
<video id="video">Video Loading... Ensure JavaScript is enabled...</video>
Did you restart the server after downloading the player and including it in your layouts. This could be one reason of failure.
Download jwplayer from http://www.longtailvideo.com/jw-player/download/
Put these files to the particular directory:-
app/assets/jwplayer/jwplayer.flash.swf
vendor/assets/javascripts/jwplayer.js
vendor/assets/javascripts/jwplayer.html5.js
Then add these line in application.js
//= require jwplayer
//= require jwplayer.html5
On the page where you are playing video, add these lines
<script type="text/javascript">jwplayer.key="YOUR_JWPLAYER_KEY";</script>
<div id="video">Loading the player ...</div>
<script type="text/javascript">
jwplayer("video").setup({
flashplayer: "<%=asset_path('jwplayer.flash.swf')%>",
file: "<%= file_path %>",
height: 360,
width: 640,
analytics: {
enabled: false,
cookies: false
}
});
http://account.longtailvideo.com/#/home from where you can get your free self hosted key in signing up from Get Your License Key portion.
I also chose JWplayer.
Here are my steps.
I'm using https://github.com/choix/jwplayer-rails gem.
Added
gem 'jwplayer-rails', '1.0.1'
to my Gemfile.
Did all things from above page; in a show.html.slim view file included these lines:
= jwplayer_assets
br
br
= jwplayer({file:#lesson.media_file})
lesson.media_file attribute contains file location. For a video file project/public/videos/videoclip.webm, media_file contains string "/videos/videoclip.webm".
Hope this will be useful.
I am trying to display HTML5 video in my Rails 3 app in development,i am using Sqlite3 and default webserver(Webrick).I put the video file (movie.ogg) under assets (assets/movie.ogg).The video window screen shows up but there is no video on there though.I have 3 questions...Since rails app assets doesn't have sub-folder for video(as the way it has images),where do you put video files?
Does Webrick support Html5 video?Here is my code below ,what am i missing here,to make the video work?
view
<video width="320" height="240" controls="controls">
<source src="/assets/movie.mp4" type="video/mp4" />
<source src="/assets/movie.ogg" type="video/ogg" />
<source src="/assets/movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
config/initializers/mime_types.rb
Rack::Mime::MIME_TYPES.merge!({
".ogg" => "application/ogg",
".ogx" => "application/ogg",
".ogv" => "video/ogg",
".oga" => "audio/ogg",
".mp4" => "video/mp4",
".m4v" => "video/mp4",
".mp3" => "audio/mpeg",
".m4a" => "audio/mpeg"
})
The video_tag helper builds an HTML 5 <video> tag.
By default, files are loaded from public/videos. To load from assets/video add the following line to your config/application.rb file:
config.assets.paths << "#{Rails.root}/app/assets/videos"
Tag Usage:
<%= video_tag (["movie.mp4", "movie.ogg", "movie.webm"] :size => "320x240", :controls => true, :autobuffer => true) %>
The assets pipeline is used for static assets. If you're adding video files to your app often, you should put them somewhere else (for example, public/videos or public/system/videos). If they really are static assets, try restarting your server first.
Assuming your html is correct, unless things have dramatically changed in rails 3.1 with the asset pipeline anything contained in the public folder can be served up from the web server, so the exact location of where to store videos is up to you. According to your sources above you should put your videos in public/assets then confirm the videos are being served up by accessing http://localhost:3000/assets/movie.mp4 (or any other src url for a video).
To serve videos as static assets in Rails 4, the best way is to use the video tag:
Simply create a folder in 'assets' called 'videos' and store your videos there:
app/assets/videos/mycoolvideo.mp4
Then in your views:
<%= video_tag "mycoolvideo.mp4" %>
If you need to specify size, a poster image or add controls, add (but this is HTML, not Rails):
<%= video_tag "mycoolvideo.mp4", width: "640", height: "480", poster: "mycoolvideo.jpg", controls: true %>
Note that Rails cleverly knows that the image is in the image folder, so specifying a name is enough, without adding images/ or assets/images/ before the image name.
If you want to pass in many videos (or better said, the same video in different formats), pass an array:
<%= video_tag ["mycoolvideo.mp4", "mycoolvideo.ogg", "mycoolvideo.webm"], size: "620x480", controls: true %>
Note that for sizing you can either use size: "widthxheight" ("640x360") or separately height: and width: