Some Innocent Fun With HTML Video and Progress

This project started with a workplace training video on bullying—a truly inspiring source of creative energy! The video's elegant UI, particularly its gradient progress bar, sparked an idea. I knew creating a similar gradient on a <progress></progress> element was possible (thanks to Pankaj Parashar's 2016 CSS-Tricks post), but hadn't delved into video manipulation or JavaScript extensively. The challenge was on!

The goal was simple: synchronize a progress bar's value with a video's playback progress. It proved more fun than anticipated.

The HTML

Pure HTML5:

<video src="http://html5videoformatconverter.com/data/images/happyfit2.mp4"></video>
<figcaption>
  ► <button id="play">►</button>
  <progress id="progress" max="100" value="0">Progress</progress>
  <label for="progress" id="timer" role="timer"></label>
</figcaption>

The <progress></progress> element is key: max="100" sets the maximum value, and value="0" initializes it to zero, representing 0% progress.

CSS Styling

I won't rehash Pankaj's excellent CSS, but here's the code for the gradient progress bar, ensuring cross-browser compatibility:

progress[value] {
  appearance: none; /* Safari */
  border: none; /* Firefox */
  color: #e52e71; /* Fallback */
}

progress[value]::-webkit-progress-value {
  background-image: linear-gradient(to right, #ff8a00, #e52e71);
  transition: width 1s linear;
}

progress[value]::-moz-progress-bar {
  background-image: -moz-linear-gradient(right, #ff8a00, #e52e71);
}

JavaScript: Connecting the Dots

The JavaScript involves these steps:

1. Get current video time and duration: video.currentTime and video.duration.
2. Calculate progress percentage: (currentTime / duration) * 100.
3. Update progress bar value: progress.value = roundedPercentage.
4. Display elapsed time: Update a timer element.

Here's the refined code, incorporating state management and requestAnimationFrame for better performance (thanks to Neal Fennimore's valuable input):

const video = document.querySelector('video');
const progress = document.getElementById('progress');
const timer = document.getElementById('timer');
const button = document.getElementById('play');

const PAUSED = 'paused';
const PLAYING = 'playing';
let state = PAUSED;

function progressLoop() {
  if (state === PLAYING) {
    progress.value = Math.round((video.currentTime / video.duration) * 100);
    timer.innerHTML = Math.round(video.currentTime)   ' seconds';
    requestAnimationFrame(progressLoop);
  }
}

function onPlay() {
  state = PLAYING;
  progressLoop();
  button.innerHTML = "❙❙";
}

function onPause() {
  state = PAUSED;
  button.innerHTML = "►";
}

function onClick() {
  if (state === PAUSED) {
    video.play();
  } else {
    video.pause();
  }
}

video.addEventListener('play', onPlay);
video.addEventListener('pause', onPause);
button.addEventListener('click', onClick);

This code efficiently updates the progress bar and timer, providing a smooth, responsive user experience. The addition of a play/pause button enhances usability, while the state management and use of requestAnimationFrame ensures a clean and performant implementation. And yes, I aced that training video quiz!

The above is the detailed content of Some Innocent Fun With HTML Video and Progress. For more information, please follow other related articles on the PHP Chinese website!