HTML5 Audio/Video Keyboard Shortcuts With OSD

Adds keyboard shortcuts for controlling HTML5 media player (audio/video) with OSD support. Seek media to 0%, 5%, 10%, ..., or 95%. Rewind and fast fordward media by 30 seconds, 1 minute, and 5 minutes. Change media speed even beyond YouTube's speed limit. Change audio volume to 20%, 40%, 60%, 80%, or 100%. Change video aspect ratio for TV and letterbox content (for widescreen monitors).

< Valutazione su HTML5 Audio/Video Keyboard Shortcuts With OSD

Recensione: Bene - lo script funziona

§
Pubblicato: 24/09/2024

Hi. Great script.

Would you consider adding a Mouse Wheel Event for volume mode or Rewind and fast fordward media?

§
Pubblicato: 09/10/2024

chẳng hạn hêm code như này để tua tới hoặc tua lùi 5s:
document.addEventListener('wheel', function(event) {
// Kiểm tra xem người dùng đang sử dụng con lăn chuột lên hoặc xuống
if (event.deltaY > 0) {
// Lấy hướng di chuyển của con lăn chuột (lên hoặc xuống)
var deltaY = event.deltaY;

// Nếu con lăn chuột di chuyển xuống, tua lại 5s
if (deltaY > 0) {
event.target.style.transform = v.currentTime -= 5;
}
}
if (event.deltaY < 0) {
// Lấy hướng di chuyển của con lăn chuột (lên hoặc xuống)
var deltaY = event.deltaY;
// Nếu con lăn chuột di chuyển lên, tua tới 5s
if (deltaY < 0) {
event.target.style.transform = v.currentTime += 5;
}

// Ngăn chặn hành động mặc định của con lăn chuột
event.preventDefault();
}
});

§
Pubblicato: 10/10/2024

This code is better:

// Lấy tất cả các phần tử video và audio trên trang
const mediaElements = document.querySelectorAll('video, audio');

// Lấy tất cả các video và audio trên trang
function getMediaElements() {
return document.querySelectorAll('video, audio');
}

// Thời gian tua tới/lùi (5 giây)
const seekTime = 5;

// Hàm xử lý sự kiện wheel
function handleWheel(event) {
// Kiểm tra xem sự kiện có phải là sự kiện wheel hay không
if (event.type === 'wheel') {
// Lấy tất cả các video và audio trên trang
const mediaElements = getMediaElements();

// Kiểm tra xem con trỏ chuột có trên video hoặc audio hay không
const isOverMedia = Array.from(mediaElements).some(element => element.contains(event.target));

// Nếu con trỏ chuột ở trên video hoặc audio
if (isOverMedia) {
// Lấy phần tử media hiện tại
const ele = Array.from(mediaElements).find(element => element.contains(event.target));
// Tắt hành động mặc định của chuột
event.preventDefault();
// Tua tới/lùi 5 giây
if (event.deltaY > 0) {
// Tua tới
ele.currentTime = Math.min(vid.duration, ele.currentTime - seekTime);
} else {
// Tua lùi
ele.currentTime = Math.max(0, ele.currentTime + seekTime);
}
}
}
}

// Thêm event listener cho sự kiện wheel
window.addEventListener('wheel', handleWheel);

// Thêm event listener cho sự kiện wheel với chế độ passive
window.addEventListener('wheel', handleWheel, { passive: false, capture: true });

Pubblica risposta

Accedi per pubblicare una risposta.