Aug
10
Google AMP – Media ”; Previous Next In this chapter, we will discuss how to display video and audio from third party partners such as jwplayer and Youtube. Let us learn in detail about the following − Google AMP − JwPlayer Google AMP − YouTube Google AMP − Audio Google AMP – JwPlayer If you want to use jwplayer to show videos on the page, amp has amp-jwplayer to do it. To work with amp-jwplayer, include the following script in your page − <script async custom-element = “amp-jwplayer” src = ” https://cdn.ampproject.org/v0/amp-jwplayer-0.1.js”> </script> Amp-jwplayer tag <amp-jwplayer data-playlist-id = “482jsTAr” data-player-id = “uoIbMPm3” layout = “responsive” width = “16” height = “9”> </amp-jwplayer> A working example of jwplayer in amp page is shown below − Example <!doctype html> <html amp lang = “en”> <head> <meta charset = “utf-8”> <script async src = “https://cdn.ampproject.org/v0.js”> </script> <title>Google AMP – Amp Jwplayer</title> <link rel = “canonical” href = “http://example.ampproject.org/article-metadata.html”> <meta name = “viewport” content = “width = device-width, minimum-scale = 1,initial-scale = 1”> <style amp-boilerplate> body{ -webkit-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;animation: -amp-start 8s steps(1,end) 0s 1 normal both } @-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}} </style> <noscript> <style amp-boilerplate> body{ -webkit-animation:none; -moz-animation:none; -ms-animation:none; animation:none} </style> </noscript> <script async custom-element = “amp-jwplayer” src = “https://cdn.ampproject.org/v0/amp-jwplayer-0.1.js”> </script> </head> <body> <h3>Google AMP – Amp Jwplayer</h3> <amp-jwplayer data-playlist-id = “482jsTAr” data-player-id = “uoIbMPm3” layout = “responsive” width = “16” height = “9”> </amp-jwplayer> </body> </html> Output For amp-jwplayer, there are three important attributes data-player-id data-media-id data-playlist-id To get the ids of player , media and playlist, you need to have a login in jwplayer which can be done from here − https://dashboard.jwplayer.com/#/players Player id will be available in jwplayer player section. Media id will be available in jwplayer content section and playlist id in jwplayer playlist section. Jwplayer gives an eight digit alphanumeric id which needs to be used in the amp-jwplayer for the respective attribute. Google AMP – Youtube If you want to show Youtube video on your amp page, amp has amp-youtube to embed youtube videos on the page. To use amp-youtube, you need to add following script to your page − <script async custom-element = “amp-youtube” src = ” https://cdn.ampproject.org/v0/amp-youtube-0.1.js”> </script> Amp-youtube tag <amp-youtube width = “480” height = “270” layout = “responsive” autoplay = “true” data-videoid = “fWZ6-p7mGK0”> </amp-youtube> Let us now work on an example that shows the working of amp-youtube on the page. Example <!doctype html> <html amp lang = “en”> <head> <meta charset = “utf-8”> <script async src = “https://cdn.ampproject.org/v0.js”> </script> <title>Google AMP – Youtube</title> <link rel = “canonical” href = “http://example.ampproject.org/article-metadata.html”> <meta name = “viewport” content = “width = device-width, minimum-scale = 1,initial-scale = 1”> <style amp-boilerplate> body{ -webkit-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;animation: -amp-start 8s steps(1,end) 0s 1 normal both } @-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}} </style> <noscript> <style amp-boilerplate> body{ -webkit-animation:none; -moz-animation:none; -ms-animation:none; animation:none} </style> </noscript> <script async custom-element = “amp-youtube” src = “https://cdn.ampproject.org/v0/amp-youtube-0.1.js”> </script> </head> <body> <h3>Google AMP – Youtube</h3> <h3>Youtube Videos from Tutorialspoint</h3> <amp-youtube width = “480” height = “270” layout = “responsive” autoplay = “true” data-videoid = “fWZ6-p7mGK0”> </amp-youtube> </body> </html> Output To show youtube video you need to give videoid to the amp-youtube as shown below − <amp-youtube width = “480” height = “270” layout = “responsive” autoplay = “true” data-videoid = “fWZ6-p7mGK0”> </amp-youtube> How to get the data-videoid? Consider any Youtube url for example − https://www.youtube.com/watch?v=fWZ6-p7mGK0. The highlighted part is the id to be used in your amp-youtube. We have used the attribute autoplay as true. The video will autoplay as supported by the browser and also the video will play in a muted mode. You will have to tap on the video to unmute it. Video will be paused when it goes out of view and will resume from the paused state when it comes to view. If user pauses the video and goes in/out of view, the video will remain in pause state only. The same is applicable for mute/unmute. Google Amp – Audio Amp has a tag to play audio which is a replacement to html5 audio tag. To play audio in the amp page, we can use amp-audio. To work with amp-audio, we need to add the following script − <script async custom-element = “amp-audio” src = ” https://cdn.ampproject.org/v0/amp-audio-0.1.js”> </script> Amp-audio tag <amp-audio width = “auto” height = “50” src = “audio/test.mp3”> <div fallback> <p>HTML5 audio is not supported on your browser!</p> </div> </amp-audio> Hence, amp-audio will take up src attribute which is a http request to the audio file. The reason we are using amp-audio instead of the standard html5 audio is because amp puts a lazy loading concept in place for elements which require http request. It will start loading the request based on priority.It will be loaded just before or when it is about to reach the viewport. A working example of using amp-audio in your page is shown here − Example <!doctype html> <html amp lang = “en”> <head> <meta charset = “utf-8”> <script async src = “https://cdn.ampproject.org/v0.js”> </script> <title>Google AMP – Audio</title> <link rel = “canonical” href = “http://example.ampproject.org/article-metadata.html”> <meta name = “viewport” content = “width = device-width, minimum-scale = 1,initial-scale = 1”> <style amp-boilerplate> body{ -webkit-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;animation: -amp-start 8s steps(1,end) 0s 1 normal both } @-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}} </style> <noscript> <style amp-boilerplate> body{ -webkit-animation:none; -moz-animation:none; -ms-animation:none; animation:none} </style> </noscript> <script async custom-element = “amp-audio” src = “https://cdn.ampproject.org/v0/amp-audio-0.1.js”> </script> </head> <body> <h3>Google AMP – Audio</h3> <amp-audio width = “auto” height = “50” src=”audio/test.mp3″> <div fallback> <p>HTML5 audio is not supported on your browser!</p> </div> </amp-audio> </body> </html> Output The tag for amp-audio where the attributes like width, height, src is specified is shown