<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>YouTube player (all tracks hosted locally) | Able Player Demos</title>

<link rel="stylesheet" href="demos.css" type="text/css">

<!-- Dependencies -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>

<script src="//cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>

<!-- Able Player CSS -->

<link rel="stylesheet" href="../build/ableplayer.min.css" type="text/css"/>

<!-- Able Player JavaScript -->

<script src="../build/ableplayer.js"></script>

<!-- styles for this example page -->

<style>

div#intro {

width: 80em;

max-width: 100%;

}

div#intro h2 {

font-size: 1.2em;

margin-bottom: 0.25em;

}

div#intro ul {

margin-top: 0.5em;

margin-bottom: 2em;

}

.wrapper {

width: 500px;

max-width: 100%;

}

</style>

</head>

<body>

<header>

<div class="title">Able Player Demos</div>

</header>

<nav>

<ul>

<li><a href="index.html">More demos</a></li>

<li><a href="https://ableplayer.github.io/ableplayer">Able Player Home</a></li>

</ul>

</nav>

<main>

<h1>YouTube player (all tracks hosted locally)</h1>

<div id="intro">

<p>This page features an example of Able Player being used to play a YouTube video.

Its features include:</p>

<ul>

<li>A described and non-described version of the video, both hosted on YouTube. Swap between the two versions using the <em>Description</em> button.</li>

<li>Captions, subtitles, and chapters, <strong>all hosted locally</strong>.</li>

<li>An interactive transcript built from the chapters, captions and subtitle files.</li>

<li>A full set of options in the Captions Preferences dialog.</li>

</ul>

</div>

<div class="wrapper">

<video id="video1" data-able-player

data-skin="2020" preload="auto"

data-youtube-id="dhwpLACAls8" data-youtube-desc-id="Ck2TdVMhWcU" playsinline>

<track kind="captions" src="../media/itaccess_captions_en.vtt" srclang="en" label="English"/>

<track kind="subtitles" src="../media/itaccess_subtitles_es.vtt" srclang="es" label="Español"/>

<track kind="subtitles" src="../media/itaccess_subtitles_zh-cn.vtt" srclang="zh-cn" label="中文(中华人民共和国)"/>

<track kind="chapters" src="../media/itaccess_chapters_en.vtt" srclang="en"/>

</video>

</div>

</main>

</body>

</html>