HTML video tag

HTML Elemen <video> adalah tag yang digunakan untuk menampilkan video di halaman website. sehingga pengguna untuk menonton video langsung di dalam browser secara realtime waktu berlangsung mereka tanpa harus instal plugin atau aplikasi program pemutar video eksternal.
Pada HTML5 elemen <video> ini mendukung format video modern yaitu seperti (MP4, WebM, dan Ogg Theora). Hal ini untuk memudahkan pengembang web untuk menampilkan video di berbagai platform dan perangkat tanpa harus khawatir dukungan format video yang berbeda-beda.
Pengembang web juga bisa menyisipkan Java Script untuk mengontrol pemutaran video, seperti (play pause stop) video secara otomatis, menentukan waktu yang tepat untuk mulai dan berhenti memutar video dan lain-lain.

1. html tag <video> putar video.mp4 controls

Memakai atribut controls maka komponen video secara default akan menampilkan beberapa opsi kontrol seprti Play, Pause, Mute, Percepat, Download

<!DOCTYPE html>
<html>
<body>
<h2 style="font-family:monospace;">Contoh: HTML Elemen &lt;video&gt; controls</h2>
<!--video-->
<video width="640" height="360" controls>
<source src="https://cicagak.my.id/media-posts/video/sample/vid-4.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<!--video-->
</body>
</html>

Cicagak Berbagi

2. html tag <video> putar otomatis (controls autoplay)

Dengan menambahkan atribut autoplay setelah contrrols maka video akan diputar secara otomatis

<!DOCTYPE html>
<html>
<body>
<h2 style="font-family:monospace;">Contoh: HTML Elemen &lt;video&gt; controls autoplay</h2>
<!--video-->
<video width="640" height="360" controls autoplay>
<source src="https://cicagak.my.id/media-posts/video/sample/vid-4.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<!--video-->
</body>
</html>

Cicagak Berbagi

3. html tag <video> putar berulang (controls loop)

Dengan menambahkan atribut loop setelah/sebelumya contrrols maka video akan diputar lagi setelah pemutaran selesai

<!DOCTYPE html>
<html>
<body>
<h2 style="font-family:monospace;">Contoh: HTML Elemen &lt;video&gt; controls loop</h2>
<!--video-->
<video width="640" height="360" controls loop>
<source src="https://cicagak.my.id/media-posts/video/sample/vid-4.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<!--video-->
</body>
</html>

Cicagak Berbagi

4. html tag <video> putar dengan javaScript

Contoh di bawah ini video di fungsikan dengan javaScript. mulai dari play | pause | hingga ukuran video. perhatikan pada kode box dibawah ini anda bisa mengedit dan menjalankanya secara realtime.

<!DOCTYPE html>
<html>
<style>
button{padding:5px; background:coral; color:white; border:none;}
button:hover {box-shadow: 0 0 2px #000; background:#9633ff;}
</style>
<body>
<div style="text-align:left">
<h2 style="font-family:monospace;">Contoh HTML Elemen &lt;video&gt; dengan tombol javaScript</h2>
<!--video-->
<video  id="vid1" width="480" >
<source src="https://cicagak.my.id/media-posts/video/sample/vid-4.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<!--video-->
<br>
<button id="btn1" onclick="playPause()">Play/Pause</button>
<button id="btn2" onclick="s240()">Size 240</button>
<button id="btn3" onclick="s360()">Size 360</button>
<button id="btn4" onclick="s480()">Size 480</button>
<button id="btn5" onclick="s560()">Size 560</button>
</div>

<script> 
var video1 = document.getElementById("vid1"); 
var btn1 = document.getElementById("btn1");
 
function playPause() { 
if (video1.paused) 
	video1.play(),btn1.style ="color:white; background:red;", btn1.innerText="Pause";
else 
	video1.pause(),btn1.style= "color:white; background:green;", btn1.innerText="Play" ; 
} 
function s240() {
	video1.width ="240";
} 
function s360() {
	video1.width ="360";
}
function s480() {
	video1.width ="480";
} 
function s560() {
	video1.width ="560";
} 
</script>
</body>
</html>

Cicagak Berbagi