Bagaimana cara agar tombol putar ditampilkan di video saya dalam html?

Di sini, di tutorial ini, saya akan memberi tahu Anda cara membuat tombol jeda putar untuk video HTML5 dengan mudah menggunakan cuplikan kode sederhana

Table of Contents Show

Kode lengkap untuk tombol Putar dan Jeda untuk video HTML5
7 tanggapan untuk “Tombol Putar/Jeda Untuk Video HTML5 Menggunakan JavaScript”
Bagaimana cara menampilkan tombol putar pada video dalam HTML?
Bagaimana Anda menambahkan tombol putar di HTML?
Mengapa video saya tidak memutar kode HTML?
Bagaimana cara membuat video dapat diputar dalam HTML?

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.
  Putar video1
  Browser Anda tidak mendukung video HTML5
  Putar video1
  Browser Anda tidak mendukung video HTML5
  // buat array untuk semua video. Saya memisahkan menggunakan ',' (spasi koma)
  var str=’video1. mov, video2. mov, video3. mov, video4. mov, video5. mov, video6. mov, video7. bergerak’;
  var myVideoList = str. membelah(', ');
  // konsol. log(DaftarVideoku);
  fungsi do_vidBtnClick ( inputNum )
  {
  var inum = inputNum
  var myVid=myVideoList[ inum-1 ];
  // Anda mengatur jalur video Anda di baris berikutnya
  myFileName=”/assets/images/howto/”+ myVid
  var myDId=”myvid”+inum;
  // siapkan video, hapus putar otomatis, aktifkan kontrol
  myVideo = dokumen. getElementById(myDId);
  video saya. hapusAtribut('putar otomatis');
  video saya. src = NamaFile saya;
  video saya. kontrol = benar;
  video saya. memuat();
  }
Androidena .
Metode 2. Menggunakan metode play() dan pause(). Metode play() dalam JavaScript digunakan untuk mencoba memutar file media. Di jQuery, file video pertama kali dipilih menggunakan pemilih dan elemen sebenarnya dipilih menggunakan metode get(). Kemudian metode play() digunakan pada elemen ini untuk mencoba memulai video
Collins mengatakan.
Terima kasih, itu sangat membantu…. Tolong bisakah Anda membantu saya dengan kode untuk membuat galeri video seperti youtube atau sesuatu yang terkait dengannya…

Bagaimana cara menampilkan tombol putar pada video dalam HTML?

Metode putar DOM Audio/Video HTML (). . Tip. Gunakan metode pause() untuk menjeda audio/video saat ini. The play() method starts playing the current audio or video. Tip: Use the pause() method to pause the current audio/video.

Bagaimana Anda menambahkan tombol putar di HTML?

Tampilkan aktivitas pada postingan ini. .

Anda dapat menggunakan properti CSS. position , left dan top untuk mengubah lokasi elemen html

HTMLMediaElement has a method named play() ,you can call play() in javascript to make

You can use z-index CSS property to make sure that

Mengapa video saya tidak memutar kode HTML?

Browser tempat Anda mencoba melihat video mungkin tidak mendukung codec format HTML5 . Anda dapat memeriksanya, dengan memutar video di banyak browser. Jika Anda dapat menonton video halaman web di browser lain, itu adalah masalah kompatibilitas HTML5 dengan browser tertentu.

Bagaimana cara membuat video dapat diputar dalam HTML?

HTML memungkinkan pemutaran video di browser web dengan menggunakan tag . Untuk menyematkan video di halaman web, kami menggunakan elemen src untuk menyebutkan alamat file dan atribut lebar dan tinggi digunakan untuk menentukan ukurannya. Contoh. Dalam contoh ini, kami menggunakan tag