Tag Archives: Video

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!

 

 

Marketing Video for WPSiteSync

I love the folks at ServerPress, who make DesktopServer.  So, I was super excited when they approached me to make a marketing video for their latest product: WPSiteSync.

This amazing plugin let’s you sync portions of content between WordPress sites without having to migrate entire databases.

If you have to migrate WP sites between local, staging, and live (or know you should) then I would highly recommended checking out WPSiteSync and staying tune to all the upcoming extensions.

How and Where I’ve Been (Re)Learning JavaScript

As I speed down the path to launch for my JavaScript for WordPress Master Course, I have been busily learning and relearning JavaScript anew.

Actually, I have worked with JS for a long time now and even taught college and high school JavaScript courses well before Treehouse.  However, JavaScript has come a long way in the last few years and I’d like to share and give thanks for all of the people and places I have been checking out to sharpen my skills and deepen my understanding.

 

First, A Thanks to Remkus and Wes

First, let’s all give thanks to Remkus de Vries for being the first person to really get a comprehensive study guide out to the community in response to Matt’s homework assignment.  Hopefully we’ve all read his Learning JavaScript in WordPress, Deeply article by now and took notes.

Others have written similar posts since then, but I particularly want to give a shout out to Wes Bos (an advisor to the course and an amazing JS trainer) who wrote an article with tons of resources for learning JavaScript.

 

You Don’t Know JS Book Series

Most of my re-learning of JavaScript has come from reading the series You Don’t Know JS.  This book is so good and really gets into the aspects of JavaScript that most people do not really take the time to learn.

This You Don’t Know JavaScript book series offers a contrary challenge: learn and deeply understand all of JavaScript, even and especially “The Tough Parts”.

Here, we address head on the tendency of JS developers to learn “just enough” to get by, without ever forcing themselves to learn exactly how and why the language behaves the way it does. Furthermore, we eschew the common advice to retreat when the road gets rough.

~ From the Preface of You Don’t Know JS: Up and Running, Kyle Simpson

I will likely make this book series pre-requisite / required reading for the course and will teach about all of the major topics it covers:

  1. Scope
  2. Closures
  3. this
  4. Object Prototypes
  5. Asynchronous programming
  6. Performance
  7. ES6 (ES7 and beyond)

So, big shout out to the You Don’t Know JS Book Series, which you can get for free on Github.  I’d suggest start reading it now if you’re interested in my JS for WP master course 🙂

More JavaScript Books

There are other books on JavaScript as well, but I have already read the Definitive Guide, The Good Parts as well as a number of others.

Here are a few other JS books that have caught my eye and I plan to read through before I finish the course:

 

Learning Via Videos

Lynda.com

A couple of weeks ago, a great member of the WordPress community, Roy Sivan (also an advisor to the course) launched a course on Lynda.com on Building a Single Page Application with AngularJS and WordPress.  That got me to sign up for a free account with Lynda.com so I could watch his course. Morten Rand-Hendriksen also teaches at Lynda and I checked out his courses on the REST API and Grunt and SASS.

Then, since I still had some time on my free account I proceeded to watch all of their intermediate and advanced JavaScript, Angular, React and Backbone courses as well 🙂

Udacity

Another online video site I heard about a lot while at Treehouse was Udacity.  I had never tried them before but I can say that they do have some great JS related content.  I signed up for a free account and checked out the following courses over there:

I liked the Udacity courses, the content was pretty good and not just introduction level JavaScript (although they have that too).  Shout out to Ben Jaffe, the instructor for most of those courses, I dig your style man 🙂

React For Beginners

Wes Bos has a series on React for Beginners.  Since React, Backbone and Angular are newer to me, I have been soaking up everything I can on these frameworks.  I highly recommend watching Wes’s course on React.  I went for the package that lets you download the videos and watch them offline.

EggHead.io

I had not heard of this site until reading Wes’ article that I link to above.  However, the site has so many videos on advanced JS topics that I couldn’t not sign up for a Pro account.

I am currently watching their videos on the following topics:

Frontend Masters

I found this site because Kyle Simpson, the author of You Don’t Know JS, mentioned above, offers several courses there on advanced JavaScript topics.  I have learned a lot from these folks and this is one of the better advanced learning sites out there.  Here are just a few of the great courses they have I’ve been watching:

Articles, Tutorials and More Websites

Once I started building out the actual projects for the JS for WP Master Course I realized (as we all do) that reading books and taking courses wasn’t enough and I had to dig deeper into specifics of the JS language, the WP API, and related frameworks.

In no particular order, I found these resources pretty helpful:

 

All of the JS for WP Master Course Advisors

I am so grateful for the list of 20+ advisors we have for the JS for WP Master Course.

When I taught at Treehouse I would occasionally ping experts with questions, but most of the courses were developed in isolation.  This course is completely different and I’m so much happier building a course with a panel of both technical advisors and experienced educators.

My meetings with the technical advisors mostly involves me picking their brains on specific things I don’t understand yet or just asking open ended questions and listening to them preach, ramble and often talk way over my head 🙂

The craft of an educator comes from an ability to learn something quickly and deeply, process it thoroughly, and reteach it to others in a way that makes sense and promotes the highest learning.  This is my skill and craft.  I also happen to know and love programming,  JS and WordPress, but I am first and foremost a teacher.

A huge thanks to the technical advisors who work with JS and the API on a day to day basis and have experience really getting into developing projects with the skills that the master course will cover.

To mention a few technical advisors specifically: Adam SilversteinBryce AdamsKevin StoverGeorge SephanisNoel TockBrent SheperdScott Bolinger and Josh Pollock.  Thanks folks!

I’ll write more in the future about the advisors (and the one’s with education experience in particular).

 

I Still Have A Lot To Learn

I have the utmost confidence, but I will also share it’s quite daunting to take on building a Masters level course on JavaScript for WordPress.

Most of my learning now has to do with the inner workings of Backbone, the changes in Angular2, how to best build with React and WordPress and the exciting changes with ES6.  Oh, and how to get Webpack working properly :p

Since the JS for WP Master Course will include Backbone, Angular and React projects, I am mostly learning through building at this point.

Shout out to the React and Angular WP admin boilerplates on Github and all of the people who have released Angular or React WP themes or projects.  I am trying to download and explore the code in everything I can find at this point.

 

How Have You Been Learning?

If you decide to wait to learn all of this stuff until my JS for WP Master Course comes out, I don’t blame you 😉

However, if you have been attempting to Learn JavaScript, Deeply on your own, I’d love to know about some of the resources you have found helpful.

If You Haven’t Seen Brad Williams Speak in Person on WordPress Security, Watch This!

Brad Williams has long been considered a leading person on WordPress security. I’ve had the opportunity to see him speak a number of times and if you haven’t, I would really suggest you check out one his latest talks from WordCamp Phoenix.

I will be doing an upcoming course on WordPress security for Treehouse and resources like this from Brad are a huge asset for learning more about the topic. Thanks Brad!

Trailer for New Treehouse Course: How to Build Websites with WordPress

I’m excited to announce the release of our latest Treehouse WordPress course: How to Make Websites with WordPress.

We cover all the basics you need to get up and running with WordPress:

  • How to Install WordPress
  • Working with WordPress Themes
  • Customizing WordPress Themes
  • Working with Custom Post Types and Fields
  • Adding Widget Areas
  • Adding Custom Menus
  • Plugin Best Practices

You can see the whole course over on Treehouse!

Interesting Video Comparing WordPress to Other Education Platforms

As someone who worked for Blackboard for a year and has used a number of different LMS at the middle, high school, college, and University level, I liked watching this video from Maria Erb on the topic.

In my opinion, using WordPress and Sensei from WooThemes, you can create a a pretty great LMS replacement.