@haxtheweb/a11y-media-player
Version:
A feature rich, highly accessible video player
133 lines (120 loc) • 5.77 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>A11yMediaPlayer: a11y-media-player Demo</title>
<script src="../../../node_modules/@haxtheweb/deduping-fix/deduping-fix.js"></script>
<script type="module">
import '@polymer/iron-demo-helpers/demo-snippet.js';
import "@haxtheweb/responsive-utility/responsive-utility.js";
import "../a11y-media-player.js";
import "../lib/a11y-media-youtube.js";
</script>
<style is="custom-style" include="demo-pages-shared-styles">
.vertical-section-container.centered>* {
--demo-snippet-demo: {
padding: 0;
};
}
.vertical-section-container.centered {
width: 100%;
max-width: unset ;
}
.smaller-examples {
max-width: 75%;
min-width: 400px;
margin: 0 auto;
}
@media print {
demo-snippet {
height: undet;
overflow: visible;
}
}
</style>
</head>
<body>
<div class="vertical-section-container centered">
<h1>a11y-media-player Demo</h1>
<demo-snippet>
<template>
<a11y-media-player id="example" accent-color="pink" linkable
thumbnail-src="https://haxtheweb.org/files/haxcms-managed/310x310-hax%20(1).jpg"
>
<video crossorigin="anonymous" controls>
<source src="//iandevlin.github.io/mdn/video-player-with-captions/video/sintel-short.mp4" type="video/mp4">
<track label="English" kind="subtitles" srclang="en" src="./samples/sintel-en.vtt" default="">
<track label="Deutsch" kind="subtitles" srclang="de" src="./samples/sintel-de.vtt">
<track label="Español" kind="subtitles" srclang="es" src="./samples/sintel-es.vtt">
</video>
</a11y-media-player>
</template>
</demo-snippet>
<h2>Video example, no preloading</h2>
<demo-snippet>
<template>
<a11y-media-player accent-color="brown" preload="none">
<video crossorigin="anonymous" controls>
<source src="//iandevlin.github.io/mdn/video-player-with-captions/video/sintel-short.mp4" type="video/mp4">
</video>
</a11y-media-player>
</template>
</demo-snippet>
<div class="smaller-examples">
<h2>Video example, standalone, with width set with a share link enabled</h2>
<demo-snippet>
<template>
<a11y-media-player id="time-demo" accent-color="blue" linkable stand-alone width="350px">
<video crossorigin="anonymous" controls>
<source src="//iandevlin.github.io/mdn/video-player-with-captions/video/sintel-short.mp4" type="video/mp4">
<track label="Español" kind="subtitles" srclang="es" src="./samples/sintel-es.vtt" default>
<track label="English" kind="subtitles" srclang="en" src="./samples/sintel-en.vtt">
<track label="Deutsch" kind="subtitles" srclang="de" src="./samples/sintel-de.vtt">
</video>
</a11y-media-player>
</template>
</demo-snippet>
<h2>Video example, with height (useful if iframed in) & width set </h2>
<demo-snippet>
<template>
<a11y-media-player id="height-demo" accent-color="yellow" dark linkable width="480px" height="270px">
<video crossorigin="anonymous" controls>
<source src="//iandevlin.github.io/mdn/video-player-with-captions/video/sintel-short.mp4" type="video/mp4">
<track label="Español" kind="subtitles" srclang="es" src="./samples/sintel-es.vtt" default>
<track label="English" kind="subtitles" srclang="en" src="./samples/sintel-en.vtt">
<track label="Deutsch" kind="subtitles" srclang="de" src="./samples/sintel-de.vtt">
</video>
</a11y-media-player>
</template>
</demo-snippet>
</div>
<h2>Video example, with height (useful if iframed in) only set </h2>
<demo-snippet>
<template>
<a11y-media-player id="height-demo" accent-color="yellow" dark linkable height="270px">
<video crossorigin="anonymous" controls>
<source src="//iandevlin.github.io/mdn/video-player-with-captions/video/sintel-short.mp4" type="video/mp4">
<track label="Español" kind="subtitles" srclang="es" src="./samples/sintel-es.vtt" default>
<track label="English" kind="subtitles" srclang="en" src="./samples/sintel-en.vtt">
<track label="Deutsch" kind="subtitles" srclang="de" src="./samples/sintel-de.vtt">
</video>
</a11y-media-player>
</template>
</demo-snippet>
<h2>Video example, with dark transcript and custom microcopy</h2>
<demo-snippet>
<template>
<a11y-media-player id="spanish" accent-color="orange" dark dark-transcript lang="es">
<video crossorigin="anonymous" controls>
<source src="//iandevlin.github.io/mdn/video-player-with-captions/video/sintel-short.mp4" type="video/mp4">
<track label="English" kind="subtitles" srclang="en" src="./samples/sintel-en.vtt" default="">
<track label="Deutsch" kind="subtitles" srclang="de" src="./samples/sintel-de.vtt">
<track label="Español" kind="subtitles" srclang="es" src="./samples/sintel-es.vtt">
</video>
</a11y-media-player>
</template>
</demo-snippet>
</div>
</body>
</html>