I am using jplayer to play a mp3 file, which is is on my local machine itself. But player is unable to play.
Here is my code.
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
//m4a: location1
oga: location2,
mp3: "http://172.17.4.45/test.mp3"
});
},
swfPath: "<?php echo $base;?>/jplayer/",
supplied: "m4a, oga, mp3"
});
How can I accomplish this. Please help me.
This should work:
Set up the player
jQuery("#jquery_jplayer_1").jPlayer({
swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
supplied: "mp3",
wmode: "window",
preload:"auto",
autoPlay: true,
errorAlerts:false,
warningAlerts:false
});
Load the track
jQuery("#jquery_jplayer_1").jPlayer(
"setMedia", {
mp3: "http://xxxx.rackcdn.com/"+track_id+".MP3"
});
Play it!
jQuery("#jquery_jplayer_1").jPlayer("play");
This should work. If not there must be someting with the filepaths.
Related
I'm using Ember App Kit with grunt and I'm trying to switch to Ember 1.10 and can't get HTMLBars working :/
TL;DR
After migration, I've got my HTMLBars templates lodaded in Ember.TEMPLATES but they're not visible either by Ember nor in App.__container.lookup.cache.
Details
The steps I did:
updated ember and ember-data
updated package.json ("grunt-ember-templates": "0.5.0")
updated my Gruntfile.js (grunt.loadNpmTasks('grunt-ember-templates') added a task emberTemplates)
passed the options to emberTemplates:
{
debug: [],
options: {
templateCompilerPath: 'vendor/ember/ember-template-compiler.js',
handlebarsPath: 'vendor/handlebars/handlebars.js',
templateNamespace: 'HTMLBars'
},
'public/assets/templates.js': [
'app/templates/**/*.hbs'
],
};
removed handlebars.js from index.html and replaced ember.js with ember.debug.js
Now, I've got my public/assets/templates.js file generated in a proper way, I had several compilation errors coming from ember-template-compiler, so this part, I assume, is working fine.
Lastly, in the app, I can see all my templates loaded in Ember.TEMPLATES variable but unfortunately, they're not accessible from App.__container__.lookup.cache or App.__container__.lookup('template:<template_name>').
The way I'm trying to render the template that throws an error is (and it's working with Ember 1.9):
export default AuthRoute.extend({
renderTemplate: function() {
this.render();
this.render('user-details', {
into: 'base',
outlet: 'profile',
controller: 'user-details'
});
}
});
What am I missing? Any help would be appreciated.
Bonus question: what is debug field in emberTemplates configuration? If I don't define it, it raises an error (Required config property "emberTemplates.debug" missing.) while compiling. Could that be a possible reason?
Bonus question 2: where should templates.js file go? The intuition tells me /tmp but then, even Ember.TEMPLATES is an empty object...
EDIT [SOLUTION]:
I missed templateBasePath: "app/templates" line in the emberTemplates options. Because of that, Ember.TEMPLATES object was sth similar to this:
{
"app/templates/base.hbs": {},
"app/templates/components/component.hbs": {}
}
instead of:
{
"base.hbs": {},
"components/component.hbs": {}
}
which is the format that Ember resolver (ember-application/system/resolver) in the resolveTemplate method expects.
EDIT: using grunt-ember-templates and this Gruntfile task, I got it working:
emberTemplates: {
options: {
precompile: true,
templateBasePath: "templates",
handlebarsPath: "node_modules/handlebars/dist/handlebars.js",
templateCompilerPath: "bower_components/ember/ember-template-compiler.js"
},
"dist/js/templates.js": ["templates/**/*.hbs"]
}
Differences seem to be precompile: true and point the handlebarsPath to the dependency in node_modules. Also the templateBasePath makes the ids like application instead of templates/application. Or in your case app/templates/application.
To answer your Bonus question 2, put templates.js after you load ember.js but before your app.js. Mine script includes look like this:
<script type="text/javascript" src="/bower_components/ember/ember.debug.js"></script>
<script type="text/javascript" src="/bower_components/ember/ember-template-compiler.js"></script>
<script type="text/javascript" src="/js/templates.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
====================================
EDIT: Ignore this newbness...
It seems like the grunt-ember-templates task is outdated, or its dependencies are outdated. Remove it. I was able to hack together this solution:
Use grunt-contrib-concat instead. The money is with the process option.
concat: {
dist: {
// other concat tasks...
},
templates: {
options: {
banner: '',
process: function(src, filepath) {
var name = filepath.replace('app/templates/','').replace('.hbs','');
var Map = {
10: "n",
13: "r",
39: "'",
34: '"',
92: "\\"
};
src = '"' + src.replace(/[\n\r\"\\]/g, function(m) {
return "\\" + Map[m.charCodeAt(0)]
}) + '"';
return 'Ember.TEMPLATES["'+name+'"] = Ember.HTMLBars.template(Ember.HTMLBars.compile('+src+'));\n';
}
},
files: {
'public/assets/templates.js': 'app/templates/**/*.hbs'
}
}
},
So the whole solution is as follows:
module.exports = {
debug: {
src: "app/templates/**/*.{hbs,hjs,handlebars}",
dest: "tmp/result/assets/templates.js"
},
dist: {
src: "<%= emberTemplates.debug.src %>",
dest: "<%= emberTemplates.debug.dest %>"
},
options: {
templateCompilerPath: 'vendor/ember/ember-template-compiler.js',
handlebarsPath: 'vendor/handlebars/handlebars.js',
templateNamespace: 'HTMLBars',
templateBasePath: "app/templates"
}
};
where all my templates reside in app/templates/ directory.
I'm still using:
<script src="/assets/templates.js"></script>
in index.html.
Maybe somebody will find it useful ;)
gulp.task('usemin', function () {
return gulp.src(path.src + '*.html')
.pipe(usemin({
assetsDir: 'src',
css: [ minifyCss(), 'concat', rev()],
js: [uglify(), rev()],
images: [rev()]
}))
.pipe(gulp.dest(path.dist));
});
It does not work on the images.
The philosophy of gulp-rev-all is to me a good way to see asset revisioning. It's very well explained in their Readme that the hash should also take into account the reference(s) between revisioned files.
I've mocked up a little example that minify an image and a css file which use a background url property to see the revision of the new image path.
gulp.task('image', function () {
return gulp.src('image.jpeg')
.pipe(img({ progressive: false }))
.pipe(gulp.dest('tmp'));
});
gulp.task('css', function () {
return gulp.src('test.css')
.pipe(css())
.pipe(gulp.dest('tmp'));
});
gulp.task('rev', ['image', 'css'], function () {
return gulp.src('tmp/**')
.pipe(rev())
.pipe(gulp.dest('dist'));
});
I've removed all the fancy stuff to be more clear, but you can see the whole example here.
I'm using Pjax in a site that I'm building, and after searching all over, I haven't been able to find a way to save custom data, for retrieving later.
This is my code:
var myData = {
tst1: "some value",
tst2: "some other value"
};
$(document).pjax('a[pjax]', '#content', { //id to be loaded into
fragment: '#content', //id to be loaded
timeout: 3000,
data: myData
});
When I try to log event.state.data on a "pjax:popstate" event, I get undefined.
$(document).bind("pjax:popstate", function(event) {
console.log(event.state.data);
});
Can someone tell me what I'm doing wrong please?
What are you actually trying to achieve here? pjax:popstate is a browser event for the forward/back button as per: https://github.com/defunkt/jquery-pjax#events and does not accept any options.
Syntax for options: $(document).pjax(delegation selector, container selector, options object).
Events under PJAX fire like this: fire('pjax:end', [xhr, options]), so accessing an option should work with options.option in your case:
$(document).bind("pjax_event", function(xhr, options) {
console.log(options.data);
});
Not tested, though. Would require more info.
I finally got PJAX all setup and working perfect on my Foundation 5 site and its time to add my page transitions. For some reason no matter what I try the page loads and then the transition happens.
Here is my website with with one of the transitions I tried
I've also tried simple things like:
$(document)
.on('pjax:start', function() { $('#main').fadeOut(200); })
.on('pjax:end', function() { $('#main').fadeIn(200); })
I also ran into aenism.com/teleportation-is-scary/ in my searches for a solution and its what I currently have running on my pages.
Here is an example of it working: Demo Site
I'm not sure what the problem could be at this point.
I found a solution that works perfect for fading out and back in again. I have not tested it with other animations but it looks like it should do the trick. I hope this helps someone else!
// USER CLICKS LINK WITH PJAX CLASS
$('body').delegate('a.pjax', 'click', function() {
// CONTENT FADE OUT TRANSITION BEGINS
$('#main-content').fadeOut(300, function() {
// CALLBACK TO RUN PJAX AFTER FADEOUT
$.pjax({
url: target,
container: '#main-content',
fragment: '#main-content'
})
})
// STOP THE LINK FROM WORKING NORMALLY
return false;
})
// PJAX DOIN THANGS TO THE CONTENT FRAGMENT IDENTIFIED ABOVE
$('#main-content')
.on('pjax:start', function() {
// KEEPING THE MAIN CONTENT HIDDEN
$(this).fadeOut(0)
})
.on('pjax:end', function() {
// FADE IN THE MAIN CONTENT
$(this).fadeIn(300)
// FUNCTIONS LOADED AGAIN AFTER PJAX ENDS GO HERE
})
WOOO That suggestion worked, had to tweak it a bunch to get it to fit with my page transitions, but this is what I ended up with (works off of css3 animations):
$("body").delegate('a[data-pjax]', 'click', function(event) {
var target = $(this).attr("href");
if (contentpage == "true" || errorpage == "true") { $(".contentimage").append('<div class="pjax-loading"></div>'); }
$("body").removeClass("pjax-fadeIn").addClass("pjax-fadeOut").one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$.pjax({url: target, container: '#content', fragment: '#content'});
});
return false;
})
$("#content").on('pjax:start', function() {
$("body").removeClass("pjax-fadeOut").addClass("pjax-hide");
}).on('pjax:complete', function() {
$("body").removeClass("pjax-hide").addClass("pjax-fadeIn");
});
I copied this login example for my own needs. It runs fine. But I am asking myself: why do I need the Ember.run.later(this, this._serverLogin, 100); line? Like the comment said it is only for simulating the delay. Ok. But if I change it to this:
// Create the login controller
MyApp.loginController = Ember.Object.create({
username: '',
password: '',
isError: false,
tryLogin: function() {
if(this.get('username') === MyApp.USERNAME &&
this.get('password') === MyApp.PASSWORD) {
this.set('isError', false);
this.set('username', '');
this.set('password', '');
MyApp.stateManager.send('loginSuccess');
} else {
this.set('isError', true);
MyApp.stateManager.send('loginFail');
}
},
});
without Ember.run.later(this, this._serverLogin, 100);, I get Uncaught Error: <Ember.StateManager:ember270> could not respond to event loginSuccess in state loggedOut.awaitingCredentials. So I thought probably I need this delay to get the stateManager changed before or somethign like that. But when I run the old code with Ember.run.later(this, this._serverLogin, 0); it still works. So, whats different? The documentation of ember didnt gave any hints.
It's because your StateManager is still in the early state setup process when calling a sendEvent (loginSuccess/loginFailed).
By delaying the event sending w/ Ember.run.later, your code is processed in a next run loop, and the state is properly setup.
That being said, you are using Ember in a very old fashion. You should have a look at the state-of-the-art way to manage app routes.