AMP Player - Playlist with scroll list

Demostrate the AMP Player sample author(s): Akamai AMP Player Team

by Maikol Guzman

HTML

<html lang="eng">

<head>
  <title>AMP Player Test Page - Playlist with scroll list</title>
  <script src="https://amp.akamaized.net/hosted/1.1/player.esi?apikey=samples&version=9.1.23"></script>
  <script src="demo.js"></script>
  <link rel="stylesheet" href="demo.css">
</head>

<body onload="loadHandler(event)" ontouchstart="">
  <div class="container">
    <div class="player">
      <div class="player__header">
        AMP Player
      </div>
      <div id="akamai-media-player"></div>
    </div>
    <div class="playlist">
      <div class="playlist__header">
        Playlist
      </div>
      <main>
        <section class="section__orange" id="welcome">Welcome</section>
        <section class="section__blue"  id="bigbuckbunny">Big Buck Bunny</section>
        <section class="section__yellow"  id="ottfrontline">OTT Frontline</section>
        <section class="section__orange"  id="amdhls">AMD HLS</section>
        <section class="section__blue"  id="bbbhls">BBB HLS</section>
      </main>
    </div>
  </div>
</body>

</html>

CSS

body {
    font-family: 'Helvetica Neue', Helvetica, sans-serif;
    margin: 0;
}

nav {
    position: absolute;
    top: 0;
    left: 50%;
    display: flex;
    justify-content: space-around;
    width: 400px;
    margin-left: -200px;
    box-sizing: border-box;
    padding: 15px;
    border-radius: 0 0 4px 4px;
    background-color: #000;
    font-size: 20px;
    line-height: 1;
    text-align: center;
}

main {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    overflow-y: scroll;
}

#on:checked~main {
    scroll-behavior: smooth;
}

section {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 2em;
    cursor: pointer;
}

.checkbox {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 50px;
    height: 50px;
    background-color: #fff;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
}

#on:checked~.checkbox::after {
    content: '✔';
    font-size: 50px;
    line-height: 1;
    color: #00ae8b;
}

.section__orange {
    background-color: #f3671c;
}

.section__blue {
    background-color: #0071ba;
}

.section__yellow {
    background-color: #e7a307;
}

#on {
    position: absolute;
    opacity: 0;
}

a {
    display: block;
    width: 100px;
    text-decoration: none;
    color: inherit;
}

.container {
    display: flex;
    height: auto;
}

.player {
    width: 50%;
    height: 19.5em;
}

.player__header {
    text-align: center;
    padding: 10 0 10 0;
}

.playlist {
    width: 50%;
}

.playlist__header {
    text-align: center;
    padding: 10 0 10 0;
}

JavaScript

var amp,
    videos = [{
        title: "Welcome",
        source: [{
            src: "https://welcomevideo.akamaized.net/delivery/1f/07/1f0756a1-f54b-4e22-adbc-8c68680532ea/tom-intro-for-new-customers-v26b238090-d41d-336d-4347-3dac7fc07f0e.m3u8",
            type: "application/x-mpegURL"
        }],
        poster: "https://mdtp-a.akamaihd.net/amp-samples-assets/img/space_alone.jpg"
    },
    {
        title: "Big Buck Bunny",
        source: [{
            src: "https://mdtp-a.akamaihd.net/customers/akamai/video/VfE.mp4",
            type: "video/mp4"
        }],
        poster: "https://mdtp-a.akamaihd.net/amp-samples-assets/img/bunny.jpg"
    },
    {
        title: "OTT Frontline",
        source: [{
            src: "https://akamtrans-a.akamaihd.net/delivery/20/35/2035ef57-5cac-4d23-ab88-6366e9c24e6a/value-of-cmaf-in-the-drive-towards-ott-interoperability3d81e38c-2cad-336d-e2ee-4131c52ad3d4.m3u8",
            type: "application/x-mpegURL"
        }],
        poster: "https://mdtp-a.akamaihd.net/amp-samples-assets/img/hd_world.jpg"
    },
    {
        title: "AMD HLS",
        source: [{
            src: "https://akamtrans-a.akamaihd.net/delivery/94/88/9488592c-0671-49ba-b1c1-d908418a629a/experience-the-edge3d81e38c-2cad-336d-e2ee-4131c52ad3d4.m3u8",
            type: "application/x-mpegURL"
        }],
        poster: "https://mdtp-a.akamaihd.net/amp-samples-assets/img/elephant-dreams.jpg"
    },
    {
        title: "BBB HLS",
        source: [{
            src: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8",
            type: "application/x-mpegURL"
        }],
        poster: "https://mdtp-a.akamaihd.net/amp-samples-assets/img/bunny.jpg"
    }
    ];

function loadHandler(event) {
    var config = {
        plugins: {
            playlist: {
                resources: [
                    { src: "https://mdtp-a.akamaihd.net/amp-samples-assets/js/Playlist.js", debug: "https://mdtp-a.akamaihd.net/amp-samples-assets/js/Playlist.js", type:...