JW Player's New AMP HTML Component
For instructions on how to use <amp-jwplayer> in your AMP pages, see our README in the AMP Github repository.
Why Do We Need AMP HTML?
To quote the Accelerated Mobile Pages Project's web site, "Accelerated Mobile Pages are web pages designed to load instantaneously–they are a step towards a better mobile web for all."
Indeed, using the mobile web has become a gloomy experience in the past couple years. Most pages are still designed for desktop computers with powerful CPUs, lots of memory, and very fast connections. When viewed on a phone, these pages load slowly, media jitters wildly, scrolling in pages is maddeningly janky. For more background on the challenges facing the mobile web, see the AMP Project announcement on Google’s blog.
So how can using AMP HTML solve these problems? In short, by enforcing restrictions on how pages are constructed to prioritize loading and rendering speed in mobile browsers above all else. This is a gross over-simplification, so if you want more depth, Ryan Chenkie over at Auth0 has written an excellent overview.
Besides better page performance, using AMP will get your pages highlighted in the Top Stories section of Google mobile search results, as illustrated in this screenshot:
For the fully AMP-ified Google experience, visit Google's news carousel demo in your mobile browser.
Using the JW Player AMP HTML Component
As you will discover in our JW Player for AMP example, our component is super easy to use. However, due to the restrictions in AMP HTML, we had to place some restrictions on our AMP component, too:
- Only supports cloud-hosted JW Players
- Always loads the Player in an iFrame
- To play videos that do not originate from JW content servers (i.e., videos uploaded to JW Platform through our API or Dashboard), the videos must be registered as external URLs. For instructions on registering URLs in your JW Dashboard, see this article. For instructions on using the API, see the sourcetype option in the /videos/create/ documentation.
- You must specify a width and height in your <amp-jwplayer> tag. Optionally, you can use layout="responsive", in which case the width and height specify the aspect ratio of the Player (for example, width="16" height="9" results in a 16:9 aspect ratio).
Using the JW Player AMP component is entirely optional. If you are not coding pages specifically for AMP HTML, your JW Players will continue to work the same way they always have, with no restrictions.
Many publishers are starting to use AMP, and we think it has great promise for improving the mobile web. We encourage you to give it a try, too.
John Luther is SVP of Product Strategy at JW Player. He wrote none of the code in <amp-jwplayer>. That was Pablo Schklowsky, who is SVP of Video Platform, and he has our great thanks.