I'm developing a ruby on rails application, and would simply like there to be a button on one of my tables' show.html.erb pages that plays a single audio file. The html.erb file below will do all of this flawlessly when it's opened manually in firefox, but not when it gets called by my rails server. Instead there is no autoplay, and the button shows up but does nothing when you click it.
<!DOCTYPE html>
<html>
<head>
</head>
<button onclick="playAud()" type="button">Play</button>
<audio id = "audio" autoplay>
<source src= 'my audio.mp3' type="audio/mpeg">
</audio>
<script>
var audio = document.getElementById("audio");
function playAud() {
audio.play();
}
</script>
</body>
</html>
Also, when I add the controls command to the html audio tag, I sometimes see the controls flash briefly on the screen then disappear.
In my final html.erb I will be using a lot of controller-created variables and such, but right now I'm just trying to get this simple issue resolved. My controller's show method is all commented out at the moment.
How can I get this audio button to work?
When I go to the rails server on the console, I see this at the end of the list of actions performed:
Started GET "/phrases/my%20audio.mp3" for 127.0.0.1 at 2015-03-24
17:29:21 -0600 Processing by PhrasesController#show as
Parameters: {"id"=>"my audio"} Rendered phrases/show.html.erb within
layouts/application (0.9ms)
So it looks like the server is recognizing 'my audio.mp3' as a parameter it needs to "GET" for some reason... no idea why it would do that.
Figured it out! I haven't been using the only default asset folder (still don't know how to add more, but I'll figure it out eventually), which is (duh) the "public" folder. When I placed my audio in the public folder and changed the source of the audio to '/my audio.mp3', it worked!
<audio autoplay>
<source src='/my audio.mp3' type="audio/mpeg">
</audio>
I'm so glad that's over... so painful!
Your code works fine if you put your media file into same dir as your html then update code to find it as
<source src= 'your_audio.mp3' type="audio/mpeg">
Avoid full path to a location outside visability of a web server (security restrictions prevent web server from seeing files in arbitrary locations) ... once working identify more appropriate media dir as defined by web server config
Related
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
I am using TCPDF library to generate some reports, and i want to send the PDF file to print option of browser as simple we press CTRL+P, I need this because it is slip.
I used all parameter for Output but it is downloading the file directly.
$pdf->Output('slip.pdf', 'I');
I also placed the F,D,S,E,FI and FD instate of I but it doesn't work. And I also used header
header('Content-Type: application/pdf');
$pdf->Output('example_001.pdf', 'FD');
but again it doesn't work. Any solution? Please!
Add
$pdf->IncludeJS("print();");
just before $pdf->Output...
You need something like the example below. You would need to intercept print request (print automatically on page load, print button click, etc.) and then call printTrigger function.
<html>
<head>
<title>Print PDF</title>
<script>
function printTrigger(elementId) {
var getMyFrame = document.getElementById(elementId);
getMyFrame.focus();
getMyFrame.contentWindow.print();
}
</script>
</head>
<body>
<iframe id="iFramePdf" src="http://pdfurl.com/sample.pdf"></iframe>
...
</body>
</html>
What you are trying to do is not within the specification of the TCPDF API.
http://www.tcpdf.org/doc/code/classTCPDF.html#a3d6dcb62298ec9d42e9125ee2f5b23a1
I believe you would need to use JavaScript to implement this feature the way you are proposing.
Add $pdf->IncludeJS("print();"); just before $pdf->Output...
It's working for me.
I need to play some alert in my project. Is there any gem for it? Right now I am doing this using html5 and jquery. My code is
<audio id="mysoundclip" preload="auto">
<source src="http://www.wav-sounds.com/cartoon/bugsbunny1.wav"></source>
</audio>
<script>
$(document).ready(function() {
var audio = $("#mysoundclip")[0];
console.log(audio);
$(".post-comment-button").click(function() {
audio.play();
});
</script>
This is working just fine. But If use any sound file from my assets/audios folder the sound don't play because no route found for the file. I tried this
<source src="/assets/test.mp3">
How can I solve this? Do I have to create a controller for this and then add in the route file or I can do this without creating a contoller?
You could just place it directly in the public folder. Or create a 'sounds' subfolder there. Everything in public can be directly accessed. Assets are more for things that need some preprocessing and he results of this then are made available.
Trying to setup a test page that access a video hosted on S3 and streamed using CloudFront. The player I'm using is JWPlayer, which is supposed to work with iOS devices as well.
Unfortunately, nothing happens when I open it on the iPhone... I'm sure the answer is obvious, but it has eluded me for the last hour. Here's the code (mostly a copy/paste from http://aws.amazon.com/articles/4101?_encoding=UTF8&jiveRedirect=1):
<!-- THIS IS A BASIC HTML FILE TO PLAY MP4's USING JW PLAYER
The following code is from longtailvideo.com's 'Setup Wizard', found at http://www.longtailvideo.com/support/jw-player-setup-wizard -->
<HTML>
<HEAD>
<TITLE>
Streaming Video with JW Player
</TITLE>
</HEAD>
<BODY>
<!-- Put a header above your video, if you like
-->
<H1>This is my header</H1>
<script type='text/javascript' src='http://s3.amazonaws.com/intrinseque-video/swfobject.js'></script>
<div id='mediaspace'>This text will be replaced</div>
<script type='text/javascript'>
var so = new SWFObject('http://s3.amazonaws.com/intrinseque-video/player.swf','mpl','470','290','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('file','mp4:oceans-clip.ipad.mp4');
so.addVariable('streamer','rtmp://s1m21pqfl8vlrl.cloudfront.net/cfx/st/');
so.write('mediaspace');
</script>
</BODY>
</HTML>
<!--Common problems:
- You cannot have any spaces in any of your URL's (including your 'rtmp://...' URL) (i.e., http:// thereisaspaceatthebeginninghere.xxx)
- Be sure you are calling the correctly numbered version of the flowplayer objects/players (i.e. flowplayer-3.2.2.swf
- You cannot have duplicates of 's3.amazonaws.com' or 'cloudfront.net' in the same address (i.e. (http://s3.amazonaws.com/s3.amazonaws.com/YOUR_BUCKET/player.swf)
- There is a different naming protocol for mp4 vs flv files. For .mp4 files, YOU MUST write it as 'mp4:YOUR_VIDEO_FILE_WITHOUT_THE _MP4_SUFFIX'. For .flv files, you simply write the name of the file, 'YOUR_VIDEO_FILE_WITHOUT_THE_FLV_SUFFIX'.
-->
Check out http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/49/using-cloudfront
You need to add something along the lines of:
modes: [{
type: "flash",
src: "/assets/player.swf"
},{
type: "html5"
config: {
file: "http://dXXXXXXXXXXXX.cloudfront.net/example.mp4"
provider: "video"
}
}],
to the code for it to handle correctly both flash and html5.
Actually, not all mp4 files are born equal. Ones converted with weird encoders/codecs sometimes don't work on IOS. I had a case where, handbreak encoded mp4 didn't play, while ffmpeg encoded same video streamed perfectly.
I never understood what exactly was the difference. Maybe something to do where you place video metadata insdie the file.
My boss wants the following:
Requirements: Stream m4v videos from our Web-server to clients including standard web browsers (IE7, FF, Chrome, etc) and iPad!
I'm not really sure why he wants m4v...he mentioned efficiency but it may also have to do with iPad compatibility?? Anyway, I'm stuck with m4v.
I've browsed some related questions on SO, and this page is very useful as well:
http://henriksjokvist.net/archive/2009/2/using-the-html5-video-tag-with-a-flash-fallback
So if I understand correctly, HTML5 with <video> tag will take care of all my requirements (browsers & iPad) except IE up to and including IE8.
So in my code:
<div id="demo-video-flash">
<video id="demo-video" poster="snapshot.jpg" controls>
<source src="video.m4v" type="video/mp4" /> <!-- MPEG4 for Safari -->
<source src="video.ogg" type="video/ogg" /> <!-- Ogg Theora for Firefox 3.1b2 -->
</video>
</div>
<script type="text/javascript">
$(document).ready(function() { // ... a dash of jQuery.
var v = document.createElement("video"); // Are we dealing with a browser that supports <video>?
if ( !v.play ) { // If no, use Flash.
var params = {
allowfullscreen: "true",
allowscriptaccess: "always"
};
var flashvars = {
file: "video.f4v",
image: "snapshot.jpg"
};
swfobject.embedSWF("player.swf", "demo-video-flash", "480", "272", "9.0.0", "expressInstall.swf", flashvars, params);
}
});
</script>
As the link above explains, test if the browser supports <video>, and if not, fall back to flash. If the browser supports <video>, I don't need to worry about the player as the browser handles that. If it doesn't support <video>, I need to provide:
(a) A flash player.
(b) A flash-compatible copy of my .m4v video
Questions:
1) Will this solution work for my requirements?
2) Is .m4v a good format to stream to iPad? (I'm guessing yes as it's an Apple proprietary format!)
3) Is .m4v "flash-comatabile"? That is, if I send it to my flash player will it work? I've read conflicting reports on this. If it's not, then I guess I need to have a copy of my video converted to a flash-compatable format...any recommendations? (.f4v seems common but we already have a .mov file will that work?)
4) Last but not least, what's a good flash player. I'm leaning toward flowplayer (http://flowplayer.org/), however, we already have a swf player installed (http://code.google.com/p/swfobject/). Seems this latter one would work...any advantages to one or the other??
Apologies if some parts of this question don't make sense...there's alot of info about video out there and it's hard to piece it all together...hoping some answers here may help. I can refine my question as needed.
Thanks in advance!
Peter
As far as I know..., IE does not support HTML5 so the tag would be unrecognized in IE...