Geek Answers Handbook

How to set up custom multimedia video controls - HTML5 / CSS3?

I am designing controls to personalize video playback, with some design flaws there is an upset in the design and even more when it comes to rendering on a responsive screen.

In the design, Speed , because I can order them from the drop-down menu, as shown in the following example:

introduction to the description of lifestyle

How can I cast the correct style to a progress bar similar to the following image:

introduction to the description of lifestyle

And carry an adaptive order similar to it.

My code is complete:

    .seeker {
        position: relative;
        width: 54%;
        margin: 0 1%;
        display: inline-block;
        margin-right: 5px;
        margin: 0 10px;
    }

    .trackbar {
        position: absolute;
        width: 100%;
        height: 1px;
        top: 12px;
        z-index: -2;
        background: rgba(255,255,255,0.7);
    }
    .progressbar {
        position: absolute;
        left: 0;
        top: 12px;
        width: 0;
        height: 1px;
        border: 0;
        background-color: red;
        color: red;
        z-index: 0;
        pointer-events: none;
    }

    .content-video-player {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 40px;
        /*background: -webkit-linear-gradient(left,rgba(0,0,0,.7) 0px,rgba(0,0,0,.7) 95px,transparent 95px,transparent 98px,rgba(0,0,0,.7) 98px);*/
        background: rgba(0,0,0,.7);
        -webkit-transition: bottom .4s ease-in;
    }

    .content-video-player div.btn {
        width: 95px;
        text-align: center;
        float: left;
    }

    .btnPlay::after {
        content: "";
        background-image: url(http://svgshare.com/i/3um.svg);
        width: 50px;
        height: 50px;
        display: inline-block;
        background-size: cover;
        position: relative;
        top: -7px;
    }

    .btnStop::after {
        content: "";
        background-image: url(http://svgshare.com/i/3vz.svg);
        width: 65px;
        height: 65px;
        display: inline-block;
        background-size: cover;
        position: relative;
        top: -7px;
    }

    .video-time-player {
        float: right;
        color: #ccc;
        text-align: center;
        width: 15%;
    }

    .volume {
        position: relative;
        cursor: pointer;
        width: 70px;
        height: 10px;
        float: right;
        margin-top: 10px;
        margin-right: 10px;
    }

    .volumeBar {
        display: block;
        height: 30%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #a4c9ec;
        z-index: 10;
    }

    .sound, .btnFS {
        border: none;
        float: right;
    }

    .sound::after {
        content: "";
        background-image: url(http://svgshare.com/i/3v6.svg);
        width: 45px;
        height: 40px;
        display: inline-block;
        background-size: cover;
        position: relative;
        top: -4px;
    }

    .btnFS::after {
        content: "";
        background-image: url(http://svgshare.com/i/3u5.svg);
        width: 25px;
        height: 25px;
        display: inline-block;
        background-size: cover;
        position: relative;
        top: 6px;
    }
    <!-- Container of the controls vidio players -->
    <div class="content-video-player">
    	<div class="btnPlay btn" title="Play/Pause video"></div>
    	<div class="btnStop btn" title="Stop video"></div>
    	<div class="spdText btn">Speed: </div>
    	<div class="btnx1 btn text selected" title="Normal speed">x1</div>
    	<div class="btnx3 btn text" title="Fast forward x3">x3</div>
    	<div id="seeker" class="seeker">
    		<div class="trackbar"></div>
            <div id="progressbar" class="progressbar" style="width: 114.7px;">
                <span class="bufferBar"></span>
                <span class="timeBar"></span>
            </div>
            <div class="video-time-player">
    			<span class="current">00:03</span> / 
    			<span class="duration">00:03</span> 
    		</div>
        </div>
        <div class="btnFS" title="Switch to full screen"></div>
        <div class="volume" title="Set volume">
            <span class="volumeBar" style="width: 84.2857%;"></span>
        </div>
        <div class="sound sound2" title="Mute/Unmute sound"></div>
    </div>
Run codeHide result
+6
source share
1 answer

(display: inline-table) .content-video-player (display:table):

.playbackComponent | .timeComponent | .modComponent

▶] [⏸] [X] | _____ 07:22/ 15:01 | 🔉 ||||||| ⛶

display:table-cell position:absolute . Rate, X

Demo

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  border: 0 none rgba(0, 0, 0, 0);
}

body {
  overflow-y: scroll;
}

.content-video-player>* {
  display: inline-table;
}

.content-video-player {
  position: relative;
  transform: translateY(68vh);
  left: 0;
  width: 100%;
  height: 40px !important;
  background: rgba(0, 0, 0, .7);
  transition: bottom .4s ease-in;
  display: table;
  table-layout: fixed;
}

.seeker {
  position: absolute;
  width: 30%;
  display: table-cell;
  margin: 0 5px;
  top: calc(50% - 6px);
  left: 100px;
}

.trackbar {
  position: absolute;
  width: 100%;
  height: 1px;
  top: 12px;
  z-index: -2;
  background: rgba(255, 255, 255, 0.7);
}

.progressbar {
  position: absolute;
  left: 0;
  top: 12px;
  width: 0;
  height: 1px;
  border: 0;
  background-color: red;
  color: red;
  z-index: 0;
  pointer-events: none;
}

.content-video-player button.btn {
  width: 48px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0);
  display: table-cell;
}

.btnPlay::after {
  content: "";
  background-image: url(http://svgshare.com/i/3um.svg);
  width: 48px;
  height: 48px;
  display: table-cell;
  background-size: cover;
  position: absolute;
  top: -4px;
}

.btnStop::after {
  content: "";
  background-image: url(http://svgshare.com/i/3vz.svg);
  width: 56px;
  height: 56px;
  display: table-cell;
  background-size: cover;
  position: absolute;
  left: 25px;
  top: calc(50% - 28px);
}

.btnSpd {
  transform: translateX(-35px);
  height: 48px;
  width: 48px;
  font-size: 24px;
  top: calc(50% - 24px);
}

.video-time-player {
  position: absolute;
  color: #ccc;
  text-align: center;
  left: 11.5em;
  font-size: .3em;
  width: auto;
  min-width: 90px;
}

.video-time-player>* {
  display: inline-block;
}

.volume {
  position: relative;
  cursor: pointer;
  width: 80px;
  height: 10px;
  right: -5em;
  top: 17px;
}

.volumeBar {
  display: block;
  height: 30%;
  position: absolute;
  background-color: #a4c9ec;
  z-index: 10;
}

.sound,
.btnFS {
  border: none;
}

.sound::after {
  content: "";
  background-image: url(http://svgshare.com/i/3v6.svg);
  width: 45px;
  height: 40px;
  display: table-cell;
  background-size: cover;
  position: absolute;
  top: 4px;
  left: 25.5em;
}

.btnFS::after {
  content: "";
  background-image: url(http://svgshare.com/i/3u5.svg);
  width: 25px;
  height: 25px;
  right: 5px;
  display: table-cell;
  background-size: cover;
  position: absolute;
  top: 12px;
}

.speed {
  display: none;
  position: absolute;
  max-height: 0;
  transition: max-height 1s;
}

.speed:hover,
.btnSpd:hover .speed {
  display: inline-table;
  list-style: none;
  max-height: 300px;
  transition: max-height 1s;
  top: -170px;
}

.cmp {
  width: 30%
}
<!-- Container of the controls vidio players -->

<main class='content-video-player'>
  <section class="cmp playbackComponent" style='display:inline-table'>
    <button class="btnPlay btn" title="Play/Pause video"></button>
    <button class="btnStop btn" title="Stop video"></button>
    <button class="btnSpd btn">X 
    <ul class='speed'>
      <li>x3.0</li>
      <li>x2.5</li>
      <li>x2.0</li>
      <li>x1.5</li>
      <li>x1.0</li>
      <li>x0.5</li>
    </ul>
    </button>
  </section>
  <section class='cmp timeComponent' style='display:inline-table'>
    <div id="seeker" class="seeker">
      <div class="trackbar"></div>
      <div id="progressbar" class="progressbar" style="width: 114.7px;">
        <span class="bufferBar"></span>
        <span class="timeBar"></span>
      </div>
      <time class="video-time-player">
    			<b class="current">00:03</b> / 
    			<b class="duration">00:03</b> 
    		</time>
    </div>

  </section>

  <section id='cmp ModComponent' style='display:inline-table'>
    <div class="volume" title="Set volume">
      <span class="volumeBar" style="width: 84.2857%;"></span>
    </div>
    <button class="btn sound sound2" title="Mute/Unmute sound"></button>
    <button class="btn btnFS" title="Switch to full screen"></button>
  </section>
</main>
Hide result
+2

More articles:


All Articles