我的 HTML5 視頻播放器有一個(gè)定制的搜索欄。但我需要突出顯示搜索欄的一些預(yù)定義部分，例如秒2-5和7-8。我怎樣才能做到這一點(diǎn)？基本上，我需要它是這樣的：到目前為止，這是我的簡(jiǎn)單代碼：<!DOCTYPE html> <html> <head><style>.body{background-color:black;}.video-player { position: relative; width: 66%; height: 66%;}.video-player img { width: 100%; height: 100%;}.video-player video { position: fixed; top: 0; left: 0; min-width: 66%; min-height: 66%; width: auto; height: auto; z-index: -100; background-repeat: no-repeat;}.video-player .controls { position: absolute; width: 100%; height: 100%; top: 0; left: 0;}.video-player .controls .progress-bar { position: absolute; margin-left: 28%; bottom: 10%; color: orange; font-size: 12px; width: 40%; height: 8%; border: none; background: #434343; border-radius: 9px; vertical-align: middle; cursor: pointer;}.video-player .controls progress::-moz-progress-bar { color: orange; background: #434343;}.video-player .controls progress[value]::-webkit-progress-bar { background-color: #434343; border-radius: 2px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;}.video-player .controls progress[value]::-webkit-progress-value { background-color: orange;}video#backgroundvid { position: absolute; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; background-repeat: no-repeat;}</style></head><body><div class="video-player"> <video preload="auto" autoplay loop id="backgroundvid"> <source src="mov_bbb.mp4" type="video/mp4"> Your browser does not support HTML5 video. </video> <img src="top2.png" style="object-fit:cover" alt="" id="backgroundvid"> <div class="controls"> <progress class="progress-bar" style="object-fit:cover; z-index=10000" min="0" max="100" value="0">0% played</progress> </div></div>
1 回答
慕仙森
TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超8個(gè)贊
您可以使用將疊加在進(jìn)度欄頂部的畫布，
然后您只需在畫布上繪制標(biāo)記即可。
只需對(duì) html 進(jìn)行輕微更改（將 id 添加到進(jìn)度條id="progress-bar"）：
<progress id="progress-bar" class="progress-bar" style="object-fit:cover; z-index=10000" min="0" max="100" value="0">0% played</progress>
添加 CSS 來(lái)設(shè)置畫布的樣式（與進(jìn)度條具有相同的 CSS 屬性）
#markers{
position: absolute;
bottom: 10%;
margin-left: 28%;
border-radius: 9px;
pointer-events: none;
}
請(qǐng)注意，pointer-events: none;如果不放置它，您將無(wú)法訪問(wèn)進(jìn)度欄的控制。
因此，JavaScript 創(chuàng)建并插入畫布，然后在其上放置標(biāo)記。
// We need the metadata 'duration', so we wrap the code in an event listener to be sure we execute our code when the metadata is loaded
video.addEventListener('loadedmetadata', function () {
// Get the dimension of the progress-bar
const progressbar = document.getElementById('progress-bar');
const widthProgressBar = window.getComputedStyle(progressbar, null).getPropertyValue("width");
const heightProgressBar = window.getComputedStyle(progressbar, null).getPropertyValue("height");
// Create the canvas
const canvas = document.createElement('canvas');
const w = canvas.width = parseFloat(widthProgressBar);
const h = canvas.height = parseFloat(heightProgressBar);
canvas.id = 'markers';
const progressBar = document.getElementById("progress-bar");
// Insert the canvas in the DOM
progressBar.parentNode.insertBefore(canvas, progressBar.nextSibling)
// Define the context
const ctx = canvas.getContext('2d');
// Calcul how many px will represent 1s
const videoDuration = video.duration;
const ratioPxBySeconds = parseFloat(w) / videoDuration;
// Define the markers
const markers = {
'marker1': [2, 5],
'marker2': [7, 8]
};
// Function to draw the markers
function setMarkers(markers, ratioPxSec, height) {
for (marker in markers) {
let x = markers[marker][0] * ratioPxSec; // Start x position of the marker
let y = 0; // Start y position of the marker
let w = (markers[marker][1] - markers[marker][0]) * ratioPxSec; // Width of the marker
let h = parseFloat(height); // Height of the marker
ctx.fillStyle = "#7f3302"; // Set the color of the marker
ctx.fillRect(x, y, w, h); // Draw a rectangle
}
}
setMarkers(markers, ratioPxBySeconds, h); // Call the function
});
const player = document.querySelector('.video-player');
const video = player.querySelector('video');
const progressBar = player.querySelector('.progress-bar');
video.addEventListener('timeupdate', updateProgressBar, false);
progressBar.addEventListener('click', seek);
function updateProgressBar() {
var percentage = Math.floor((100 / video.duration) * video.currentTime);
progressBar.value = percentage;
progressBar.innerHTML = percentage + '% played';
}
function seek(e) {
let percent = e.offsetX / this.offsetWidth;
video.currentTime = percent * video.duration;
e.target.value = Math.floor(percent / 100);
e.target.innerHTML = progressBar.value + '% played';
}
// We need the metadata 'duration', so we wrap the code in an event listener to be sure we execute our code when the metadata is loaded
video.addEventListener('loadedmetadata', function() {
// Get the dimension of the progress-bar
const progressbar = document.getElementById('progress-bar');
const widthProgressBar = window.getComputedStyle(progressbar, null).getPropertyValue("width");
const heightProgressBar = window.getComputedStyle(progressbar, null).getPropertyValue("height");
// Create the canvas
const canvas = document.createElement('canvas');
const w = canvas.width = parseFloat(widthProgressBar);
const h = canvas.height = parseFloat(heightProgressBar);
canvas.id = 'markers';
const progressBar = document.getElementById("progress-bar");
// Insert the canvas in the DOM
progressBar.parentNode.insertBefore(canvas, progressBar.nextSibling)
// Define the context
const ctx = canvas.getContext('2d');
// Calcul how many px will represent 1s
const videoDuration = video.duration;
const ratioPxBySeconds = parseFloat(w) / videoDuration;
// Define the markers
const markers = {
'marker1': [2, 5],
'marker2': [7, 8]
};
// Function to draw the markers
function setMarkers(markers, ratioPxSec, height) {
for (marker in markers) {
let x = markers[marker][0] * ratioPxSec; // Start x position of the marker
let y = 0; // Start y position of the marker
let w = (markers[marker][1] - markers[marker][0]) * ratioPxSec; // Width of the marker
let h = parseFloat(height); // Height of the marker
ctx.fillStyle = "rgb(127, 51, 2, 0.9)"; // Set the color of the marker
ctx.fillRect(x, y, w, h); // Draw a rectangle
}
}
setMarkers(markers, ratioPxBySeconds, h); // Call the function
// Calculate the new dimensions & redraw
function resize(){
const progressBar = document.getElementById('progress-bar');
const w = canvas.width = progressBar.clientWidth;
const h = canvas.height = progressBar.clientHeight;
const ratioPxBySeconds = parseFloat(w) / videoDuration;
setMarkers(markers, ratioPxBySeconds, h);
}
// On page resize, call the resize() function
window.addEventListener("resize", resize, false);
});
body {
background-color: black;
}
.video-player {
position: relative;
width: 66%;
height: 66%;
}
.video-player img {
width: 100%;
height: 100%;
}
.video-player video {
position: fixed;
top: 0;
left: 0;
min-width: 66%;
min-height: 66%;
width: auto;
height: auto;
z-index: -100;
background-repeat: no-repeat;
}
.video-player .controls {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.video-player .controls .progress-bar {
position: absolute;
margin-left: 28%;
bottom: 10%;
color: orange;
font-size: 12px;
width: 40%;
height: 8%;
border: none;
background: #434343;
border-radius: 9px;
vertical-align: middle;
cursor: pointer;
}
#markers {
position: absolute;
bottom: 10%;
margin-left: 28%;
border-radius: 9px;
pointer-events: none;
}
.video-player .controls progress::-moz-progress-bar {
color: orange;
background: #434343;
}
.video-player .controls progress[value]::-webkit-progress-bar {
background-color: #434343;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
.video-player .controls progress[value]::-webkit-progress-value {
background-color: orange;
}
video#backgroundvid {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background-repeat: no-repeat;
}
<div class="video-player">
<video preload="auto" autoplay loop id="backgroundvid">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<img src="https://i.stack.imgur.com/gmK7P.png" style="object-fit:cover" alt="" id="backgroundvid">
<div class="controls">
<progress id="progress-bar" class="progress-bar" style="object-fit:cover; z-index=10000" min="0" max="100" value="0">0% played</progress>
</div>
</div>
編輯：
添加了 resize() 函數(shù)，用于在屏幕調(diào)整大小時(shí)更新標(biāo)記
（通常，當(dāng)您將視頻全屏播放時(shí)會(huì)發(fā)生這種情況）
// Calculate the new dimensions & redraw
function resize(){
const progressBar = document.getElementById('progress-bar');
const w = canvas.width = progressBar.clientWidth;
const h = canvas.height = progressBar.clientHeight;
const ratioPxBySeconds = parseFloat(w) / videoDuration;
setMarkers(markers, ratioPxBySeconds, h);
}
// On page resize, call the resize() function
window.addEventListener("resize", resize, false);
- 1 回答
- 0 關(guān)注
- 102 瀏覽
添加回答
舉報(bào)
0/150
提交
取消