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://3q.video/en/
Required Script: Importing amp-3q-player into the header.
< 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
<!DOCTYPE html>
<
html
amp>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
title
>w3wiki 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/amp-3q-player/?format=websites"
/>
<
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: