Hướng dẫn html5 video custom volume control - html5 điều khiển âm lượng tùy chỉnh video

10

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Tôi đang cố gắng tạo một trình phát video có giao diện người dùng tùy chỉnh bằng thẻ HTML5 và một số JavaScript. Slider âm lượng của tôi sẽ không hoạt động mặc dù.

Cách tôi đã cố gắng thực hiện là viết một hàm đặt âm lượng nhiều lần trong khoảng thời gian 1ms. Rõ ràng nếu họ không chạm vào thanh trượt vì chu kỳ cuối cùng thì âm lượng không nên thay đổi. 1ms không phải là một thời gian rất dài vì vậy tôi đã cố gắng tăng nó lên 100ms để xem liệu nó có giúp ích gì không. Nó đã không.

Bất kể vị trí nào tôi đặt thanh trượt thành âm lượng vẫn ở mức giá trị mặc định. Điều này có thể được thực hiện mà không cần sử dụng thư viện tùy chỉnh? Nếu vậy, làm thế nào?

HTML:

JavaScript:

var video = document.getElementById('video');
var volu3 = document.getElementById('vol-control');

window.setInterval(changevolume(), 1);

function changevolume() {

 var x = volu3.value;
 var y = x / 100;

 video.volume = y;

}

Hỏi ngày 10 tháng 8 năm 2015 lúc 18:05Aug 10, 2015 at 18:05

1

Thực sự tốt nhất là xử lý cả sự kiện "đầu vào" và "thay đổi" để âm lượng cập nhật theo thời gian thực với thanh trượt với tất cả các trình duyệt mới hơn ("thay đổi" chỉ được cho là xảy ra khi người dùng phát hành nút chuột, mặc dù Nó rõ ràng hoạt động trong Chrome và IE10 yêu cầu bạn xử lý "thay đổi" thay vì "đầu vào"). Đây là một ví dụ hoạt động:

... Đây là bản demo trực tiếp: https://jsfiddle.net/2rx2f8dh/

Đã trả lời ngày 10 tháng 8 năm 2015 lúc 19:09Aug 10, 2015 at 19:09

0

Thay vì kiểm tra xem điều khiển âm lượng có thay đổi mỗi mili giây (rất không hiệu quả) hay không, bạn nên tạo một trình nghe sự kiện sẽ chỉ bắn khi điều khiển âm lượng của bạn thay đổi. Đây là một ví dụ:

var video = document.getElementById('video');
var volumeControl = document.getElementById('vol-control');

volumeControl.addEventListener('change',function(){
    video.volume = this.value / 100;
});

Cập nhật (với trình nghe sự kiện

var video = document.getElementById('video');
var volu3 = document.getElementById('vol-control');

window.setInterval(changevolume(), 1);

function changevolume() {

 var x = volu3.value;
 var y = x / 100;

 video.volume = y;

}

var video = document.getElementById('video');
var volu3 = document.getElementById('vol-control');

window.setInterval(changevolume(), 1);

function changevolume() {

 var x = volu3.value;
 var y = x / 100;

 video.volume = y;

}

var video = document.getElementById('video');
var volumeControl = document.getElementById('vol-control');

var setVolume = function(){
    video.volume = this.value / 100;
};

volumeControl.addEventListener('change',setVolume);
volumeControl.addEventListener('input',setVolume);

Jakub Muda

5.55010 Huy hiệu vàng37 Huy hiệu bạc53 Huy hiệu Đồng10 gold badges37 silver badges53 bronze badges

Đã trả lời ngày 10 tháng 8 năm 2015 lúc 18:30Aug 10, 2015 at 18:30

Dhoutydhoutydhouty

1.93913 Huy hiệu bạc20 Huy hiệu đồng13 silver badges20 bronze badges

0

Trong bài đăng này, tôi sẽ chỉ cho bạn một phương pháp rất dễ dàng và hiệu quả để tạo bộ điều khiển âm lượng video HTML5 trong JavaScript bằng một thanh trượt. Sử dụng mã JavaScript này, bạn có thể điều khiển âm lượng bằng thanh trượt.

HTML5 Video/Audio Trình phát điều khiển âm lượng với khóa trong JavaScript

Hơn nữa, bạn có thể kiểm soát các bước tăng âm lượng hoặc giảm bằng mã JavaScript này.

Vì vậy, ở đây chúng ta sẽ tạo ra những thứ này từng cái một.

1. Đặt một video vào một thẻ.
2. Tạo một trường đầu vào với loại & nbsp; phạm vi.range.
3. Tạo nút Tạm dừng chơi tùy chọn cho hướng dẫn này, nhưng vẫn, nếu bạn muốn, hãy đi qua & nbsp; phát và tạm dừng video HTML5 bằng cách nhấn phím không gian trong nút JavaScript hoặc & NBSP;
   But still, if you want, go through Play and pause HTML5 video by pressing space key in JavaScript
   or Play/Pause Button For HTML5 Video Using JavaScript
4. Tạo hàm JavaScript để lấy giá trị đầu vào từ trường đầu vào phạm vi làm giá trị âm lượng.

Chỉ cần làm theo các bước dưới đây để hiểu làm thế nào để làm điều này.

Tạo bộ điều khiển âm lượng video trong JavaScript với thanh trượt

Chức năng JavaScript chính:

function thisVolume(volume_value)
    {
        var myvideo = document.getElementById("myvid");
        document.getElementById("vol").innerHTML=volume_value;
        myvideo.volume = volume_value / 100;
        
    }

Bây giờ hãy xem xét cẩn thận mã HTML + JavaScript đầy đủ

 
 

  

 

 
  
  


  
  Play 
  

  

 

 

 

Bạn cũng có thể quan tâm đến,

Trình phát video chuyển tiếp và lùi html5 có khóa mũi tên trái và phải trong JavaScript

Nút phát/tạm dừng cho video HTML5 bằng JavaScript

Explanation:

Đây là trường đầu vào cho thanh trượt.

function thisVolume(volume_value) { 
var myvideo = document.getElementById("myvid"); 
document.getElementById("vol").innerHTML=volume_value; 
myvideo.volume = volume_value / 100; 
}

Và đây là hàm JavaScript chính đang lấy giá trị từ đầu vào thanh trượt.

Giá trị được lưu trữ trong Volume_Value biến đổi

document.getEuityById (Vol Vol vol). Internhtml = volay_value; // Dòng này chỉ để hiển thị giá trị âm lượng hiện tại theo từ 0 đến trăm.

HTML5 Video/Audio Trình phát điều khiển âm lượng với khóa trong JavaScript

Làm cách nào để thay đổi âm lượng của một video trong HTML?

Làm cách nào để tùy chỉnh các điều khiển video trong HTML5?

Làm cách nào để điều chỉnh âm lượng trong HTML?

Làm cách nào để giảm âm lượng của một bài hát trong HTML?