Komentar: HTML5 menyediakan tag video baru, yang dapat langsung memutar video tanpa pemrograman. Anda hanya perlu menulis beberapa baris kode sederhana untuk menyesuaikan pemain.
Halaman web html<body>
<section>
<Video>
<Source src = "Video/Pendahuluan.mp4">
</dide>
<av>
<div>
<typon type = "Tombol"> Putar </button>
</div>
<div>
<div> </div>
</div>
<div> </div>
</sav>
</section>
</body>
Gaya CSS
tubuh{
Teks-Align: tengah;
}
header, bagian, footer, samping, nav, artikel, hgroup {
Tampilan: Blok;
}
#kulit{
Lebar: 700px;
Margin: 10px Auto;
padding: 5px;
Latar Belakang: Merah;
Perbatasan: 4px Solid Black;
Border-Radius: 20px;
}
nav {
margin: 5px 0px;
}
#buttons {
float: kiri;
Lebar: 70px;
Tinggi: 22px;
}
#defaultBar {
Posisi: kerabat;
float: kiri;
Lebar: 600px;
Tinggi: 14px;
padding: 4px;
Perbatasan: 1px solid black;
Latar Belakang: Kuning;
}
/*Progressbar ada di dalam defaultBar*/
#progressbar {
Posisi: Absolute;
Lebar: 0px; /*Kontrol Perubahan dengan JavaScript*/
Tinggi: 14px; /* dan DefaultBar adalah tinggi yang sama*/
Latar Belakang: Biru;
}
Kode JavaScript
fungsi dofisrt ()
{
Barsize = 600; // Berhati -hatilah untuk tidak menggunakan unit px, dan jangan gunakan var, ini adalah variabel global
myMovie = document.getElementById ('mymovie');
playbutton = document.geteLementById ('playbutton');
bar = document.getElementById ('defaultBar');
progressBar = document.geteLementById ('progressBar');
playbutton.addeventlistener ('klik', playorpause, false); // Parameter ketiga selalu salah, daftarkan pawang acara untuk fase bubblering.
bar.addeventListener ('klik', klik, false);
}
// Kontrol pemutaran film dan berhenti
function playorPause () {
if (! mymovie.paused &&! mymovie.ended) {
myMovie.paSe ();
playbutton.innerhtml = 'play';
window.clearInterval (updateBar);
}kalau tidak{
myMovie.play ();
playbutton.innerhtml = 'jeda';
updateDbar = setInterval (pembaruan, 500);
}
}
// Kontrol tampilan dinamis bilah kemajuan
function update () {
if (! mymovie.ended) {
var size = parseInt (mymovie.currenttime*barsize/mymovie.duration);
progressbar.style.width = size+'px';
}kalau tidak{
progressbar.style.width = '0px';
playbutton.innerhtml = 'play';
window.clearInterval (updateBar);
}
}
// Metode Kontrol Klik Progress Bar Mouse
fungsi klikbar (e) {
if (! mymovie.paused &&! mymovie.ended) {
var mousex = e.pagex-bar.offsetleft;
var newtime = mousex*mymovie.duration/barsize; // Waktu mulai yang baru
mymovie.currenttime = newtime;
progressbar.style.width = mousex+'px';
window.clearInterval (updateBar);
}
}
window.addeventListener ('load', dofisrt, false);
Untung, saya mengambil bagian kode