ฉันมีการควบคุมแบบกำหนดเองสำหรับวิดีโอ
ยอดเยี่ยม. มันทำงานได้ค่อนข้างดี อย่างไรก็ตาม ฉันพลาดฟังก์ชันการทำงานไป เมื่อวิดีโอหยุดชั่วคราว และฉันลากตัวเลื่อนบนแถบค้นหา เฟรมวิดีโอจะไม่อัปเดตแบบเรียลไทม์ เฉพาะหลังจากที่คุณ "วาง" ตัวเลื่อนลงแล้ว (เลื่อนเมาส์ลง)
ดังที่คุณเห็นที่นี่ พร้อมด้วยฟังก์ชันวิดีโอ html5 แบบเนทีฟที่ทำได้ เช่นนั้น: ขณะที่คุณลากแถบ วิดีโอจะอัปเดตเป็นเฟรมปัจจุบันที่เคอร์เซอร์ของคุณเปิดอยู่ สำหรับฉันสิ่งนี้จะค่อนข้างสำคัญ
แล้วฉันจะทำให้เรื่องนี้เกิดขึ้นได้อย่างไร? ปัญหาอยู่ที่ธรรมชาติของ .addEventListener("change") ใช่ไหม
<div class="row">
<div class="col-sm-4" id="video-container">
<!-- Video -->
<video id="video" muted>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<p>
Your browser doesn't support HTML5 video.
</p>
</video>
<!-- Video Controls -->
<div id="video-controls">
<button type="button" id="play-pause" class="play"><img src="https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_play_arrow_white_24px.svg"></button>
<input type="range" id="seek-bar" value="0">
<button type="button" id="full-screen"><img src=https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_fullscreen_white_24px.svg></button>
</div>
</div>
</div>
<script type="text/javascript">
window.onload = function() {
// Video
var video = document.getElementById("video");
// Buttons
var playButton = document.getElementById("play-pause");
var fullScreenButton = document.getElementById("full-screen");
// Sliders
var seekBar = document.getElementById("seek-bar");
// Event listener for the play/pause button
playButton.addEventListener("click", function() {
if (video.paused == true) {
// Play the video
video.play();
// Update the button text to 'Pause'
$('img', playButton).attr("src","https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_pause_white_24px.svg");
} else {
// Pause the video
video.pause();
// Update the button text to 'Play'
$('img', playButton).attr("src","https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_play_arrow_white_24px.svg");
}
});
// Event listener for the full-screen button
fullScreenButton.addEventListener("click", function() {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen(); // Firefox
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen(); // Chrome and Safari
}
});
// Event listener for the seek bar
seekBar.addEventListener("change", function() {
// Calculate the new time
var time = video.duration * (seekBar.value / 100);
// Update the video time
video.currentTime = time;
});
// Update the seek bar as the video plays
video.addEventListener("timeupdate", function() {
// Calculate the slider value
var value = (100 / video.duration) * video.currentTime;
// Update the slider value
seekBar.value = value;
});
// Pause the video when the seek handle is being dragged
seekBar.addEventListener("mousedown", function() {
video.pause();
});
$('#video-controls').width($('video').width());
$('#seek-bar').width($('video').width() -105);
}
</script>