@haxtheweb/a11y-media-player
Version:
A feature rich, highly accessible video player
88 lines (76 loc) • 2.93 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>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-pages-shared-styles.js";
import "@polymer/iron-demo-helpers/demo-snippet.js";
import "../a11y-media-player.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 Audio demo</h1>
<demo-snippet>
<template>
<a11y-media-player accent-color="indigo">
<audio controls>
<source src="./samples/bueller.mp3" type="audio/mp3">
<track label="English" kind="subtitles" srclang="en" src="./samples/bueller.vtt" default>
</audio>
</a11y-media-player>
</template>
</demo-snippet>
<div class="smaller-examples">
<h2>Audio demo, standalone with thumbnail image and width set</h2>
<demo-snippet>
<template>
<a11y-media-player accent-color="lime" dark show-custom-captions stand-alone thumbnail-src="https://media2.s-nbcnews.com/j/streams/2013/April/130417/1C6963224-ss-110805-teachers-beuller.fit-760w.jpg" width="400px">
<audio controls>
<source src="./samples/bueller.mp3" type="audio/mp3">
<track label="English" kind="subtitles" srclang="en" src="./samples/bueller.vtt" default>
</audio>
</a11y-media-player>
</template>
</demo-snippet>
<div class="smaller-examples">
<h2>Audio demo with height set to 165px (use this for iframes)</h2>
<demo-snippet>
<template>
<a11y-media-player accent-color="purple" show-custom-captions height="164px">
<audio controls>
<source src="./samples/bueller.mp3" type="audio/mp3">
<track label="English" kind="subtitles" srclang="en" src="./samples/bueller.vtt" default>
</audio>
</a11y-media-player>
</template>
</demo-snippet>
</div>
</div>
</body>
</html>