Google AMP amp-3q-player

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://webflow.3q.video/en

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

html

<script async custom-element="amp-3q-player" src=
"https://cdn.ampproject.org/v0/amp-3q-player-0.1.js">
</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

html

<!DOCTYPE html>
<html amp>

<head>
    <meta charset="utf-8" />
    <title>geeksforgeeks amp-3q-player</title>

    <script async src=
        "https://cdn.ampproject.org/v0.js">
    </script>

    <script async custom-element="amp-3q-player"
src="https://cdn.ampproject.org/v0/amp-3q-player-0.1.js">
    </script>

    <!-- Import the `amp-ad` component in the header. -->
    <script async custom-element="amp-ad" 
src="https://cdn.ampproject.org/v0/amp-ad-0.1.js">
    </script>

    <link rel="canonical" href=
"https://amp.dev/documentation/components/websites/amp-3q-player?redirected />

    <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:

Google AMP amp-3q-player

Explore