How Do I Autoplay Vimeo Videos Without Sound?
Using video is a great way to get users on your website engaged with the content. And with video websites like Vimeo you can easily embed content onto your site without having to worry about uploading a large video file. When embedding a Vimeo video there are a handful of options for customization using their oEmbed API and it’s really easy to use by simply adding arguments to the end of the embed source string. If you’re going to use the API arguments, make sure that you enable the API before adding other arguments simply by adding the short string: “?api=1”
A somewhat common feature that is sought after is for videos to autoplay and play continuously. We can accomplish this by adding another string to our source after the enabling the API: “&autoplay=1&loop=1”
Now our source string should look something like this:
src=”https://player.vimeo.com/video/45819280?api=1&autoplay=1&loop=1″
Now our video will play automatically on page load and won’t stop playing until the user pauses it or leaves the page, which is great! But, more often than not, that video has sound playing. And when the user lands on your page, you don’t want to be blasting them with sound from a video that they didn’t start. This can cause a poor user experience and push people away from your site.
To avoid your beautiful video’s sound from scaring people away, we can use a little javascript to set the volume to 0. First, we must include a script from Vimeo’s CDN to allow us to manipulate the video player. Once included, we can write a small function that will listen for the video to be “ready” and set the volume to 0. To target that iframe we will also need to add one last string to the video source called: “&player_id=vimeo_player”
Now our source string should look something like this:
src=”https://player.vimeo.com/video/45819280?api=1&player_id=vimeo_player&autoplay=1&loop=1″
<script src="//f.vimeocdn.com/js/froogaloop2.min.js"></script>
<iframe id="vimeo_player" src="https://player.vimeo.com/video/45819280?api=1&player_id=vimeo_player&autoplay=1&loop=1" width="100%" height="150" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<script type="text/javascript">
var iframe = $('#vimeo_player')[0],
player = $f(iframe);
player.addEvent('ready', function() {
player.api('setVolume', 0);
});
</script>
How to Fix Text Links in the iPhone-Slide Plugin
On a previous post I told you all about this amazing plugin I found that would create a slider that takes advantage of the iPad’s touch and drag functionality.
However, if you didn’t use it just for images and had the slides contain text, you may have noticed that the links within the slides would not work. This plugin appears as it was mainly created to swipe through images, and not necessarily for content with text links.
I went into the plugin (jquery.iphone-slide.js) and changed a few things so it would do my bidding:
OLD CODE:
helpers.goto_url(thislink);
NEW CODE:
var thislink = $(event.target).parent("a").attr("href");
if(!thislink){var thislink = $(event.target).attr("href");}
if(thislink){
window.location(thislink); //similar behavior as clicking on a link
}
Turns out the __mouseup function was preventing the default action and the “helpers.goto_url” function only opened image links. But now it’s set up to do everything, Cheers!
How do I queue jQuery ajax requests
I was recently doing some javascript testing and needed to make some asynchronous (sequential) ajax requests for authentication, creating of records, etc. As with all good things jQuery, the solution to this problem is to install the plugin. The ajaxq plugin, that is.
Installation is as simple as including it in your code.
[script language="javascript" src="/js/jquery-1.6.2.min.js"][/script]
[script language="javascript" src="/js/jquery.ajaxq.js"][/script]
Then calling the $.ajaxq method, which takes the queue name (use different names to run multiple asynchronous queues synchronously) and the settings object with the same parameters as jQuery’s ajax function.
$(function() {
//Login, then logout
$.ajaxq("queue", {
url: '/api/user/login',
type: "POST",
data: {
username: "username",
password: "password"
},
success: function(data) {
document.write("Logged in...
");
}
});
$.ajaxq("queue", {
url: '/api/user/logout',
type: "POST",
success: function(data) {
document.write("Logged out...
");
}
});
});
And finally, an example which runs two queues simultaneously:
$(function() {
//Login, then logout
$.ajaxq("one", {
url: '/api/requestone',
type: "POST",
success: function(data) {
document.write("Request one queue 'one'...
");
}
});
$.ajaxq("two", {
url: '/api/user/logout',
type: "POST",
success: function(data) {
document.write("Request 1 queue 'two'...
");
}
});
$.ajaxq("two", {
url: '/api/user/logout',
type: "POST",
success: function(data) {
document.write("Request 2 queue 'two'...
");
}
});
});
Output could either be
Request 1 queue 'two'...
Request 2 queue 'two'...
Request 1 queue 'one'...
or
Request 1 queue 'one'...
Request 1 queue 'two'...
Request 2 queue 'two'...
Adding an exit animation to ::Featured Content Glider
Dynamic Drive has a really useful script called Featured Content Glider.
My only complaint was that the layer kept overlapping the previous one instead of a nice flow by having the previous animate out while the new slide animated in.
So what I did was add some lines to the featuredcontentglider.js
1) add “var startingvar = 0;” after “jQuery.noConflict()”
It created a variable that I found useful to know exactly what slide I was on.
2) the if statement following “//Test for toggler not being initialized yet, or user clicks on the currently selected page):” should be replaced with the following if statement:
//Test for toggler not being initialized yet, or user clicks on the currently selected page):
if (config.$togglerdiv.attr('lastselected')==null || parseInt(config.$togglerdiv.attr('lastselected'))!=selected){
var $selectedlink=config.$toc.eq(selected)
config.nextslideindex=(selected<config.$contentdivs.length-1)? selected+1 : 0
config.prevslideindex=(selected==0)? config.$contentdivs.length-1 : selected-1
config.$next.attr('loadpage', config.nextslideindex+"pg") //store slide index to go to when "next" link is clicked on
config.$prev.attr('loadpage', config.prevslideindex+'pg')
if (startingvar != 0){
var $previous=config.$contentdivs.eq(config.prevslideindex)
var startpoint=(config.leftortop=="left")? {left:0} : {top:0} //animate it into view
$previous.css(config.leftortop, startpoint).css("zIndex", this.csszindex)
var endpoint=(config.leftortop=="left")? {left:-config.startpoint} : {top:-config.startpoint} //animate it into view
$previous.animate(endpoint, config.speed)
}
startingvar++;
var startpoint=(isprev=="previous")? -config.startpoint : config.startpoint
$target.css(config.leftortop, startpoint).css("zIndex", this.csszindex++) //hide content so it's just out of view before animating it
var endpoint=(config.leftortop=="left")? {left:0} : {top:0} //animate it into view
$target.animate(endpoint, config.speed)
config.$toc.removeClass('selected')
$selectedlink.addClass('selected')
config.$togglerdiv.attr('lastselected', selected+'pg')
}
And that is pretty much it. This makes the current slide animate out while the new slide comes in. I think this creates a more friendly rotating feature that is less disruptive to the user experience.
How do I Escape Javascript in XHTML for Validation
I’ve been doing some W3C validation lately and needed to look up how to escape javascript in documents with an XHTML transitional DTD. Here goes:
<script language="javascript" type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
//jQuery (or other javascript) fun goes here!!
});
/* ]]> */
</script>