H5 – play function

Time:2021-4-18

Using HTML + JS + CSS to realize the simple function of a player

In the process of page development, we will meet the demand of playing video in the page. Usually we use mature video playback plug-ins to deal with it

For example: video.js . However, for our personal growth, we also need to know how to realize a simple H5 player function.

To achieve a playback function, it usually includes:

  1. Use of video tag
  2. Analog video progress bar
  3. Control play and pause
  4. Control volume
  5. Fast forward and backward

layout

<div class="player">
      <video class="player_video"></video>
      <div class="player_controls">
        <div class="progress">
          <div class="progress_fill"></div>
        </div>
        <button class="player_button toggle">►</button>
        <input
          type="range"
          class="player_range"
          name="playbackRate"
          min="0.5"
          max="2"
          step="0.1"
          value="1"
        />
        <button data-skip="-10" class="player_button">« 10s</button>
        <button data-skip="25" class="player_button">25s »</button>
      </div>
</div>

style

// .scss
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background: #fff;
  min-height: 100vh;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}
.player {
  width: 750px;
  border: 2px solid #000;
  position: relative;
  font-size: 0;
  overflow: hidden;
  .player_video {
    width: 100%;
  }
  &:fullscreen {
    max-width: none;
    width: 100%;
  }
  &:-webkit-full-screen {
    max-width: none;
    width: 100%;
  }
  &:hover .progress {
    height: 15px;
  }
  &:hover .player_controls {
    transform: translateY(0);
  }
}
.player_controls {
  display: flex;
  position: absolute;
  bottom: 0;
  width: 100%;
  transform: translateY(100%) translateY(-5px);
  transition: all 0.3s;
  flex-wrap: wrap;
  background: rgba(0, 0, 0, 0.7);
  & > * {
    flex: 1;
  }
  .player_button {
    background: none;
    border: 0;
    outline: none;
    line-height: 1;
    color: #fff;
    text-align: center;
    padding: 0;
    cursor: pointer;
    max-width: 50px;
    &:focus {
      border-color: #ffc600;
    }
  }
  .player_range {
    width: 10px;
    height: 30px;
  }
  .progress {
    flex: 10;
    position: relative;
    display: flex;
    flex-basis: 100%;
    height: 5px;
    transition: height 0.3s;
    background: rgba(0, 0, 0, 0.5);
    cursor: ew-resize;
    .progress_fill {
      // width: 10%;
      background: #ffc600;
      flex: 0;
      flex-basis: 10%;
    }
  }
}
//Progress bar
input[type='range'] {
  -webkit-appearance: none;
  background: transparent;
  width: 100%;
  margin: 0 5px;
  &:focus {
    outline: none;
  }
  &::-webkit-slider-runnable-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
    background: rgba(255, 255, 255, 0.8);
    border-radius: 1.3px;
    border: 0.2px solid rgba(1, 1, 1, 0);
  }

  &::-webkit-slider-thumb {
    height: 15px;
    width: 15px;
    border-radius: 50px;
    background: #ffc600;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -3.5px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  }

  &:focus::-webkit-slider-runnable-track {
    background: #bada55;
  }

  &::-moz-range-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
    background: #ffffff;
    border-radius: 1.3px;
    border: 0.2px solid rgba(1, 1, 1, 0);
  }

  &::-moz-range-thumb {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
    height: 15px;
    width: 15px;
    border-radius: 50px;
    background: #ffc600;
    cursor: pointer;
  }
}

script

const player = document.querySelector('.player');
 const video = document.querySelector('.player_video');
 const toggle = document.querySelector('.toggle');

 //Play or pause
 function toggleVideo() {
 const methods = video.paused ? 'play' : 'pause';
 video[methods]();
 }
 function updateButton() {
 const image = this.paused ? '►' : '❚ ❚';
 toggle.textContent = image;
 }

//Control playback
video.addEventListener('click', toggleVideo);
video.addEventListener('play', updateButton);
video.addEventListener('pause', updateButton);
toggle.addEventListener('click', toggleVideo);

summary

  1. Learn input [type = “range”] to simulate progress bar
  2. JS control drag is reviewed
  3. Reviewed flex basics

Recommended Today

What is “hybrid cloud”?

In this paper, we define the concept of “hybrid cloud”, explain four different cloud deployment models of hybrid cloud, and deeply analyze the industrial trend of hybrid cloud through a series of data and charts. 01 introduction Hybrid cloud is a computing environment that integrates multiple platforms and data centers. Generally speaking, hybrid cloud is […]