Tag Archives: Tutorials

How to Save Wistia Video Player Speed in Local Storage with JavaScript, the Wistia API (and WordPress)

I love Wistia, the professional video hosting company with amazing stats.  I have used them since early on and host all the JavaScript for WordPress videos with them.

They have had an API for a while that lets you control player speed.  Recently, they updated their player  and added speed control right into the controls.

Wistia Video Player Speed

Video Speed Built into Wistia Player

However, there is no caching mechanism for this, so users have to reset the player speed for each video.  This requires 3 clicks, can be a bother, and takes away from the learning experience.

So… this being a JavaScript course and us having covered local storage, I decided to write a little custom code to listen for changes to player speed and save the latest speed in local storage.

Then, when any video on the site loads, it first checks if there is a speed saved in local storage and sets the player speed.

The Basic JavaScript Code

Here is the basic code I used to get this working.  I tried to comment it pretty well so it makes sense what is happening.

// Get the Wistia Player
window._wq = window._wq || [];

// Apply to all Wistia Videos
_wq.push({ id: "_all", onReady: function( video ) {

	// Get speed from local storage
	var localStorePlayerSpeed = JSON.parse( localStorage.getItem( 'video_speed' ) );

	// If local storage speed exisits, set player speed
	if ( localStorePlayerSpeed !== null ) {
		video.playbackRate( localStorePlayerSpeed );
	}

	// Listen for changes in player speed
	video.bind("playbackratechange", function( playerSpeed ) {

		// Save the updated player speed to local storage
	  	localStorage.setItem( 'video_speed', JSON.stringify( playerSpeed ) );

	});
}});

You should be able to just drop this JavaScript into one of your JS files and have it work.

Enqueuing Our JS for WordPress

Since I am using this with WordPress I also have to enqueue this code into my functions.php file.  I would ideally like to release this as a little plugin, but for now adding it to my theme works.

Here is the code I added to my theme functions.php file:

function wistia_customizations() {
	wp_enqueue_script( 'wistia-player', get_stylesheet_directory_uri() . '/js/wistia-player.js', array(), 1.1, true);
}
add_action( 'wp_enqueue_scripts', 'wistia_customizations' );

Of course then I would have my JavaScript in the first code snippet in a file named wistia-player.js.

Taking it Further

Although this does work for my purposes, if a user switches computer or goes from watching on the desktop to mobile it will not remember their last setting.

Taking is one step further could involve saving the player speed as User Meta Data using the REST API.

I’ll hopefully tackle this and release this feature as a little no configuration plugin at some point before the JavaScript for WordPress Master Course is complete.

If you use this or something similar or have faced this problem, please let me know what direction you went!

 

 

Learn WP from Static HTML to Custom Theme

Rock on to the folks at WP Tuts for staying up to date on publishing WordPress theme tutorials!

Here is the latest in their series:

  1. Creating a WordPress Theme From Static HTML: Preparing the Markup
  2. Creating a WordPress Theme From Static HTML: Creating Template Files
  3. Creating a WordPress Theme From Static HTML: Uploading Your Theme to WordPress

Thanks Rachel for your great work!

New WordPress Theme Functions Video Tutorials on Treehouse

badges_WP_Theme_Stage3I’m very excited to announce that my latest WordPress videos are up on Treehouse for the How to Build a WordPress Theme  project.  The latest stage is called WordPress Theme Functions.

Here are some of the things we cover:

  1. WordPress Variables, Tags and Functions
  2. An overview of the WordPress Loop
  3. How to code the WordPress Loop
  4. Adding dynamic menus
  5. Using WP_Query to display custom post types

If you’re a member, let me know what you think in the Treehouse Forums or sign up with a 50% discount!