December 25, 2017

Membuat Video Player dengan HTML


Selamat pagi sobat, mudah mudahan pada sehat semua. masih ingin tutorial lagi. Kini saya akan bagikan tutorial berkaitan dengan Web Design yaitu Membuat Video Player dengan HTML.
Selain digunakan dalam web, juga html tersedia syntax(</>) untuk menambahkan video pada suatu web. Oke langsung simak tutorialnya.

Berikut langkah - langkahnya

1. Buka text editor seperti Notepad, Notepad++, Sublime Text, Atom, Nano Editor, Gedit dll.
Ganti nama videoku.mp4 dengan video yang ingin di putar. usahakan dalam satu folder. kalu di luar folder sobat bisa memanggilnya dengan "/namafolder/videoku.mp4"
2. Tambahkan kode berikut:
 <!DOCTYPE html>
<html>
<head>
 <title>Membuat Pemutar Video dengan HTML</title> 
 <style type="text/css">

 h1{
  margin-top: 30px;
  font-family: sans-serif;
 }

 #footer{
  margin-top: 10%;
  text-align: center;
 }

 #footer a{
  text-decoration: none;
  color: #000;
 }
 </style> 
</head>
<body>
 <h1>Membuat Player video Dengan HTML5</h1> 
  
 <video controls="" width="400px" height="350px">
  <source src="videoku.mp4" type="video/mp4">
 </video>

 <div id="footer">
  Copyright &copy; 2017 <a href="http://thobib-lab.blogspot.co.id">Thobib Lab</a> All Right Reserved
 </div>
</body>
</html> 
3. Kemudian simpan, lalu jalankan dengan Web Browser seperti Google Chrome, Mozilla Firefox, Safari dll.

Demikian tutorial Membuat Video Player dengan HTML semoga bermanfaat.
Selamat mencoba

No comments: