Video có nút phát html

Ở đây trong hướng dẫn này, tôi sẽ cho bạn biết cách bạn có thể tạo nút tạm dừng phát cho video HTML5 một cách dễ dàng bằng các đoạn mã đơn giản

Để phát triển nút phát/tạm dừng, trước tiên hãy tạo trình phát video HTML5

Dưới đây là mã HTML để tạo trình phát video HTML5

 
  Play 
  


  

Chúng tôi đã đặt video bên trong phần tử div và tất cả nội dung bên trong phần tử div sẽ nằm ở trung tâm. Vì vậy, bạn có thể xem video ở trung tâm. Chúng tôi đã đặt ID cho trình phát video “myvid” và ID nút “vidbutton”. Chúng tôi sẽ sử dụng các ID này trong JavaScript để tương tác

Vô hiệu hóa trường nhập HTML và làm cho nó không thể nhấp được

Bây giờ bạn cần đặt mã JavaScript bên dưới

var ppbutton = document.getElementById("vidbutton");
ppbutton.addEventListener("click", playPause);

myVideo = document.getElementById("myvid");
function playPause() { 
    if (myVideo.paused) {
        myVideo.play();
        ppbutton.innerHTML = "Pause";
        }
    else  {
        myVideo.pause(); 
        ppbutton.innerHTML = "Play";
        }
}

Đó là tất cả những gì chúng ta cần làm. Đoạn mã trên sẽ cung cấp chức năng cho nút phát và tạm dừng video. Ngoài ra, trong thời gian phát video, nó sẽ hiển thị dòng chữ “Tạm dừng” trên nút và sau khi bạn tạm dừng video, nó sẽ hiển thị dòng chữ “Phát” trên nút

Hoàn thành mã cho nút Phát và Tạm dừng cho video HTML5

Dưới đây là mã hoàn chỉnh để tạo nút Phát/Tạm dừng để phát và tạm dừng video

 
 

  

 

 
  Play 
  


  
 

 

 

Bây giờ chúng tôi sẽ chạy nó trên trình duyệt của mình và sau đó chúng tôi có thể phát hoặc tạm dừng video chỉ bằng cách sử dụng một nút Phát/Tạm dừng. Bạn cũng có thể thử nó

Trường nhập bộ chọn màu đơn giản ở dạng HTML

Thay đổi màu văn bản khi di chuột – mã CSS

Sau khi bạn phát video bằng cách nhấp vào nút phát, văn bản “Phát” sẽ ngay lập tức thay đổi thành văn bản “Tạm dừng” và sau khi bạn nhấp vào tạm dừng, nó sẽ lại là “Phát”. Tất cả những điều này sẽ được thực hiện bởi hàm addEventListener của JavaScript

Tôi hy vọng bạn thích hướng dẫn này và nó cũng sẽ hữu ích cho bạn

7 phản hồi cho “Nút Play/Pause Cho Video HTML5 Sử Dụng JavaScript”

1. cuồng nhiệt nói.

   nhanh chóng và tốt đẹp

2. karan nói.

   cảm ơn chúa. tôi tìm thấy nó. tôi đang tìm kiếm cái này từ 3 ngày qua. công việc tuyệt vời

3. David nói.

   Làm thế nào để bạn làm điều này với nhiều video trên một trang?

   • Patrick nói.

     < cơ thể

     Phát video1
     Trình duyệt của bạn không hỗ trợ video HTML5
     

     Phát video1
     Trình duyệt của bạn không hỗ trợ video HTML5
     

     // tạo mảng cho tất cả các video. Tôi đang phân tách bằng cách sử dụng ', ' (dấu phẩy)
     var str=’video1. phim, video2. phim, video3. phim, video4. phim, video5. phim, video6. phim, video7. di chuyển’;
     var myVideoList = str. tách ra(', ');
     // bảng điều khiển. nhật ký (myVideoList);

     hàm do_vidBtnClick ( inputNum )
     {
     var inum = inputNum
     var myVid=myVideoList[ inum-1 ];
     // bạn đặt đường dẫn video của mình trên dòng tiếp theo
     myFileName=”/assets/images/howto/”+ myVid
     var myDId=”myvid”+inum;
     // thiết lập video, xóa tự động phát, bật điều khiển
     myVideo = tài liệu. getElementById(myDId);
     video của tôi. removeAttribute('autoplay');
     video của tôi. src = myFileName;
     video của tôi. điều khiển = đúng;
     video của tôi. trọng tải();
     }

4. Androidena nói.

   Phương pháp 2. Sử dụng phương thức play() và pause(). Phương thức play() trong JavaScript được sử dụng để thử phát lại tệp phương tiện. Trong jQuery, tệp video đầu tiên được chọn bằng bộ chọn và phần tử thực tế được chọn bằng phương thức get(). Sau đó, phương thức play() được sử dụng trên phần tử này để cố gắng bắt đầu video

5. Collins nói.

   Cảm ơn, nó thực sự hữu ích…. Xin vui lòng giúp tôi mã để tạo một thư viện video như youtube hoặc một cái gì đó liên quan đến nó…

   Làm cách nào để thêm nút tạm dừng phát trong video HTML?

   Phương thức tạm dừng DOM âm thanh/video HTML() . Mẹo. Sử dụng phương thức play() để bắt đầu phát âm thanh/video hiện tại. The pause() method halts (pauses) the currently playing audio or video. Tip: Use the play() method to start playing the current audio/video.

   Chúng tôi có thể phát video bằng HTML không?

   DOM HTML xác định các phương thức, thuộc tính và sự kiện cho phần tử . Điều này cho phép bạn tải, phát và tạm dừng video cũng như đặt thời lượng và âm lượng.

   Thẻ nào được sử dụng để phát một video clip trong HTML?