The AMP Stories feature is now available in beta and you can test it on your site with the AMP plugin v1.2 or latest and latest Gutenberg installed. As the name suggests, AMP Stories is a visual storytelling format that immerses your readers in fast-loading, full-screen, and visually rich experiences.
Large publications like Time, The Washington Post, CNN, Wired, and the BBC are already using AMP Stories to tell stories visually. And now, you can use it too.
But, there is one problem that many people faced with AMP Stories. When large video files were uploaded, it took a lot of time to load on mobile devices and there was no way to limit it. Also, it didn’t support any other video format other than MP4.
That just made us curious since we already had a transcoding service for WordPress and we were converting videos into the MP4 format for more than a thousand users every day.
Transcoder for AMP Stories
We wanted to do two things – speed up the time AMP Stories took to load videos and support more video formats.
We did this by uploading the videos from the Gutenberg editor to our transcoding server, compressing it, and sending it back to the main site. Also, we were able to remove the limitation of video formats supported by the official AMP plugin. You can now upload videos in one of the following formats and our Transcoder plugin will automatically convert it into MP4 for you – WebM, MOV, AVI, MPG, FLV, and WMV.
You needn’t worry about video conversions and making it accessible to users on mobile devices with limited bandwidth anymore. Also, the thumbnail for the story will be automatically extracted from the main video and set once the processing is done.
Our WordPress developer Thrijith along with AMP plugin contributor/Google developer Pascal Birchler was able to come up with a solution for this by collaborating.
How we did it
Our transcoder works with the official AMP plugin to convert video files in AMP Stories on the fly. We have used the `amp_story_allowed_video_types` filter which will be introduced in AMP v1.3 to extend support for more video formats.
Kudos to rtCamper Thrijith Thankachan and Google Developer Pascal Birchler who have contributed to this BETA release. Pascal helped us in adding the above filter to the AMP plugin so that we can use it.
We have also added a Gutenberg filter to display a placeholder while the transcoding is in progress. Once the transcoding is completed, it will be replaced with the actual thumbnail in the frontend as well as in the backend for better UX.
Working Demo/Check it out below
If you’re waiting to see the impact our Transcoder plugin can have when used along with AMP Stories, check out the live example below.
https://amp.rtmake.com/stories/amp-stories-with-transcoder/
All those numbers are from real examples. The first video was around 8MB and it was compressed into 912KB. The second one gets even better – from 95MB to 2.1MB!
Just imagine how much amount of storage and bandwidth you can save each year. And ultimately making the web a faster place for everyone.
Here’s how it looks on the Gutenberg editor from your WordPress dashboard –
You can even configure what happens after each story plays.
Take it out for a spin
If you are feeling adventurous, you can take it out for a spin. But hey, be advised that both the plugins are still in beta. It might have bugs and can even break things. So, we would recommend you to test it out on a staging site or dev site first before moving on to production.
- AMP Plugin 1.3-RC1 or latest https://github.com/ampproject/amp-wp/releases/tag/1.3-RC1
AMP Plugin 1.3 will be released soon. So, you can wait and install the stable release of the AMP plugin from your WordPress dashboard itself. Until then, you can use this 1.3-RC1 release for testing. - Transcoder 1.3-beta1 release https://github.com/rtMediaWP/transcoder/releases/tag/1.3-beta1Â
Install and Test AMP Stories with Transcoder Beta
You can test the AMP Stories with Transcoder on your staging or dev sites (We don’t recommend using it on Production yet.)
- If Transcoder plugin version is less than 1.3, delete the transcoder plugin and upload new transcoder 1.3-beta1.
Click here to Download Transcoder 1.3-Beta1. - If the AMP plugin version is less than 1.3, delete the plugin and upload AMP 1.3-RC1 or the latest.
Click here to Download AMP 1.3-RC1.
Note – Once these beta versions are released, you won’t need to follow manual download-upload steps for installation. You will be able to install AMP v1.3 & Transcoder v1.3 directly from the WordPress backend.Â
Activate Transcoder
Also, if you are new to transcoder and don’t have a free license, please follow these instructions:
Step 1: Go to https://rtmedia.io/?transcoding-plan=free
Step 2: Sign up for free plan and click “Download”.
Step 3: You copy the licence key from the purchase confirmation screen as shown below OR you can also copy it from https://rtmedia.io/my-account/ under “Licence Keys”.
Step 4: Set this license key up in your WordPress setup – transcoder settings page as shown below:
We will be releasing Transcoder 1.3 very soon and it’s going to be a special release for us. You can wait until the stable version is out or you can download the latest beta version of plugin and try it now.
So, what are you waiting for? Take it out for a spin and let us know your experience in the comments section below!
You must be logged in to post a comment.