index.html

﻿<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <title>Azure Media Thumbnail Sprite Tip</title>
        <link type="text/css" rel="stylesheet" href="//amp.azure.net/libs/amp/2.3.0/skins/amp-flush/azuremediaplayer.min.css" />
        <script type="text/javascript" src="//amp.azure.net/libs/amp/2.3.0/azuremediaplayer.min.js"></script>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script type="text/javascript" src="~/amp-spriteTip.js"></script>
        <script type="text/javascript">
            $(function () {
                var mediaPlayer = amp("mediaPlayer", {
                    plugins: {
                        spriteTip: {
                            vttUrl: "//skystreameast-use22.streaming.media.azure.net/e15c6fde-4676-49fb-9d58-1430b0b8d167/Tears of Steel_000001.vtt"
                        }
                    }
                });
                mediaPlayer.src(
                    [{
                        src: "//skystreameast-use22.streaming.media.azure.net/e15c6fde-4676-49fb-9d58-1430b0b8d167/Tears of Steel.ism/manifest"
                    }]
                );
            })
        </script>
    </head>
    <body>
        <video id="mediaPlayer" class="azuremediaplayer amp-flush-skin" controls autoplay />
    </body>
</html>