programming javascript

Thêm javascript điều khiển video

Đặc tả HTML5 đã giới thiệu phần tử 

5    
6    
Custom HTML5 Video Player
7    
11    
12      
14          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
18          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
21        
Your browser doesn't support HTML5 video.
24
2, có thể được sử dụng để nhúng nội dung video vào các trang web và được hỗ trợ tốt trên các trình duyệt hiện đại. Trong bài đăng này, chúng ta sẽ tìm hiểu cách nhúng trình phát video HTML5 vào tài liệu HTML và xác định các điều khiển tùy chỉnh cho nó độc lập với mặc định của trình duyệt

Đây là một liên kết đến bản demo CodeSandbox

Thiết lập dự án

Chạy lệnh sau để tạo ba tệp. 

5    
6    
Custom HTML5 Video Player
7    
11    
12      
14          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
18          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
21        
Your browser doesn't support HTML5 video.
24
3, 
5    
6    
Custom HTML5 Video Player
7    
11    
12      
14          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
18          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
21        
Your browser doesn't support HTML5 video.
24
4, 
5    
6    
Custom HTML5 Video Player
7    
11    
12      
14          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
18          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
21        
Your browser doesn't support HTML5 video.
24
5 trong một thư mục có tên là 
5    
6    
Custom HTML5 Video Player
7    
11    
12      
14          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
18          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
21        
Your browser doesn't support HTML5 video.
24
6

1mkdir custom-video-player
3touch index.html style.css script.js

sao chép

Để nhúng trình phát video vào ứng dụng của chúng tôi, hãy thêm phần sau vào tệp 

5    
6    
Custom HTML5 Video Player
7    
11    
12      
14          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
18          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
21        
Your browser doesn't support HTML5 video.
24
3 của chúng tôi

5    
6    
Custom HTML5 Video Player
7    
11    
12      
14          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
18          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
21        
Your browser doesn't support HTML5 video.
24

sao chép

Trong đoạn mã trên, chúng tôi đã hiển thị phần tử 

5    
6    
Custom HTML5 Video Player
7    
11    
12      
14          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
18          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
21        
Your browser doesn't support HTML5 video.
24
8. Bạn có thể thêm video từ máy tính cục bộ của mình vào thuộc tính 
5    
6    
Custom HTML5 Video Player
7    
11    
12      
14          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
18          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
21        
Your browser doesn't support HTML5 video.
24
9 hoặc sử dụng liên kết Cloudinary mặc định được sử dụng trong mã. Đặc tả HTML5 hiện hỗ trợ ba định dạng video, nhưng chúng tôi đã sử dụng nhiều thẻ 
5    
6    
Custom HTML5 Video Player
7    
11    
12      
14          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
18          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
21        
Your browser doesn't support HTML5 video.
24
2 để cung cấp hai định dạng của cùng một video trong MP4 và WebM. Ngoài ra, chúng tôi đã chỉ định nội dung được xác định trước sẽ được hiển thị cho tác nhân người dùng không hỗ trợ phần tử 
3    src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650352188/production.mp4"
7    src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650352188/production.mp4"
10  
Your browser doesn't support HTML5 video.
1

Thẻ 

3    src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650352188/production.mp4"
7    src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650352188/production.mp4"
10  
Your browser doesn't support HTML5 video.
1 cũng chấp nhận một số thuộc tính gốc tùy chọn, chẳng hạn như 
3    src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650352188/production.mp4"
7    src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650352188/production.mp4"
10  
Your browser doesn't support HTML5 video.
3, hiển thị giao diện điều khiển trình phát tiêu chuẩn khi được chỉ định hoặc đặt thành true. Nhấp để tìm hiểu thêm về các thuộc tính khác

Trước khi tiếp tục, hãy thêm một số kiểu để ứng dụng của chúng ta có giao diện đẹp. Điền tệp 

5    
6    
Custom HTML5 Video Player
7    
11    
12      
14          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
18          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
21        
Your browser doesn't support HTML5 video.
24
4 của bạn với các kiểu từ liên kết CodeSandbox này. Nếu bạn xem trước trang trong trình duyệt của mình, bạn sẽ thấy trình phát video được nhúng như bên dưới

Tùy chỉnh Trình phát video

Trước khi tùy chỉnh trình phát video, chúng ta cần xóa thuộc tính 

3    src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650352188/production.mp4"
7    src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650352188/production.mp4"
10  
Your browser doesn't support HTML5 video.
3, thuộc tính hiển thị các điều khiển video như 
3    src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650352188/production.mp4"
7    src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650352188/production.mp4"
10  
Your browser doesn't support HTML5 video.
6, 
3    src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650352188/production.mp4"
7    src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650352188/production.mp4"
10  
Your browser doesn't support HTML5 video.
7, v.v. , sau đó xây dựng các điều khiển tùy chỉnh của chúng tôi. Cập nhật phần tử 
5    
6    
Custom HTML5 Video Player
7    
11    
12      
14          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
18          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
21        
Your browser doesn't support HTML5 video.
24
2 trong tệp 
5    
6    
Custom HTML5 Video Player
7    
11    
12      
14          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
18          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
21        
Your browser doesn't support HTML5 video.
24
3 của bạn như hình bên dưới

3    src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650352188/production.mp4"
7    src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650352188/production.mp4"
10  
Your browser doesn't support HTML5 video.

sao chép

Nếu bạn kiểm tra trình duyệt của mình, bạn sẽ thấy trình phát không tương tác

Chuyển đổi Trạng thái Tạm dừng/Phát

Để thêm chức năng tạm dừng và phát cho trình phát của chúng tôi, hãy cập nhật tệp 

5    
6    
Custom HTML5 Video Player
7    
11    
12      
14          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
18          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
21        
Your browser doesn't support HTML5 video.
24
3 của chúng tôi với nội dung sau

1
2  //...
4    ►

sao chép

Thêm phần sau vào tệp 

5    
6    
Custom HTML5 Video Player
7    
11    
12      
14          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
18          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
21        
Your browser doesn't support HTML5 video.
24
5 của bạn với phần sau để thêm một số tương tác

1const video = document.querySelector[".video"];
2const toggleButton = document.querySelector[".toggleButton"];
4  if [video.paused || video.ended] {
10function updateToggleButton[] {
11  toggleButton.innerHTML = video.paused ? "►" : "❚❚";
13toggleButton.addEventListener["click", togglePlay];
14video.addEventListener["click", togglePlay];
15video.addEventListener["play", updateToggleButton];
16video.addEventListener["pause", updateToggleButton];

sao chép

Chúng tôi đã bắt đầu bằng cách chọn phần tử 

3    src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650352188/production.mp4"
7    src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650352188/production.mp4"
10  
Your browser doesn't support HTML5 video.
1, cho phép truy cập vào các thuộc tính và phương thức của video. Sau đó, chúng tôi đã chọn phần tử 
1
2  //...
4    ►
3 và thêm một trình xử lý sự kiện vào phần tử đó để kích hoạt hàm 
1
2  //...
4    ►
4 khi nhấp vào. Hàm 
1
2  //...
4    ►
4 thực thi một điều kiện chuyển đổi phát hoặc tạm dừng video dựa trên trạng thái hiện tại của video

Tiếp theo, chúng tôi đã thêm trình xử lý sự kiện 

1
2  //...
4    ►
6 và 
1
2  //...
4    ►
7 vào phần tử 
3    src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650352188/production.mp4"
7    src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650352188/production.mp4"
10  
Your browser doesn't support HTML5 video.
1 gọi hàm 
1
2  //...
4    ►
9, hàm này cập nhật dựa trên trạng thái của video

Sau đó, bạn sẽ có thể tạm dừng và phát video bằng cách nhấp vào nút hoặc chính video đó

Triển khai thanh tiến trình

Để thêm thanh tiến trình cập nhật video khi phát, hãy cập nhật tệp 

5    
6    
Custom HTML5 Video Player
7    
11    
12      
14          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
18          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
21        
Your browser doesn't support HTML5 video.
24
3 của bạn với thông tin sau

2
6      
8    ►

sao chép

Để làm cho thanh tiến trình có tính tương tác, hãy cập nhật tệp 

5    
6    
Custom HTML5 Video Player
7    
11    
12      
14          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
18          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
21        
Your browser doesn't support HTML5 video.
24
5 của bạn để trông như thế này

1const video = document.querySelector[".video"];
2const toggleButton = document.querySelector[".toggleButton"];
3const progress = document.querySelector[".progress"];
4const progressBar = document.querySelector[".progress__filled"];
7  if [video.paused || video.ended] {
14function updateToggleButton[] {
15  toggleButton.innerHTML = video.paused ? "►" : "❚ ❚";
18function handleProgress[] {
19  const progressPercentage = [video.currentTime / video.duration] * 100;
20  progressBar.style.flexBasis = `${progressPercentage}%`;
24  const scrubTime = [e.offsetX / progress.offsetWidth] * video.duration;
25  video.currentTime = scrubTime;
28toggleButton.addEventListener["click", togglePlay];

  


29video.addEventListener["click", togglePlay];
30video.addEventListener["play", updateToggleButton];
31video.addEventListener["pause", updateToggleButton];
33video.addEventListener["timeupdate", handleProgress];
34progress.addEventListener["click", scrub];
36progress.addEventListener["mousedown", [] => [mousedown = true]];
37progress.addEventListener["mousemove", [e] => mousedown && scrub[e]];
38progress.addEventListener["mouseup", [] => [mousedown = false]];

sao chép

Chúng tôi đã chọn phần tử DOM của thanh tiến trình và thêm một trình lắng nghe sự kiện vào đối tượng 

3    src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650352188/production.mp4"
7    src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650352188/production.mp4"
10  
Your browser doesn't support HTML5 video.
1 thực thi hàm 
1const video = document.querySelector[".video"];
2const toggleButton = document.querySelector[".toggleButton"];
4  if [video.paused || video.ended] {
10function updateToggleButton[] {
11  toggleButton.innerHTML = video.paused ? "►" : "❚❚";
13toggleButton.addEventListener["click", togglePlay];
14video.addEventListener["click", togglePlay];
15video.addEventListener["play", updateToggleButton];
16video.addEventListener["pause", updateToggleButton];
3 trên 
1const video = document.querySelector[".video"];
2const toggleButton = document.querySelector[".toggleButton"];
4  if [video.paused || video.ended] {
10function updateToggleButton[] {
11  toggleButton.innerHTML = video.paused ? "►" : "❚❚";
13toggleButton.addEventListener["click", togglePlay];
14video.addEventListener["click", togglePlay];
15video.addEventListener["play", updateToggleButton];
16video.addEventListener["pause", updateToggleButton];
4. Hàm 
1const video = document.querySelector[".video"];
2const toggleButton = document.querySelector[".toggleButton"];
4  if [video.paused || video.ended] {
10function updateToggleButton[] {
11  toggleButton.innerHTML = video.paused ? "►" : "❚❚";
13toggleButton.addEventListener["click", togglePlay];
14video.addEventListener["click", togglePlay];
15video.addEventListener["play", updateToggleButton];
16video.addEventListener["pause", updateToggleButton];
3 tính toán tỷ lệ phần trăm thời gian hiện tại của video so với tổng thời lượng của video, sau đó cập nhật kiểu khi video tiếp tục

Chúng tôi cũng đã thêm chức năng 

1const video = document.querySelector[".video"];
2const toggleButton = document.querySelector[".toggleButton"];
4  if [video.paused || video.ended] {
10function updateToggleButton[] {
11  toggleButton.innerHTML = video.paused ? "►" : "❚❚";
13toggleButton.addEventListener["click", togglePlay];
14video.addEventListener["click", togglePlay];
15video.addEventListener["play", updateToggleButton];
16video.addEventListener["pause", updateToggleButton];
6 để lọc video đến một điểm cụ thể liên quan đến thanh tiến trình

Lưu các thay đổi và xem trước ứng dụng trong trình duyệt của bạn để xem trạng thái cập nhật của trình phát video

Thêm thanh trượt âm lượng và tốc độ phát lại

Để thêm thanh trượt tùy chỉnh sẽ được sử dụng để quản lý trạng thái âm lượng và tốc độ phát lại, hãy cập nhật tệp 

5    
6    
Custom HTML5 Video Player
7    
11    
12      
14          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
18          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
21        
Your browser doesn't support HTML5 video.
24
3 của bạn với thông tin sau

1
2  //...
6    
8  ►
14    class="controls__slider"
23    class="controls__slider"

sao chép

Chúng tôi đã thêm hai thẻ 

1const video = document.querySelector[".video"];
2const toggleButton = document.querySelector[".toggleButton"];
4  if [video.paused || video.ended] {
10function updateToggleButton[] {
11  toggleButton.innerHTML = video.paused ? "►" : "❚❚";
13toggleButton.addEventListener["click", togglePlay];
14video.addEventListener["click", togglePlay];
15video.addEventListener["play", updateToggleButton];
16video.addEventListener["pause", updateToggleButton];
8 với giá trị 
1const video = document.querySelector[".video"];
2const toggleButton = document.querySelector[".toggleButton"];
4  if [video.paused || video.ended] {
10function updateToggleButton[] {
11  toggleButton.innerHTML = video.paused ? "►" : "❚❚";
13toggleButton.addEventListener["click", togglePlay];
14video.addEventListener["click", togglePlay];
15video.addEventListener["play", updateToggleButton];
16video.addEventListener["pause", updateToggleButton];
9 của 
2
6      
8    ►
0 với giá trị được xác định trước là 
2
6      
8    ►
1 và 
2
6      
8    ►
2 cho âm lượng và tốc độ phát lại, tương ứng

Bây giờ hãy cập nhật tệp 

5    
6    
Custom HTML5 Video Player
7    
11    
12      
14          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
18          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
21        
Your browser doesn't support HTML5 video.
24
5 của bạn bằng mã sau để làm cho các thanh trượt hoạt động

1const video = document.querySelector[".video"];
2const toggleButton = document.querySelector[".toggleButton"];
3const progress = document.querySelector[".progress"];
4const progressBar = document.querySelector[".progress__filled"];
6const sliders = document.querySelectorAll[".contols__slider"];
10function updateToggleButton[] {
13function handleProgress[] {
19function handleSliderUpdate[] {
20  video[this.name] = this.value;
23sliders.forEach[[slider] => {
24  slider.addEventListener["change", handleSliderUpdate];

sao chép

Chúng tôi đã chọn các phần tử 

2
6      
8    ►
4 và đính kèm một trình xử lý sự kiện cho mỗi phần tử đó để kích hoạt hàm 
2
6      
8    ►
5. Hàm này sử dụng các thuộc tính 
2
6      
8    ►
6 và 
2
6      
8    ►
7 của thanh trượt để xác định trạng thái của thanh trượt

Nếu bạn xem trước trang trong trình duyệt của mình, bạn sẽ thấy các thanh trượt

Thêm điều khiển bỏ qua

Thêm phần sau vào tệp 

5    
6    
Custom HTML5 Video Player
7    
11    
12      

  


14          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
18          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
21        
Your browser doesn't support HTML5 video.
24
3 của bạn

1
//...
4    
6  ►
7   
10  « 10s
11  10s »

sao chép

Chúng tôi đã thêm hai nút có thuộc tính dữ liệu sẽ được truy cập bằng JavaScript. Để làm cho các nút hoạt động, hãy cập nhật tệp 

5    
6    
Custom HTML5 Video Player
7    
11    
12      
14          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
18          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
21        
Your browser doesn't support HTML5 video.
24
5 của bạn với thông tin sau

5    
6    
Custom HTML5 Video Player
7    
11    
12      
14          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
18          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
21        
Your browser doesn't support HTML5 video.
24
0

sao chép

Chúng tôi đã chọn các nút của mình bằng phương pháp 

1const video = document.querySelector[".video"];
2const toggleButton = document.querySelector[".toggleButton"];
3const progress = document.querySelector[".progress"];
4const progressBar = document.querySelector[".progress__filled"];
7  if [video.paused || video.ended] {
14function updateToggleButton[] {
15  toggleButton.innerHTML = video.paused ? "►" : "❚ ❚";
18function handleProgress[] {
19  const progressPercentage = [video.currentTime / video.duration] * 100;
20  progressBar.style.flexBasis = `${progressPercentage}%`;
24  const scrubTime = [e.offsetX / progress.offsetWidth] * video.duration;
25  video.currentTime = scrubTime;
28toggleButton.addEventListener["click", togglePlay];
29video.addEventListener["click", togglePlay];
30video.addEventListener["play", updateToggleButton];
31video.addEventListener["pause", updateToggleButton];
33video.addEventListener["timeupdate", handleProgress];
34progress.addEventListener["click", scrub];
36progress.addEventListener["mousedown", [] => [mousedown = true]];
37progress.addEventListener["mousemove", [e] => mousedown && scrub[e]];
38progress.addEventListener["mouseup", [] => [mousedown = false]];
0 và thêm một trình nghe vào mỗi nút gọi hàm 
1const video = document.querySelector[".video"];
2const toggleButton = document.querySelector[".toggleButton"];
3const progress = document.querySelector[".progress"];
4const progressBar = document.querySelector[".progress__filled"];
7  if [video.paused || video.ended] {
14function updateToggleButton[] {
15  toggleButton.innerHTML = video.paused ? "►" : "❚ ❚";
18function handleProgress[] {
19  const progressPercentage = [video.currentTime / video.duration] * 100;
20  progressBar.style.flexBasis = `${progressPercentage}%`;
24  const scrubTime = [e.offsetX / progress.offsetWidth] * video.duration;
25  video.currentTime = scrubTime;
28toggleButton.addEventListener["click", togglePlay];
29video.addEventListener["click", togglePlay];
30video.addEventListener["play", updateToggleButton];
31video.addEventListener["pause", updateToggleButton];
33video.addEventListener["timeupdate", handleProgress];
34progress.addEventListener["click", scrub];
36progress.addEventListener["mousedown", [] => [mousedown = true]];
37progress.addEventListener["mousemove", [e] => mousedown && scrub[e]];
38progress.addEventListener["mouseup", [] => [mousedown = false]];
1 khi nhấp. Hàm này sau đó sẽ cập nhật thời gian hiện tại của video dựa trên giá trị được chỉ định trong thuộc tính 
1const video = document.querySelector[".video"];
2const toggleButton = document.querySelector[".toggleButton"];
3const progress = document.querySelector[".progress"];
4const progressBar = document.querySelector[".progress__filled"];
7  if [video.paused || video.ended] {
14function updateToggleButton[] {
15  toggleButton.innerHTML = video.paused ? "►" : "❚ ❚";
18function handleProgress[] {
19  const progressPercentage = [video.currentTime / video.duration] * 100;
20  progressBar.style.flexBasis = `${progressPercentage}%`;
24  const scrubTime = [e.offsetX / progress.offsetWidth] * video.duration;
25  video.currentTime = scrubTime;
28toggleButton.addEventListener["click", togglePlay];
29video.addEventListener["click", togglePlay];
30video.addEventListener["play", updateToggleButton];
31video.addEventListener["pause", updateToggleButton];
33video.addEventListener["timeupdate", handleProgress];
34progress.addEventListener["click", scrub];
36progress.addEventListener["mousedown", [] => [mousedown = true]];
37progress.addEventListener["mousemove", [e] => mousedown && scrub[e]];
38progress.addEventListener["mouseup", [] => [mousedown = false]];
2

Thêm phím tắt

Chúng ta có thể tận dụng sự kiện bàn phím mặc định 

1const video = document.querySelector[".video"];
2const toggleButton = document.querySelector[".toggleButton"];
3const progress = document.querySelector[".progress"];
4const progressBar = document.querySelector[".progress__filled"];
7  if [video.paused || video.ended] {
14function updateToggleButton[] {
15  toggleButton.innerHTML = video.paused ? "►" : "❚ ❚";
18function handleProgress[] {
19  const progressPercentage = [video.currentTime / video.duration] * 100;
20  progressBar.style.flexBasis = `${progressPercentage}%`;
24  const scrubTime = [e.offsetX / progress.offsetWidth] * video.duration;
25  video.currentTime = scrubTime;
28toggleButton.addEventListener["click", togglePlay];
29video.addEventListener["click", togglePlay];
30video.addEventListener["play", updateToggleButton];
31video.addEventListener["pause", updateToggleButton];
33video.addEventListener["timeupdate", handleProgress];
34progress.addEventListener["click", scrub];
36progress.addEventListener["mousedown", [] => [mousedown = true]];
37progress.addEventListener["mousemove", [e] => mousedown && scrub[e]];
38progress.addEventListener["mouseup", [] => [mousedown = false]];
3 để tùy chỉnh thêm trình phát video. Để thêm phím tắt vào ứng dụng, hãy thêm phím tắt này vào cuối tệp 
5    
6    
Custom HTML5 Video Player
7    
11    
12      
14          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
18          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
21        
Your browser doesn't support HTML5 video.
24
5 của bạn

5    
6    
Custom HTML5 Video Player
7    
11    
12      
14          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
18          src="//res.cloudinary.com/ifeomaimoh/video/upload/v1650567487/speech_ofvfzq.mp4"
21        
Your browser doesn't support HTML5 video.
24
1

sao chép

Để đơn giản hóa mọi thứ, chúng tôi chỉ thêm một phím tắt bật/tắt phát khi nhấn phím cách trên bàn phím. Bạn có thể ghi đối tượng sự kiện vào bảng điều khiển để xem các thuộc tính khác

Tìm dự án ở đây trên GitHub

Phần kết luận

Cho đến nay, chúng ta đã xem xét phần tử video HTML5 mặc định và cách tạo các điều khiển tùy chỉnh cho phần tử đó, nhưng bạn không cần phải dừng ở đây. Thông tin thêm có sẵn trong tài liệu chính thức

Làm cách nào để thêm các điều khiển video trong JavaScript?

API JavaScript dành cho các thành phần phương tiện cung cấp 3 phương pháp để kiểm soát chúng. .
chơi[]. bắt đầu [hoặc khởi động lại] phát tệp phương tiện
tạm ngừng[]. dừng phát lại ở vị trí hiện tại
trọng tải[]. cho phép thay thế video đang hoạt động trong trình phát bằng một video khác [ví dụ: sau khi thay đổi thuộc tính src]

Thuộc tính nào thêm các điều khiển video?

Thuộc tính điều khiển là thuộc tính boolean. Khi xuất hiện, nó chỉ định rằng các điều khiển video sẽ được hiển thị. Điều khiển video nên bao gồm. Chơi.

Làm cách nào để thêm nút vào video trong HTML?

Đặt thuộc tính src trong nguồn thành liên kết video của bạn và chỉ định loại liên kết . Để tạo nút tùy chỉnh, bạn có thể tạo vùng chứa chứa cả video và nút tùy chỉnh. Nút sẽ được chỉnh sửa vị trí thành tuyệt đối bằng cách sử dụng CSS để làm cho nút xuất hiện ở đúng vị trí trong video [được điều chỉnh bằng CSS].

Thẻ nào được sử dụng để chèn tệp video có điều khiển?

Thẻ được sử dụng để nhúng nội dung video vào tài liệu, chẳng hạn như một đoạn phim hoặc các luồng video khác. Thẻ

Bài Viết Liên Quan

Anime Expo 2023 được tổ chức ở đâu?
Vỏ trăn bóng tùy chỉnh
CSS thả xuống đa lựa chọn tùy chỉnh
Số có một chữ số trong chương trình Python
1kg m3 bằng bao nhiêu g cm3
Lấy mẫu lại python bootstrap
Nhận giá trị của nút javascript được nhấp
Điều nào sau đây đúng về hàm Preg_match()?
Cuộc diễu hành của ba vị vua 2023 Morelia
Tên tệp sổ làm việc Excel có thể chứa bao nhiêu ký tự?
Những số nào nằm trên đường chéo thứ hai của tam giác Pascals?
Từ khóa này trong JavaScript là gì
Cách di chuyển mọi thứ xuống một hàng trong Excel
Huấn hoa hồng sn bao nhiêu
PHP có trình thông dịch không?
Mã Python trên Visual Studio Code
Gói toán học nào trong Python?
Lưỡi dao Javascript
Lỗ hổng python 3.9
Cài đặt trăn Camelot

Toplist mới

#1
Top 9 tập bản đồ lớp 8 bài 31 2023
6 tháng trước
#2
Top 6 kết quả thi hsg đà nẵng 2022 2023
6 tháng trước
#3
Top 9 tủ nhựa đài loan 4 cánh 3d 2023
6 tháng trước
#4
Top 9 chất khí có thể làm mất màu dung dịch nước brom là: a. so2. b. co2. c. o2. d. hcl. 2023
6 tháng trước
#5
Top 8 tìm việc làm tiện, phay bảo q7 2023
6 tháng trước
#6
Top 3 tôi xuyên thành tiểu kiều the của lão đại phản 2 2023
6 tháng trước
#7
Top 9 đổi mới phong cách, thái độ phục vụ của cán bộ y tế hướng tới sự hài lòng của người bệnh 2023
6 tháng trước
#8
Top 2 bài the dục phát triển chung lớp 6 2022 2023
6 tháng trước
#9
Top 3 bài giảng vũ điệu sắc màu (lớp 4) 2023
6 tháng trước

Bài mới nhất

Nghiệp vụ tín dụng ngân hàng là gì năm 2024
Lý luận mác lênin có phải đã lỗi thời năm 2024
Lỗi font chữ trong tiêu đề thư trong outlook 2007 năm 2024
Lỗi không cài dat dirve may in sp7000 năm 2024
Lỗi trùng chưng minh thư của người phụ thuộc năm 2024
Viết một đoạn văn tả cây bóng mát năm 2024
Top 10 headhunt tuyen dung bat dong san hieu qua năm 2024
Kèo ft châu á 1x2 là gì năm 2024
Top 1 thịnh hành ngày 12 5 2023 năm 2024
Bài văn tưởng tượng biến thành con meo trong 3ngay năm 2024

Chủ Đề

programming Hỏi Đáp Toplist Là gì Mẹo Hay Địa Điểm Hay Học Tốt mẹo hay Công Nghệ Nghĩa của từ Bao nhiêu Khỏe Đẹp đánh giá Top List bao nhieu bao nhiêu hướng dẫn Xây Đựng So Sánh Bài tập So sánh Tiếng anh Sản phẩm tốt Ngôn ngữ Bài Tập javascript Ở đâu Thế nào Hướng dẫn Dịch Máy tính Tại sao Đại học Món Ngon Khoa Học