Skip to content

Commit

Permalink
docs(player): add video overlay
Browse files Browse the repository at this point in the history 
?
  • Loading branch information
@danielmatthew
danielmatthew committed Nov 4, 2022
1 parent f027a74 commit 1588a8d
Showing 1 changed file with 60 additions and 25 deletions.
85 changes: 60 additions & 25 deletions docs/otis/player/media/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,17 @@
accent-color: #017d87;
}

tfs-annotation {
cursor: pointer;
background-color: orange
}

tfs-annotation:hover,
tfs-annotation:focus {
outline: 2px solid white;
outline-offset: 2px;
}

</style>
<title>Resource Title | Talis Elevate</title>
</head>
Expand Down Expand Up @@ -110,32 +121,45 @@ <h1 class="m-0 me-3 text-truncate">What's new for the web platform</h1>

<section class="row mb-3 mb-lg-0">
<main class="col col-lg-8 d-flex flex-column pb-lg-3 gx-0 gx-lg-3" id="content">
<video class="w-100 h-100 bg-dark flex-grow-1" playsinline>
<source src="https://iandevlin.github.io/mdn/video-player/video/tears-of-steel-battle-clip-medium.mp4"
type="video/mp4">
</source>
<a href="https://iandevlin.github.io/mdn/video-player/video/tears-of-steel-battle-clip-medium.mp4">Download video</a>
</video>
<div class="position-relative w-100 h-100 bg-dark flex-grow-1">
<video class="w-100 h-100" playsinline>
<source src="https://iandevlin.github.io/mdn/video-player/video/tears-of-steel-battle-clip-medium.mp4"
type="video/mp4">
</source>
<a href="https://iandevlin.github.io/mdn/video-player/video/tears-of-steel-battle-clip-medium.mp4">Download
video</a>
</video>
<div
class="o-video__overlay position-absolute top-0 bg-black bg-opacity-25 w-100 h-100 align-items-center justify-content-center d-none">
<button class="js-play-btn btn btn-lnk">
<span class="fa-stack fa-6x">
<i class="fas fa-circle fa-stack-2x" style="color: rgba(0,0,0,0.25)"></i>
<i class="fal fa-play fa-stack-1x " style="color: white;"></i>
</span>
<span class="visually-hidden">Play</span>
</button>
</div>
</div>
<div class="o-video__controls d-flex align-items-center bg-dark">
<div class="btn-group me-3">
<button class="btn btn-lg btn-dark rounded-0 js-play-btn">
<button class="js-play-btn btn btn-lg btn-dark rounded-0">
<i class="fal fa-fw fa-play"></i>
<span class="visually-hidden">Play</span>
<time class="ps-2 d-none d-lg-inline-block">00:00</time>
</button>
</div>
<div class="progress flex-grow-1" style=" --talis-progress-height:1rem; position: relative;" tabindex="0">

<div class="progress-bar border-3 border-end" role="progressbar" aria-label="Video timer" aria-valuenow="0"
aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar border-end" role="progressbar" aria-label="Video timer" aria-valuenow="0"
aria-valuemin="0" aria-valuemax="100" style="--talis-progress-bar-bg: #017d8780; --talis-border-color: #017d87">
</div>
<tfs-annotation-group>
<tfs-annotation class="js-annotation border-end border-3"
style="position:absolute; left: 10%; width: 1px; height: 100%" tabindex="0"></tfs-annotation>
<tfs-annotation class="js-annotation border-end border-3"
style="position:absolute; left: 20%; width: 1px; height: 100%" tabindex="-1"></tfs-annotation>
<tfs-annotation class="js-annotation border-end border-3"
style="position:absolute; left: 80%; width: 1px; height: 100%" tabindex="-1"></tfs-annotation>
<tfs-annotation class="js-annotation"
style="position:absolute; left: 10%; width: 3px; height: 100%" tabindex="0"></tfs-annotation>
<tfs-annotation class="js-annotation"
style="position:absolute; left: 20%; width: 3px; height: 100%" tabindex="-1"></tfs-annotation>
<tfs-annotation class="js-annotation"
style="position:absolute; left: 80%; width: 3px; height: 100%" tabindex="-1"></tfs-annotation>
</tfs-annotation-group>
</div>
<script>
Expand All @@ -149,10 +173,11 @@ <h1 class="m-0 me-3 text-truncate">What's new for the web platform</h1>
SPACE: 32,
};
const video = document.querySelector('video');
const playBtn = document.querySelector('.js-play-btn');
const playBtn = document.querySelectorAll('.js-play-btn');
const progress = document.querySelector('.progress');
const progressBar = document.querySelector('.progress-bar');
const timeStamp = document.querySelector('.js-play-btn time');
const overlay = document.querySelector('.o-video__overlay');

video.addEventListener('loadedmetadata', () => {
progressBar.setAttribute('aria-valuemax', video.duration);
Expand All @@ -176,14 +201,26 @@ <h1 class="m-0 me-3 text-truncate">What's new for the web platform</h1>
video.addEventListener('timeupdate', () => {
progressBar.setAttribute('aria-valuenow', video.currentTime);
progressBar.style.width = `${(video.currentTime / video.duration) * 100}%`;
timeStamp.textContent = video.currentTime;
const date = new Date(null);
date.setSeconds(video.currentTime);
timeStamp.textContent = date.toISOString().substr(11,8); //hacky timestamp-looking effect
});
playBtn.addEventListener('click', (e) => {
if (video.paused || video.ended) {
video.play();
} else {
video.pause();
}
video.addEventListener('playing', () => {
overlay.classList.remove('d-flex');
overlay.classList.add('d-none');
});
video.addEventListener('pause', () => {
overlay.classList.remove('d-none');
overlay.classList.add('d-flex');
});
playBtn.forEach((el) => {
el.addEventListener('click', (e) => {
if (video.paused || video.ended) {
video.play();
} else {
video.pause();
}
})
});
progress.addEventListener('click', (e) => {
const rect = progress.getBoundingClientRect();
Expand Down Expand Up @@ -215,7 +252,6 @@ <h1 class="m-0 me-3 text-truncate">What's new for the web platform</h1>
}
});


class Annotation extends HTMLElement {
constructor() {
super();
Expand Down Expand Up @@ -253,7 +289,6 @@ <h1 class="m-0 me-3 text-truncate">What's new for the web platform</h1>

this.addEventListener('keydown', this.handleKeyDown);
this.addEventListener('click', this.handleClick);

}

disconnectedCallback() {
Expand Down

0 comments on commit 1588a8d

Please sign in to comment.