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.
Related
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
ffmepg and qtfaststart to process my video uploads. The converting is working fine and the video gets uploaded. My problem is that i can't display it. When I first tried <%= video_tag(#post.file.url) %> I just get a blank area. I've also tried jplayer, got the installation and all working and when i tried to call my video path it doesn't work.
Here is the js code when I tried with jplayer.
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4v: "<%= video_tag(#post.file.url) %>"
});
},
swfPath: "/",
supplied: "m4v",
solution: "flash, html"
});
});
</script>
I don't know how to call the uploaded video and display it, Please really need some help!
please always read the documentation. otherwise you will get comments a la RTFM.
when you use video_tag it inserts an html5 video element into the page. read about it here: http://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html#method-i-video_tag
<video src="/trailers/hd.avi" width="16" height="16" />
this is probably not what you want for your jPlayer. when you inspect the html source, this should be obvious. i did never use jPlayer, but i assume that it would like to be pointed to the streaming source, which i guess is #post.file.url in your case.
Im currently in the process of porting a completely static site using trigger io to convert it to an app. The site comprises of lots of folders in folders with index.html files in them to make the urls nice. The site uses absolute urls to include stylesheets, javascripts, on a tags, and images in every page.
I would like to set a root directory for trigger.io, but I cannot find any way of doing this. Is this even possible?
Cheers,
Rich
Edit:
Example:
<script src="/json.js" type="text/javascript"></script>
<img alt="Bar_hat" class="bar_hat" src="/assets/bar_hat-09efbabebef04dd368425a6b71badfa7.jpg" />
The script tag is in all of the files.
The img tag is used in 90% of the files. These are obviously not being found from within the app.
Copy your "assests" directory to the "src" directory and use without a "slash" before assets -
<img alt="Bar_hat" class="bar_hat" src="assets/bar_hat-09efbabebef04dd368425a6b71badfa7.jpg" />
Also, if you want to access via javascript you must use this pattern:
forge.file.getUrl("assets/bar_hat-09efbabebef04dd368425a6b71badfa7.jpg",
function(file) {
// If using zepto or jquery
$("#whateverImage").attr("src", file);
},
function(err) {
// error
}
);
Edit: getUrl vs getLocal
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...