July 13, 2024

Membuat Kontrol Video Sendiri Menggunakan HTML5 dan JavaScript

1 min read

Assalamu’alaikum Warahmatullahi wabarokatuh…

Halo PalComSter!
Kalau sebelumnya kita membahas tutorial tentang Input file video dan audio menggunakan HTML5, nah Kali ini saya akan berbagi sedikit tips dan cara membuat kontrol video sendiri menggunakan html5. Sebenernya, di dalam tag

[sourcecode languege=”php”]

Kontrol Video

[/sourcecode]

Langkah ke 2
Untuk di bagianMasukkan script berikut :
Dibagian ini kita akan masukkan kode untuk videonya terlebih dahulu

[sourcecode languege=”php”]
<video width="420" height="280" poster="despicable-me.jpg"><source src="mov_doll.mp4" type="video/mp4" /><source src="mov_doll.ogg" type="video/ogg" /><object width="420" height="280" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://news.palcomtech.com/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" /><param name="flashvars" value="url=/wp-admin/mov_doll.mp4&poster=/wp-admin/despicable-me.jpg" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="true" /><embed width="420" height="280" type="application/x-shockwave-flash" src="http://news.palcomtech.com/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" flashvars="url=/wp-admin/mov_doll.mp4&poster=/wp-admin/despicable-me.jpg" allowfullscreen="true" allowscriptaccess="true" /></object>

</video>
[/sourcecode]

Langkah 3
Di bagian ini kita tambahkan kode JavaScript agar kita bisa mengontrol videonya sendiri, masukkan script di bawah ini sebelum kode

[sourcecode languege=”php”]
<script type="text/javascript">// <![CDATA[
var video =
document.getElementsByTagName(‘video’)[0];
function toggleMute(){
video.muted = !video.muted;
}
// ]]></script>

<a href="JavaScript:video.play();">Mainkan </a> |
<a href="JavaScript:video.pause();">Hentikan </a> |
<a href="JavaScript:video.toggleMute();">Suara On/Off </a> |

[/sourcecode]

Kemudian jalankan di videonya di web browser, lihat contohnya dibawah ini:


Selamat mencoba, semoga bermanfaat :D.

[download id=”626″]

0 thoughts on “Membuat Kontrol Video Sendiri Menggunakan HTML5 dan JavaScript

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © All rights reserved. | Newsphere by AF themes.