css 使用jquery自定义html视频控件

z9smfwbn  于 2023-05-02  发布在  jQuery
关注(0)|答案(1)|浏览(102)

我想在jquery的帮助下制作自定义的html视频控件
我已经尝试了一个取得了重大进展,但仍然开放的帮助和建议

a7qyws3x

a7qyws3x1#

下面是一个工作示例,如果它不能解决您的问题,我将尝试另一种方法

$(document).ready(function() {
  var video = document.getElementById("myVideo");
  var playPauseButton = document.getElementById("playPause");
  var seekBar = document.getElementById("seekBar");
  var muteButton = document.getElementById("mute");
  var volumeBar = document.getElementById("volumeBar");

  playPauseButton.addEventListener("click", function() {
    if (video.paused == true) {
      video.play();
      playPauseButton.innerHTML = "Pause";
    } else {
      video.pause();
      playPauseButton.innerHTML = "Play";
    }
  });

  seekBar.addEventListener("change", function() {
    var time = video.duration * (seekBar.value / 100);
    video.currentTime = time;
  });

  video.addEventListener("timeupdate", function() {
    var value = (100 / video.duration) * video.currentTime;
    seekBar.value = value;
  });

  muteButton.addEventListener("click", function() {
    if (video.muted == false) {
      video.muted = true;
      muteButton.innerHTML = "Unmute";
      volumeBar.value = 0;
    } else {
      video.muted = false;
      muteButton.innerHTML = "Mute";
      volumeBar.value = 1;
    }
  });

  volumeBar.addEventListener("change", function() {
    video.volume = volumeBar.value;
    if (volumeBar.value == 0) {
      muteButton.innerHTML = "Unmute";
      video.muted = true;
    } else {
      muteButton.innerHTML = "Mute";
      video.muted = false;
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video id="myVideo" width="320" height="240">
  <source src="https://edisciplinas.usp.br/pluginfile.php/5196097/mod_resource/content/1/Teste.mp4" type="video/mp4">
</video>

<div id="videoControls">
  <button id="playPause">Play</button>
  <input type="range" id="seekBar" value="0">
  <button id="mute">Mute</button>
  <input type="range" id="volumeBar" min="0" max="1" step="0.1" value="1">
</div>

相关问题