tutorial membuat video dengan css3 dan html 5
TRANSCRIPT
5/17/2018 Tutorial Membuat Video Dengan CSS3 Dan HTML 5 - slidepdf.com
http://slidepdf.com/reader/full/tutorial-membuat-video-dengan-css3-dan-html-5 1/15
Tutorial Membuat Video dengan CSS3 dan HTML 5
Langkah pertama yang dibutuhkan
+ Dreamweaver
+ Xampp
+ Tentunya Browser untuk menjalankan hasilnya
Pertama jalankan control panel xampp
5/17/2018 Tutorial Membuat Video Dengan CSS3 Dan HTML 5 - slidepdf.com
http://slidepdf.com/reader/full/tutorial-membuat-video-dengan-css3-dan-html-5 2/15
Kemudian jalankan aplikasi dreamweaver
Pilih Create New – HTML
Isikan script dibawah ini :
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tugas Jquery</title>
<link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />
5/17/2018 Tutorial Membuat Video Dengan CSS3 Dan HTML 5 - slidepdf.com
http://slidepdf.com/reader/full/tutorial-membuat-video-dengan-css3-dan-html-5 3/15
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.besar.js"></script>
<link rel="stylesheet" type="text/css" href="css/zoom.css" media="screen" />
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
<style type="text/css">
#gallery {
background-color: #00F;
padding: 10px;
width: 520px;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
}
5/17/2018 Tutorial Membuat Video Dengan CSS3 Dan HTML 5 - slidepdf.com
http://slidepdf.com/reader/full/tutorial-membuat-video-dengan-css3-dan-html-5 4/15
#gallery ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;
}
#gallery ul a:hover { color: #fff; }
#apDiv1 {
position:absolute;
width:515px;
height:185px;
z-index:1;
top: 262px;
}
</style>
</head>
<body>
<div id="apDiv1"><video width="529" height="459" controls="controls">
<source src="video/2828.mov" type="video/mp4" />
<source src="video/2828.ogg" type="video/ogg" />
</div>
<h2 id="example">Contoh</h2>
5/17/2018 Tutorial Membuat Video Dengan CSS3 Dan HTML 5 - slidepdf.com
http://slidepdf.com/reader/full/tutorial-membuat-video-dengan-css3-dan-html-5 5/15
<p>Penggunaan Jquery pada image.</p>
<div id="gallery">
<ul>
<li>
<a href="photos/zoom1.jpg" title="Klik Next diatas untuk melihat foto selanjutnya dan Close
untup Menutup">
<img src="photos/gmbr1.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/zoom2.jpg" title="Klik Next/Prev diatas untuk melihat foto selanjutnya dan Close
untup Menutup">
<img src="photos/gmbr2.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/zoom3.jpg" title="Klik Next/Prev diatas untuk melihat foto selanjutnya dan Close
untup Menutup">
<img src="photos/gmbr3.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/zoom4.jpg" title="Klik Next/Prev diatas untuk melihat foto selanjutnya dan Closeuntup Menutup">
<img src="photos/gmbr4.jpg" width="72" height="72" alt="" />
</a>
</li>
5/17/2018 Tutorial Membuat Video Dengan CSS3 Dan HTML 5 - slidepdf.com
http://slidepdf.com/reader/full/tutorial-membuat-video-dengan-css3-dan-html-5 6/15
</ul>
</div>
</body>
</html>
Masih sama dengan menggunakan tutorial pertama hanya saja kita menambahkan
<div id="apDiv1"><video width="529" height="459" controls="controls">
<source src="video/2828.mov" type="video/mp4" />
<source src="video/2828.ogg" type="video/ogg" />
5/17/2018 Tutorial Membuat Video Dengan CSS3 Dan HTML 5 - slidepdf.com
http://slidepdf.com/reader/full/tutorial-membuat-video-dengan-css3-dan-html-5 7/15
Kemudian Save dengan nama Index.html
Apabila sudah di save
Pilih File – New – CSS -- Create ( perintah disini dimaksudkan untuk membuat css yang di butuhkan
dalam design html tersebut
Lalu masukan script dibawah ini
@charset "utf-8";
/* CSS Document */
#jquery-overlay {
position: absolute;
5/17/2018 Tutorial Membuat Video Dengan CSS3 Dan HTML 5 - slidepdf.com
http://slidepdf.com/reader/full/tutorial-membuat-video-dengan-css3-dan-html-5 8/15
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
}
#jquery-lightbox {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
position: absolute;
top: 40%;
left: 0%;
5/17/2018 Tutorial Membuat Video Dengan CSS3 Dan HTML 5 - slidepdf.com
http://slidepdf.com/reader/full/tutorial-membuat-video-dengan-css3-dan-html-5 9/15
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#lightbox-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
width: 49%;
height: 100%;
zoom: 1;
display: block;
}
#lightbox-nav-btnPrev {
left: 0;
float: left;
}
#lightbox-nav-btnNext {
right: 0;
float: right;
5/17/2018 Tutorial Membuat Video Dengan CSS3 Dan HTML 5 - slidepdf.com
http://slidepdf.com/reader/full/tutorial-membuat-video-dengan-css3-dan-html-5 10/15
}
#lightbox-container-image-data-box {
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100%;
padding: 0 10px 0;
}
#lightbox-container-image-data {
padding: 0 10px;
color: #666;
}
#lightbox-container-image-data #lightbox-image-details {
width: 70%;
float: left;
text-align: left;
}
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
display: block;
clear: left;
padding-bottom: 1.0em;
}
#lightbox-secNav-btnClose {
width: 66px;
float: right;
5/17/2018 Tutorial Membuat Video Dengan CSS3 Dan HTML 5 - slidepdf.com
http://slidepdf.com/reader/full/tutorial-membuat-video-dengan-css3-dan-html-5 11/15
padding-bottom: 0.7em;
}
# Save dengan nama zoom.css
Untuk pembuatan jss sama seperti tahapan di atas…
Oke untuk mempersingkat waktu dari file2 di atas copy atau pindahkan di C/xampp/htdocs/dengan
nama file tugasJquery
Jadikan selalu dalam satu file, kemudian kita buat untuk tampilan gambarnya dalam script di index
tersebut di jelaskan dengan script
PENTING!!
5/17/2018 Tutorial Membuat Video Dengan CSS3 Dan HTML 5 - slidepdf.com
http://slidepdf.com/reader/full/tutorial-membuat-video-dengan-css3-dan-html-5 12/15
<div id="apDiv1"><video width="529" height="459" controls="controls">
<source src="video/2828.mov" type="video/mp4" />
<source src="video/2828.ogg" type="video/ogg" />
Script ini di masukan dengan tujuan untuk memanggil video maupun audio yang ada di file video
lalu simpan
Disitu dijelaskan agar kita membuat 2 foto dengan ukuran yang berbeda 72x72 dan yang satu bebas
Contoh yang sudah jadi
5/17/2018 Tutorial Membuat Video Dengan CSS3 Dan HTML 5 - slidepdf.com
http://slidepdf.com/reader/full/tutorial-membuat-video-dengan-css3-dan-html-5 13/15
Begitu juga untuk membuat tampilan next/prev/close kita buat dengan nama file images lalu simpan
Ini contohnya
5/17/2018 Tutorial Membuat Video Dengan CSS3 Dan HTML 5 - slidepdf.com
http://slidepdf.com/reader/full/tutorial-membuat-video-dengan-css3-dan-html-5 14/15
Setelah semua sudah di simpan dengan satu file mari kita coba jalankan dengan memanggil di browser
kita dengan perintah file:///C:/xampp/htdocs/tugasJquery/index.htm
Untuk melihat hasil kita play atau jalankan video tersebut
Maka akan didapatkan hasil yang seperti ini, terima kasih telah membaca tutorial yang saya buat
5/17/2018 Tutorial Membuat Video Dengan CSS3 Dan HTML 5 - slidepdf.com
http://slidepdf.com/reader/full/tutorial-membuat-video-dengan-css3-dan-html-5 15/15
semoga ilmu yang saya berikan bermanfaat buat kalian……