Ở đâ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
Your browser does not support HTML5 video.
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/Pause button for HTML5 video using JavaScriptPlayvar 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"; } }
Your browser does not support HTML5 video.
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”
cuồng nhiệt nói.
nhanh chóng và tốt đẹp
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
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 HTML5Phá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[];
}
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
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?
. Phần tử nhúng video. Phần tử HTML nhúng trình phát đa phương tiện hỗ trợ phát lại video vào tài liệu. Bạn cũng có thể sử dụng cho nội dung âm thanh nhưng phần tử có thể mang lại trải nghiệm người dùng phù hợp hơn