Not Just For YouTube
If you haven’t used it before, you may not even know the Video API exists, or you may be under the impression it can only be used for creating a custom video player. However, if you just need to embed a video into your site, and don’t want to create your own fancy video player, the Video API still has something for you!
Remembering User Settings
All options available to the video HTML tag, such as
Now you’re only showing autoplay for those who are OK with that feature!
Playing the correct size video based on connection
This next option is a bit more specific, and a bit more complicated, but it has huge benefits when it comes to user experience. You’ll have to play around with it to find the right balance for you and your users, but this should provide you with a good starting point.
The Video API comes with a set of events that happen over the course of a video’s lifecycle.
onpause are all examples of good lifecycle events that can be used, but we’re not concerned about when things are going well, we want to know when the video isn’t loading properly.
So we are going to watch for
onerror so that we can make changes when these events happen.
When we get the
onerror event, we will give the user an option to reload the video. When we have
onwaiting we are going to check to see if this has happened before, how many times it has happened, and if it’s been too many times we’re going to change the
src to a smaller bitrate video.
Here is an example of reloading the video (or giving the option to do so) on an error:
Here is an example of changing the
src when the video is loading too often:
Finally, a good resource for the Video API is http://www.w3schools.com/tags/ref_av_dom.asp.
Hi, I’m Justin Fuller. I’m so glad you read my post! I need to let you know that everything I’ve written here is my own opinion and is not intended to represent my employer in any way. All code samples are my own, and are completely unrelated to Bank Of America’s code.
Hacker Noon is how hackers start their afternoons. We’re a part of the @AMIfamily. We are now accepting submissions and happy to discuss advertising &sponsorship opportunities.
To learn more, read our about page, like/message us on Facebook, or simply, tweet/DM @HackerNoon.
If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!