Beberapa keseronokan yang tidak bersalah dengan video dan kemajuan HTML

Projek ini bermula dengan video latihan tempat kerja mengenai buli -sumber tenaga kreatif yang benar -benar memberi inspirasi! UI elegan video, terutamanya bar kemajuan kecerunannya, mencetuskan idea. Saya tahu mewujudkan kecerunan yang sama pada<progress></progress> Elemen adalah mungkin (terima kasih kepada post-tricks CSS Pankaj Parashar), tetapi tidak menyelidiki manipulasi video atau JavaScript secara meluas. Cabaran itu berlaku!

Matlamatnya adalah mudah: menyegerakkan nilai bar kemajuan dengan kemajuan main balik video. Ia terbukti lebih menyeronokkan daripada yang dijangkakan.

HTML

HTML5 tulen:

<video src="http://html5videoformatconverter.com/data/images/happyfit2.mp4"></video>
<figcaption>
  ► <button id="play">►</button>
  <progress id="progress" max="100" value="0">Kemajuan</progress>
  <label for="progress" id="timer" role="timer"></label>
</figcaption>

The<progress></progress> Elemen adalah kunci: max="100" menetapkan nilai maksimum, dan value="0" memulakannya kepada sifar, mewakili 0% kemajuan.

CSS Styling

Saya tidak akan mengulangi CSS yang sangat baik Pankaj, tetapi inilah kod untuk bar kemajuan kecerunan, memastikan keserasian penyemak imbas:

 kemajuan [nilai] {
  Penampilan: Tiada; / * Safari */
  Sempadan: Tiada; / * Firefox */
  Warna: #e52E71; / * Fallback */
}

Kemajuan [nilai] ::-WebKit-Progress-Value {
  Latar Belakang-imej: Linear-Gradient (ke kanan, #FF8A00, #e52E71);
  Peralihan: lebar 1s linear;
}

kemajuan [nilai] ::-moz-progress-bar {
  Latar Belakang-imej: -Moz-Linear-Gradient (kanan, #FF8A00, #E52E71);
}

JavaScript: Menghubungkan titik -titik

JavaScript melibatkan langkah -langkah ini:

1. Dapatkan masa dan tempoh video semasa: video.currentTime dan video.duration .
2. Kirakan peratusan kemajuan: (currentTime / duration) * 100 .
3. Kemas kini Kemajuan Bar Nilai: progress.value = roundedPercentage .
4. Paparkan masa berlalu: Kemas kini elemen pemasa.

Inilah kod yang ditapis, menggabungkan pengurusan negeri dan requestAnimationFrame untuk prestasi yang lebih baik (terima kasih kepada input berharga Neal Fennimore):

 const video = document.QuerySelector ('Video');
const progress = document.getElementById ('Progress');
const timer = document.getElementById ('pemasa');
const button = document.getElementById ('Play');

const dijeda = 'dijeda';
const bermain = 'bermain';
biarkan keadaan = dijeda;

fungsi kemajuanLoop () {
  jika (state === bermain) {
    progress.value = Math.Round ((Video.CurrentTime / Video.Duration) * 100);
    timer.innerHtml = Math.Round (Video.CurrentTime) 'Seconds';
    RequestAnimationFrame (ProgressLoop);
  }
}

fungsi onplay () {
  Negeri = bermain;
  ProgressLoop ();
  butang.innerHtml = "❙❙";
}

fungsi onpause () {
  Negeri = Jeda;
  butang.innerHtml = "►";
}

fungsi onclick () {
  jika (state === dijeda) {
    video.play ();
  } else {
    video.pause ();
  }
}

video.addeventListener ('main', onplay);
video.addeventListener ('jeda', onpause);
Button.AdDeventListener ('klik', onClick);

Kod ini dengan cekap mengemas kini bar kemajuan dan pemasa, memberikan pengalaman pengguna yang lancar dan responsif. Penambahan butang Play/Jeda meningkatkan kebolehgunaan, sementara pengurusan negeri dan penggunaan requestAnimationFrame memastikan pelaksanaan yang bersih dan pelaku. Dan ya, saya mengakui kuiz video latihan itu!

Atas ialah kandungan terperinci Beberapa keseronokan yang tidak bersalah dengan video dan kemajuan HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!