JavaScript APIs: Video Api

In this series I will be exploring the different JavaScript APIs that are available for use in a browser environment. Some will be well known, others may be completely new to you. Hopefully each section will present you with some new information and useful real-world tips! So, let’s get started. 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 , , , and can be set with JavaScript instead of HTML. So, imagine that you have an automatically playing video, but you want to let your users opt out of that probably-annoying feature, you could do the following: autoplay controls loop src 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. , , , 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. oncanplay oncanplaythrough onplay onpause So we are going to watch for , , so that we can make changes when these events happen. onstalled onwaiting onerror When we get the event, we will give the user an option to reload the video. When we have or 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 to a smaller bitrate video. onerror onstalled onwaiting src 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 when the video is loading too often: src Finally, a good resource for the Video API is . http://www.w3schools.com/tags/ref_av_dom.asp Stay tuned for more posts about JavaScript APIs! 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 way. All code samples are my own, and are completely unrelated to Bank Of America’s code. any I’d also love to hear from you, please feel free to connect with me on , , or . Thanks again for reading! LinkedIn Github Medium is how hackers start their afternoons. We’re a part of the family. We are now and happy to opportunities. Hacker Noon @AMI accepting submissions discuss advertising &sponsorship To learn more, , , or simply, read our about page like/message us on Facebook tweet/DM @HackerNoon. If you enjoyed this story, we recommend reading our and . Until next time, don’t take the realities of the world for granted! latest tech stories trending tech stories