Tutorial Membuat Video Dengan CSS3 Dan HTML 5

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



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" />



#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>



<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">


</a>

</li>

<li>

<a href="photos/zoom3.jpg" title="Klik Next/Prev diatas untuk melihat foto selanjutnya dan Close

untup Menutup">


</a>

</li>

<li>

<a href="photos/zoom4.jpg" title="Klik Next/Prev diatas untuk melihat foto selanjutnya dan Closeuntup Menutup">


</a>

</li>



</ul>

</div>

</body>

</html>

Masih sama dengan menggunakan tutorial pertama hanya saja kita menambahkan






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;



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%;



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;



}

#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;



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!!






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



Begitu juga untuk membuat tampilan next/prev/close kita buat dengan nama file images lalu simpan

Ini contohnya



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

http://c/xampp/htdocs/tugasJquery/index.htm






semoga ilmu yang saya berikan bermanfaat buat kalian……

Tutorial Membuat Video Dengan CSS3 Dan HTML 5

Documents

Transcript of Tutorial Membuat Video Dengan CSS3 Dan HTML 5