@haxtheweb/video-player
Version:
Automated conversion of video-player/
135 lines (125 loc) • 5.52 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 '@polymer/iron-demo-helpers/demo-pages-shared-styles.js';
import '@polymer/iron-demo-helpers/demo-snippet.js';
import '../video-player.js';
</script>
<style is="custom-style" include="demo-pages-shared-styles"></style>
<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>
<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>
</div>
</body>
</html>