定位视频滑块和视频时间应该可以正常工作

时间：2018-08-22 13:08:54

标签： javascript html css

视频当前时间小时，分钟，秒和视频持续时间小时，分钟，秒需要工作。

视频滑块位于播放/暂停按钮的右侧。在mozilla firefox中可以，但在Google chrome中，视频滑块需要稍低一些或与mozilla firefox完全匹配。我该怎么办？

* {
  margin: 0;
  padding: 0;
}

#Vid {
  margin: 100px 100px;
  width: 600px;
  height: auto;
}

#Control-Bar {
  margin-top: -100px;
  margin-left: 100px;
  background: rgba(0, 0, 0, 0.8);
  width: 600px;
  height: 50px;
}

#Btn {
  position: absolute;
  width: 30px;
  height: 30px;
  font-size: 20px;
  font-family: verdana;
  color: white;
  border: none;
  outline: none;
  margin-top: 11px;
  margin-left: 11px;
  cursor: pointer;
}

#Btn:hover {
  opacity: 0.9;
}

#Video-Slider {
  position: absolute;
  margin-top: 17px;
  width: 200px;
  margin-left: 60px;
}

#Video-Slider:focus {
  outline: none;
}

input[type=range] {
  -moz-appearance: none;
  -webkit-appearance: none;
}

#Video-Slider::-moz-range-track {
  background: white;
  height: 10px;
}

#Video-Slider::-moz-range-progress {
  background: red;
  height: 10px;
}

#Video-Slider::-moz-range-thumb {
  background: red;
  border: none;
  border-radius: 0px;
  margin-top: -5px;
}

#Video-Slider::-webkit-slider-runnable-track {
  background: white;
  height: 10px;
}

#Video-Slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: red;
  border: none;
  border-radius: 0px;
  margin-top: -2px;
  width: 14px;
  height: 14px;
}

#Time {
  position: absolute;
  margin-left: 280px;
  margin-top: 15px;
}

#CurTime {
  font-family: verdana;
  font-size: 12pt;
  color: white;
}

#Slash {
  font-family: verdana;
  font-size: 12pt;
  color: white;
}

#DurTime {
  font-family: verdana;
  font-size: 12pt;
  color: white;
}

#Vol-Div {
  background: rgba(0, 0, 0, 0.7);
  transform: rotate(-90deg);
  width: 130px;
  padding: 10px;
  margin-top: -124px;
  margin-left: 390px;
  position: absolute;
  display: none;
}

#Volume-Slider {
  width: 125px;
}

#Volume-Slider:focus {
  outline: none;
}

#Volume-Slider::-moz-range-track {
  -moz-appearance: none;
  background: white;
  height: 10px;
}

#Volume-Slider::-moz-range-progress {
  background: red;
  height: 10px;
}

#Volume-Slider::-moz-range-thumb {
  background: red;
  width: 10px;
  height: 20px;
  border: none;
  border-radius: 0px;
}

#Volume-Slider::-webkit-slider-runnable-track {
  background: white;
  height: 10px;
}

#Volume-Slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 20px;
  background: red;
  margin-top: -5px;
  border: none;
  border-radius: 0px;
}

#F-Screen {
  position: absolute;
  margin-left: 520px;
  margin-top: 13px;
  background: #2196f3;
  color: white;
  border: 1px solid lightblue;
  border-radius: 10%;
  padding: 5px;
  cursor: pointer;
}

#F-Screen:focus {
  outline: none;
}

#Mute-Unmute {
  border: none;
  margin-left: 446px;
  margin-top: -30px;
  position: absolute;
  cursor: pointer;
}

#Vol-H {
  position: absolute;
  margin-left: 20px;
  margin-top: 37px;
}

#Vol-H:hover #Vol-Div {
  display: block;
}

#Mute-Unmute:focus {
  outline: none;
}
<!DOCTYPE html>

<html>

<link rel="stylesheet" type="text/css" href="style.css" />

<body>

  <video id="Vid">

<source src="Kolkata Bangla Movie -ONE- Aladdin Full HD Song 2017 - YouTube.mp4" type="video/mp4"/>

</video>

  <div id="Control-Bar">

    <button id="Btn" onclick="PlayPause()"></button>

    <input type="range" id="Video-Slider" value="0" min="0" max="100" step="1" />

    <span id="Time">

<span id="CurTime">00:00:00</span>

    <span id="Slash">/</span>

    <span id="DurTime">00:00:00</span>

    </span>

    <div id="Vol-H">

      <button id="Mute-Unmute"></button>

      <div id="Vol-Div">

        <input type="range" id="Volume-Slider" min="0" max="100" value="100" step="1" />

      </div>

    </div>

    <button id="F-Screen">[ &nbsp; ]</button>

  </div>

  <script>
    var video = document.getElementById("Vid");

    video.setAttribute("controls", "controls");

    var btn = document.getElementById("Btn");

    btn.style.background = "url('icons/5.png')";

    btn.style.backgroundRepeat = "no-repeat";

    btn.style.width = "30px";

    btn.style.height = "30px";

    function PlayPause() {

      var btn = document.getElementById("Btn");

      if (video.paused) {

        video.play();

        btn.style.background = "url('icons/4.png')";

        btn.style.backgroundRepeat = "no-repeat";

        btn.style.width = "30px";

        btn.style.height = "30px";

      } else {

        video.pause();

        btn.style.background = "url('icons/5.png')";

        btn.style.backgroundRepeat = "no-repeat";

        btn.style.width = "30px";

        btn.style.height = "30px";

      }

    }

    function initializeplayer() {

      var videoslider = document.querySelector("#Video-Slider");

      var curtime = document.querySelector("#CurTime");

      var durtime = document.querySelector("#DurTime");

      videoslider.addEventListener("change", function() {

        var seekto = video.duration * (videoslider.value / 100);

        video.currentTime = seekto;

      });

      video.addEventListener("timeupdate", function() {

        var newTime = video.currentTime * (100 / video.duration);

        videoslider.value = newTime;

        var ch = Math.floor(video.currentTime % (1000 * 60 * 60) / 1000 * 60);

        var cm = Math.floor(video.currentTime / 60);

        var cs = Math.floor(video.currentTime - cm * 60);

        var dh = Math.floor(video.duration % (1000 * 60 * 60) / 1000 * 60);

        var dm = Math.floor(video.duration / 60);

        var ds = Math.floor(video.duration - dm * 60);

        if (ch < 10) {

          ch = "0" + ch;

        }

        if (cm < 10) {

          cm = "0" + cm;

        }

        if (cs < 10) {

          cs = "0" + cs;

        }

        curtime.innerHTML = ch + ":" + cm + ":" + cs;

        if (dh < 10) {

          dh = "0" + dh;

        }

        if (dm < 10) {

          dm = "0" + dm;

        }

        if (ds < 10) {

          ds = "0" + ds;

        }

        durtime.innerHTML = dh + ":" + dm + ":" + ds;

      });

      var muteunmute = document.querySelector("#Mute-Unmute");

      muteunmute.style.background = "url('icons/2.png')";

      muteunmute.style.backgroundRepeat = "no-repeat";

      muteunmute.style.width = "30px";

      muteunmute.style.height = "30px";

      muteunmute.style.backgroundPosition = "4px";

      muteunmute.style.padding = "19px";

      muteunmute.style.backgroundColor = "white";

      volumeslider = document.querySelector("#Volume-Slider");

      muteunmute.addEventListener("click", function() {

        if (video.muted) {

          video.muted = false;

          volumeslider.value = 100;

          muteunmute.style.background = "url('icons/2.png')";

          muteunmute.style.backgroundRepeat = "no-repeat";

          muteunmute.style.width = "30px";

          muteunmute.style.height = "30px";

          muteunmute.style.backgroundPosition = "4px";

          muteunmute.style.padding = "19px";

          muteunmute.style.backgroundColor = "white";

        } else {

          video.muted = true;

          volumeslider.value = 0;

          muteunmute.style.background = "url('icons/6.png')";

          muteunmute.style.backgroundRepeat = "no-repeat";

          muteunmute.style.width = "30px";

          muteunmute.style.height = "30px";

          muteunmute.style.backgroundPosition = "4px";

          muteunmute.style.padding = "19px";

          muteunmute.style.backgroundColor = "white";

        }

      });

      volumeslider.addEventListener("change", function() {

        video.volume = volumeslider.value / 100;

        if (video.volume == 0) {

          muteunmute.style.background = "url('icons/6.png')";

          muteunmute.style.backgroundRepeat = "no-repeat";

          muteunmute.style.width = "30px";

          muteunmute.style.height = "30px";

          muteunmute.style.backgroundPosition = "4px";

          muteunmute.style.padding = "19px";

          muteunmute.style.backgroundColor = "white";

        } else {

          muteunmute.style.background = "url('icons/2.png')";

          muteunmute.style.backgroundRepeat = "no-repeat";

          muteunmute.style.width = "30px";

          muteunmute.style.height = "30px";

          muteunmute.style.backgroundPosition = "4px";

          muteunmute.style.padding = "19px";

          muteunmute.style.backgroundColor = "white";

        }

      });

      var fscreen = document.querySelector("#F-Screen");

      fscreen.addEventListener("click", function() {

        if (video.requestFullScreen) {
          video.requestFullScreen();
        } else if (video.mozRequestFullScreen) {
          video.mozRequestFullScreen();
        } else if (video.webkitRequestFullScreen) {
          video.webkitRequestFullScreen();
        }

      });

    }

    window.onload = initializeplayer();
  </script>

</body>

</html>

从保管箱下载图标文件夹。

https://www.dropbox.com/sh/nsrw6gafwfqagxa/AAD91THgVF-uTpQc-G4WEtxNa?dl=0

谢谢。...

0 个答案:

没有答案
相关问题
最新问题