Di sini, di tutorial ini, saya akan memberi tahu Anda cara membuat tombol jeda putar untuk video HTML5 dengan mudah menggunakan cuplikan kode sederhana
Untuk mengembangkan tombol putar/jeda, pertama-tama mari buat pemutar video HTML5
Di bawah ini adalah kode HTML untuk membuat pemutar video HTML5
<div style="text-align:center"> <button id="vidbutton">Play</button> <br><br> <video id="myvid" width="420"> <source src="vid.mp4" type="video/mp4"> <source src="vid.ogg" type="video/ogg"> Your browser does not support HTML5 video. </video> </div>Kami telah menempatkan video di dalam elemen div dan semua konten di dalam elemen div akan berada di tengah. Jadi Anda bisa melihat video di tengah. Kami telah menetapkan ID untuk pemutar video "myvid" dan ID tombol "vidbutton". Kami akan menggunakan ID ini dalam JavaScript untuk interaksi
Nonaktifkan Bidang Input HTML Dan Jadikan Tidak Dapat Diklik
Sekarang Anda perlu menempatkan kode JavaScript di bawah ini
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"; } }_Hanya itu yang perlu kita lakukan. Kode di atas akan memberikan fungsionalitas pada tombol untuk memutar dan menjeda video. Juga, pada saat memutar video, itu akan menampilkan teks "Jeda" pada tombol dan setelah Anda menjeda video, itu akan menampilkan teks "Putar" pada tombol
Kode lengkap untuk tombol Putar dan Jeda untuk video HTML5
Di bawah ini adalah kode lengkap untuk membuat tombol Putar/Jeda untuk memutar dan menjeda video
<!DOCTYPE html> <html> <head> <title>Play/Pause button for HTML5 video using JavaScript</title> </head> <body> <div style="text-align:center"> <button id="vidbutton">Play</button> <br><br> <video id="myvid" width="420"> <source src="vid.mp4" type="video/mp4"> <source src="vid.ogg" type="video/ogg"> Your browser does not support HTML5 video. </video> </div> <script> 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"; } } </script> </body> </html>Sekarang kita akan menjalankannya di browser kita dan kemudian kita dapat memutar atau menjeda video hanya dengan menggunakan satu tombol Putar/Jeda. Anda juga bisa mencobanya
Bidang Input Pemilih Warna Sederhana Dalam Bentuk HTML
Mengubah warna teks pada kursor mouse – kode CSS
Setelah Anda memutar video dengan mengklik tombol putar, teks "Mainkan" akan segera berubah menjadi teks "Jeda" dan setelah Anda mengklik jeda, itu akan menjadi "Putar" lagi. Semua ini akan dilakukan oleh fungsi addEventListener JavaScript
Saya harap Anda menikmati tutorial ini dan juga bermanfaat bagi Anda
7 tanggapan untuk “Tombol Putar/Jeda Untuk Video HTML5 Menggunakan JavaScript”
cabul .
cepat dan bagus
karan mengatakan.
Terima kasih Tuhan. aku menemukannya. saya mencari ini dari 3 hari terakhir. kerja bagus
David berkata.
Bagaimana Anda melakukan ini dengan banyak video di satu halaman?
Patrick berkata.