I'm trying to use jPlayer to play an mp3. I have the jPlayer CSS and images working, now it's just a matter of playing the mp3. To do so, I include the following javascript in the application.html.erb layout's head:
<script type="text/javascript">
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: "media/sound.mp3",
// m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
// oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
});
},
swfPath: "/javascripts",
supplied: "mp3, m4a, oga"
});
});
When I load the page and click the play button, I get the following routing error:
ActionController::RoutingError (No route matches [GET] "/calls/media/sound.mp3")
Would someone mind taking a spare minute to explain to me why this is? Should I be including the javascript in something like this?
<%= javascript_tag 'some js code' %>
Any assistance is very much appreciated. Thanks in advance.
I realized I was I was missing a starting / i.e. changed "media/sound.mp3" to "/media/sound.mp3".
Then, I decided to use a path helper
Related
I did just a upgrade from RAILS 5 to RAILS 6 and I see that all rails views are not able to call a javascript function as before in RAILS 5.
I have an external javascript file located under
app/javascript/packs/station.js
This is is embeded in in app/views/layouts/application.html.erb as
<%= javascript_pack_tag 'station' %>
This is the code how I call the javascrpt function from html.erb file :
<%= text_field_tag(:station_text_field, ... ,
onkeyup: "javascript: request_stations(); ") %>
When I try to call a function thats is part of the station.js then I get an error in the browser developmer view: ReferenceError: request_stations is not defined
But I can also see in the brwoser view, under Debugger :
Webpack / app/javascript / packs / station.js
and the javascript function I want to call.
So it seems that this script was loaded by the browser.
In contrast, when I just copy and paste these few lines that represent this javascript function direct into the template view file (...html.erb), something like :
<script>
function request_stations ()
{
alert("calling request_stations");
};
</script>
then - it works as expected !
By default, variables/functions defined inside JavaScript files that are packed by Webpacker will not be available globally.
This is a good thing, because it prevents global naming conflicts. Generally speaking, you don't want to reference javascript functions/variables from your view. You instead want to write JavaScript in a way that attaches functionality to DOM nodes using their id or other attributes.
Here is a basic example based on the code you provided:
# in your rails view
<%= text_field_tag(:station_text_field, ..., id: 'station-text-field') %>
// in your javascript
function request_stations() {
alert("calling request_stations");
};
const stationTextField = document.querySelector("#station-text-field");
stationTextField.addEventListener('keyup', (event) => {
request_stations();
});
Agree with mhunter's answer.
This post helped me get a grounding on this difference in Rails 6: https://blog.capsens.eu/how-to-write-javascript-in-rails-6-webpacker-yarn-and-sprockets-cdf990387463
What I don't see in your question is whether or not you did this in app/javascript/packs/application.js:
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
require("station")
The big difference in Rails 6 is that you have to deliberately:
require a JS file
deliberately export something from that file
deliberately import that something, in the file where you want to use it.
So if there is a function in station.js that you want to use, connect the steps above. Start with a simple function in station.js that fires upon DOMContentLoaded, and add a console.log("hey, station.js is alive and well"). If you don't see it, then something in those 3 steps is not right.
In pre-Rails6, you had a "garden" of JavaScript, just by virtue of being in the asset pipeline. In Rails 6, you have to be more deliberate.
In my application, I have javascripts, with a refer to default.html. I.e.
function link() {
var url = '<%= asset_path("sidenav/default/default.template.html") %>';
}
This works, but, when I use the same to refer with asset_path in another file, i.e. a html (.html.erb of course, and last script, too is a .js.erb), I receive the error Sprockets::CircularDependencyError. A example of html
<a ng-href="<%= asset_path('sidenav/default/default.template.html') %>">Default</a>
If I dont use the reference to default in javascript, html works, but if I use the same refer in multiples files, this error occur.
Any help?
I am making a rails app where I want a fullscreen video in the background. Should I use html5 or .js to do this? If I'm going to use .js, is bigvideo.js any good even though there is no gem for it yet?
Add the jquery plugin Bigvideo.js to your JS folder.
require the plugin in your application.js file
call the plugin at the bottom of your <body> tag. This should prepare the page for the js, and then fire the function upon loading the page.
<script type="text/javascript">
$( document ).ready(function() {
$(function() {
var BV = new $.BigVideo();
BV.init();
BV.show('http://wherevideoislocated.mp4');
});
});
</script>
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.
I am trying to get jPlayer working with the flash fallback in a rails app and so far no luck! My constructor right now looks like this:
$("#jquery_jplayer_1").jPlayer({
preload: "auto",
errorAlerts: true,
swfPath: "javascripts",
solution: "flash, html",
supplied: "oga",
wmode: "window",
ended: function(e) {
...some function...
}
});
I cannot get the swfPath correct it seems, and I must be missing something here about how jPlayer is looking for that path. My other assets, such as images from stylesheets, seem to be correctly routed to the assets folder/images folder. I can't seem to find the magic combination to get jPlayer to find the Jplayer.swf. I have tried putting the swf file in the public folder, in a folder within the public folder, in the assets folder, and in the javascripts folder within the assets folder. No luck! Has anybody dealt with this problem before?
I have the same problem... After finding no answer on the Internet, I started trying stuff :)
This worked for me (Rails 3.2):
$(document).ready(function(){
$("#jplayer").jPlayer({
ready: function (event) {
$(this).jPlayer("setMedia", {
m4a: "url goes here"
});
},
swfPath: "/",
supplied: "m4a",
solution: "flash, html"
});
});
or in coffeescript:
$ = jQuery
$ ->
$(document).ready ->
$("#jplayer").jPlayer(
ready: (event) ->
$(this).jPlayer "setMedia",
m4a: "url goes here"
preload: "auto",
swfPath: "/",
solution: "html, flash",
supplied: 'm4a')
I placed the Jplayer.swf file under public/. Works now!
I think a nifty way of doing this is to add a swf dir to the asset pipeline.
You can do this by adding
config.assets.paths << Rails.root.join("app", "assets", "swf")
to your config/application.rb file and drop the Jplayer.swf file in vendor/swf/Jplayer.swf
In your JS file you import this by using .js.erb
$(document).ready(function(){
$("#jplayer").jPlayer({
swfPath: "<%= asset_path "Jplayer.swf" %>"
});
});
Since nobody has mentioned it here yet, you can also do it like this in your jplayer initialization code:
Works with Rails >= 3.2 that uses the asset pipeline!
swfPath: "<%= escape_javascript(asset_path('jplayer/Jplayer.swf')) %>",
solution: "flash,html",
supplied: "rtmpa,mp3",
And remember the file has a capital J :-)