Open In App

Google AMP amp-3q-player

Last Updated : 05 Nov, 2020
Improve
Improve
Like Article
Like
Save
Share
Report

Introduction: The 3Q Player is a video player written in JavaScript .The player implements media source extensions for streaming video content. In AMP HTML to embed a 3Q Player we use a amp-3q-player component. 3q-player has many features like cloud recording, video streaming, webcasting etc

Official Site : https://3q.video/en/

Required Script: Importing amp-3q-player into the header.




<script async custom-element="amp-3q-player" src=
</script>


Attributes:

  • data-id: It is the video id of a 3Q Player which is required to embed a 3Q player in a AMP page.
  • autoplay: If autoplay attribute is present then the video will start to play as soon as the video loads.

Example: To embed a 3q-player the data id of the video should be taken to take the data-id.

  • Go to the video

  • Right click on the video

  • Click on Show Debug info and copy the highlighted code

  • Paste the id into the video id of the amp-3q-player tag




    <!DOCTYPE html>
    <html amp>
      
    <head>
        <meta charset="utf-8" />
        <title>geeksforgeeks amp-3q-player</title>
      
        <script async src=
        </script>
      
        <script async custom-element="amp-3q-player"
        </script>
      
        <!-- Import the `amp-ad` component in the header. -->
        <script async custom-element="amp-ad" 
        </script>
      
        <link rel="canonical" href=
      
        <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>
    </head>
      
    <body>
        <amp-3q-player data-id=
            "7201c779-6b3c-11e7-ae0e-002590c750be" 
            layout="responsive" width="400" 
            height="400">
        </amp-3q-player>
    </body>
      
    </html>

    
    

    Output:



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads