我想在jquery的帮助下制作自定义的html视频控件我已经尝试了一个取得了重大进展,但仍然开放的帮助和建议
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>
1条答案
按热度按时间a7qyws3x1#
下面是一个工作示例,如果它不能解决您的问题,我将尝试另一种方法