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) %>
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
In my application, I want to view my .pdf file using Google Doc Viewer.
I am using Paperclip gem to upload file. In below code,
asset.uploaded_file.path will give file:///home/rick/rick/Projects/practice/sharebox/assets/137/Screenshot_from_2014-02-26_18_46_52.png
In my asset model,
has_attached_file :uploaded_file,
:url => "/assets/get/:id",
:path => "#{Rails.root}/assets/:id/:basename.:extension"
In my index.html file
#assets.each do |asset|
<iframe src="https://docs.google.com/viewer?url=http://localhost:3000/<%= asset.uploaded_file.path %>&embedded=true" width="100%" height="800" >
<p>Your browser does not support iframes.</p>
</iframe>
end
Using this above code i always get this error 'Apologies.
There is no preview available.'
If i will copy this file:///home/rick/rick/Projects/practice/sharebox/assets/137/Screenshot_from_2014-02-26_18_46_52.png and paste in new tab in browser, it will show image.
My assets is stored in the folder that is app_name/assets/id_name/filename.
So How i should pass path of my file to view using Google Viewer?
Thanks.
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.