New mobile video optimization for iOS

One of the most important things to us is to make sure that all of our customers’ videos can be played anywhere without any hassle. Like seriously. It’s more important to us than feeding our families, or even ourselves. We’d totally fast for three days in solidarity if something went wrong (but please don’t actually hold us to that). Our videos have always been able to play on iOS — we use a separate HTML5 encode and switch seamlessly based on what you’re using to view a particular video.

However, there have been some little lingering problems with iOS that we wanted to solve. Native video implementation on iOS differs on the iPad and iPhone. One of the most noticeable issues with mobile video for developers is that if you have a dropdown menu element on the same page as a video element, and the dropdown menu opens over the video, then the user can’t click the dropdown menu. The video loading process on iOS isn’t optimal: it starts with a black screen, then moves to a still image, then a play button. Since our customers put often put in the effort to customize the Wistia player, we want them to be differentiated from the default on mobile devices as well as desktops. We want our play button with the color our customer chose, with proper feedback when they click on it.

With Wistia videos on iOS, when you pause the video, the still shows the last thing you played, not the default still that other video players default to. The player has the native controllers, then, when you get to the end of the video, it returns to the main play screen. In addition, iOS is extremely buggy about loading the initial still for a video — it will work for a while, then when you use the iPad more, it just shows black. Our change fixes that scenario. Usually, when a video is over, a user has to click “done” to go back to the page, but with our Call to Action plugin, you’re forced out of fullscreen so you can see the call to action immediately. All of this means that the player plays well with other elements on the page in addition to staying intuitive for users.

In addition, we simplified the mobile implementation of our Turnstile email gating tool; now, when you click the play button after entering your email, the video just goes, instead of having to click an additional play button.

But that’s enough talk; if you’re viewing this post on a mobile device, give it a whirl!