@haxtheweb/video-player
Version:
Automated conversion of video-player/
151 lines (138 loc) • 7.31 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>DemoHaxElement: demo-hax-element Demo</title>
<script src="../../../node_modules/@haxtheweb/deduping-fix/deduping-fix.js"></script>
<script type="module">
import "@haxtheweb/demo-snippet/demo-snippet.js";
import '../video-player.js';
</script>
<style>
.max-600 {
max-width: 600px;
}
</style>
</head>
<body>
<div class="vertical-section-container centered">
<a href="/elements/video-player/demo/lecture-player.html#video-player-1--300">Click Here</a>
<h1>video-player Demo</h1>
<h2>video-player with progressive enhancement</h2>
<video-player accent-color="light-blue" dark="" crossorigin="anonymous" source="https://media.aanda.psu.edu/sites/media/aa/files/video/card-mockup.mp4" track="https://haxtheweb.org/files/HAXshort.vtt" sticky-corner="none" resource="#503036aa-9d42-094f-af58-378d7cb37603" prefix="oer:http://oerschema.org/ schema:http://schema.org/ dc:http://purl.org/dc/terms/ foaf:http://xmlns.com/foaf/0.1/ cc:http://creativecommons.org/ns# bib:http://bib.schema.org " lang="en" element-visible="" source-type="local" sources="[]" source-data="[{"src":"https://media.aanda.psu.edu/sites/media/aa/files/video/card-mockup.mp4","type":"video/mp4"}]" tracks="[{"src":"https://oer.hax.psu.edu/cmg295/sites/dart206/files/card-mockup.vtt","srclang":"en","kind":"subtitles","label":"English"}]" xml:lang="en" media-title="Figma Design Files: Creating a Card Markup" text-align="center" style="background-color: var(--simple-colors-default-theme-null-1); color: var(--simple-colors-default-theme-null-12); text-align: center;" audio-description-source=""></video-player>
<demo-snippet>
<template>
<video-player accent-color="yellow" dark learning-mode>
<iframe width="560" height="315" src="https://www.youtube.com/embed/NP0mQeLWCCo" allowfullscreen></iframe>
<video><track label="English" kind="subtitles" srclang="en" src="./samples/bueller.vtt"default></video>
</video-player>
<video-player id="example" accent-color="amber" linkable thumbnail-src="https://avatars.githubusercontent.com/u/329735?v=4">
<video>
<source src="https://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>
</video-player>
</template>
</demo-snippet>
<h2>video-player for youtube + repair to correctly normalize embed address</h2>
<demo-snippet>
<template>
<video-player thumbnail-src="https://avatars.githubusercontent.com/u/329735?v=4" preload="auto" source="//www.youtube.com/watch?v=LrS7dqokTLE" track="./samples/HAXshort.vtt"></video-player>
<video-player class="max-600" dark source="//www.youtube-nocookie.com/embed/LrS7dqokTLE"></video-player>
<video-player class="max-600" accent-color="orange" source="//www.youtube.com/embed/LrS7dqokTLE"></video-player>
<video-player class="max-600" accent-color="orange" dark source="//youtu.be/LrS7dqokTLE"></video-player>
</template>
</demo-snippet>
<h2>video-player for youtube with timestamp</h2>
<demo-snippet>
<template>
<video-player
accent-color="red"
start-time="244"
end-time="250"
source="https://youtu.be/BKorP55Aqvg?feature=shared&t=244">
</video-player>
</template>
</demo-snippet>
<h2>video-player for vimeo + repair to correctly normalize embed address</h2>
<demo-snippet>
<template>
<video-player
source="//vimeo.com/144218562"
caption="Things and stuff, is where the world is.">
</video-player>
<video-player
source="//player.vimeo.com/video/144218562">
</video-player>
</template>
</demo-snippet>
<h2>video-player responsive, even if width/height defined</h2>
<demo-snippet>
<template>
<video-player
source="https://www.twitch.tv/videos/1825264027">
</video-player>
<video-player
source="https://player.twitch.tv/?video=1825264027">
</video-player>
<video-player
source="https://player.twitch.tv/?channel=btssmash&parent=www.example.com">
</video-player>
<video-player
source="https://player.twitch.tv/btssmash">
</video-player>
</template>
</demo-snippet>
<h2>video-player responsive, even if width/height defined</h2>
<demo-snippet>
<template>
<video-player
source="//vimeo.com/144218562"
width="400" height="200">
</video-player>
<video-player
accent-color="light-green"
dark
source="//www.youtube.com/watch?v=o9RypkhGqrg">
</video-player>
<video-player source="//sketchfab.com/models/25332df5b7174ea6a7301ff67cf0ecff/embed"></video-player>
</template>
</demo-snippet>
<h2>video-player with not-responsive flag to disable it</h2>
<demo-snippet>
<template>
<video-player source="//vimeo.com/144218562" not-responsive width="400" height="200"></video-player>
<video-player
accent-color="pink"
dark
source="//www.youtube.com/watch?v=o9RypkhGqrg"
not-responsive>
</video-player>
</template>
</demo-snippet>
<h2>audio player with transcript</h2>
<demo-snippet>
<template>
<video-player id="video" accent-color="lime" dark source="./samples/bueller.mp3" tracks='[{ "src": "./samples/bueller.vtt", "kind": "subtitles", "srclang": "en", "label": "English" }]'></video-player>
</template>
</demo-snippet>
<h2>video-player with multiple track types (subtitles, captions, descriptions)</h2>
<demo-snippet>
<template>
<video-player
accent-color="blue"
source="https://iandevlin.github.io/mdn/video-player-with-captions/video/sintel-short.mp4"
tracks='[
{ "src": "./samples/sintel-en.vtt", "kind": "captions", "srclang": "en", "label": "English Captions" },
{ "src": "./samples/sintel-es.vtt", "kind": "subtitles", "srclang": "es", "label": "Spanish Subtitles" },
{ "src": "./samples/sintel-de.vtt", "kind": "subtitles", "srclang": "de", "label": "German Subtitles" }
]'>
</video-player>
</template>
</demo-snippet>
</div>
</body>
</html>