Script HTML5 untuk Memutar Video tanpa Plugin

Memutar video sekarang bukan hanya bisa dilakukan melalui Flash, melainkan juga bisa melalui elemen HTML5. Dengan demikian, website anda bisa lebih responsif jika dibuka dari perangkat apapun. Terutama jika berkaitan dengan bisnis di mana website responsif adalah tuntutan utamanya. Nah di sini, kita akan mengupas tuntas mengenai elemen HTML5 terbaru tersebut.

Elemen HTML5 yang dimaksud adalah elemen tag <video>. Elemen ini merupakan standar baru dalam menampilkan video di web tanpa perlu penggunaan plugin tambahan.

<video width=”320? height=”240? controls=”controls”>
<source src=”movie.mp4? type=”video/mp4?>
<source src=”movie.ogg” type=”video/ogg”>
</video>

Elemen <video> juga sudah dilengkapi dengan metode DOM, properti, dan elemen <audio>. Dengan demikian, kita juga bisa menambahkan atribut kontrol video seperti play, pause, dan volume. Berikut sejumlah atribut yang bisa diterapkan pada tag <video>:

autoplay=”autoplay” -> Memutar video secara otomatis.
controls=”controls” -> Menampilkan tombol kontrol video (play, pause, volume, fullscreen).
height=”pixels” -> Menentukan ukuran tinggi video.
loop=”loop” -> Mengulang video setiap kali selesai.
muted=”muted” -> Mematikan output suara pada video.
poster=”URL” -> Menampilkan gambar awal pada saat video belum di putar.
preload=”auto|metadata|none” -> Menentukan apakah video akan didownload bersama beban halaman.
src=”URL” -> Menempatan lokasi file video.
width=”pixels” -> Menentukan ukuran lebar video.

Tampilan control pada masing-masing browser:

kontrol video pada Firefox


kontrol video pada Chrome

Kontrol video pada Opera

Membuat atribut kontrol sendiri.


<div style=”text-align:left”>
<video id=”video_mov” width=”420″ poster=”poster.jpg”>
<source src=”movie.mp4″ type=”video/mp4″>
<source src=”movie.ogg” type=”video/ogg”>
Your browser does not support HTML5 video.
</video>

<br/>
<button onclick=”playPause()”>Play/Pause</button>
<button onclick=”sizeBig()”>Big</button>
<button onclick=”sizeSmall()”>Small</button>
<button onclick=”sizeNormal()”>Normal</button>
</div>
<script>
varrsVideo=document.getElementById(“video_mov”);

function playPause()
{if (rsVideo.paused)
rsVideo.play();
else
rsVideo.pause();}

function sizeBig()
{rsVideo.width=560;}

function sizeSmall()
{rsVideo.width=320;}

function sizeNormal()
{rsVideo.width=420;}

</script>

Advertisements

Belajar Pemprograman HTML5 Dasar

Mungkin ini sudah banyak diketahui oleh kalian semua, namun tidak bisa dipungkiri masih banyak rekan2 kita yang masih belum memahami dan mengetahi dengan baik apa itu HTML5, dimulai dari mana belajarnya. semoga tulisan singkat ini dapat menambah wawasan khususnya rekan2 yang baru melakukan proses belajar pemrograman HTML.
Belajar HTML5, ini kunci dasar jika anda ingin menjadi seorang programmer Web. Pada dasarnya HTML memiliki fungsi sebagai bahasa yang digunakan untuk menampilkan sebuah data ke web browser anda. Kepanjangan HTML sendiri adalah Hypertext Markup Language.
Selain aplikasi desktop, saat ini hampir semua perangkat user interface seperti mobile phone, tablet dan sebagainya telah support dengan HTML5, dan hampir semua platform telah mendukung HTML5 untuk berjalan di aplikasinya.

Sampai saat ini para pengembang bahasa pemprograman ini mencapai pada versi HTML5. Ada beberapa hal yang diubah dapa HTML versi 5 ini, dan untuk apa saja sintaks yang dirubah pada HTML versi 5 ini dari HTML versi-versi sebelumnya nanti akan saya bahas di bab selanjutnya.

Saat ini, saya akan mencoba untuk memperkenalkan kepada kamu-kamu semuanya tentang cara penulisan HTML5 secara dasar. Seperti bahasa pemprogamanan lainnya, HTML juga memiliki aturan-aturan sintak yang harus diikuti.

Cara menuliskan sintak HTML adalah awali dengan tag pembuka dan siakhiri dengan tag penutup. Contoh :
<html> value </html>
<html> adalah tag pembuka dari sintak penulisan bahasa pemprogramanan HTML dan jangan lupa selalu gunakan tag penutup. Sebagai contoh kita akan mencoba membuat satu halaman dengan menggunakan HTML5 dasar. Perhatikan langkah-langkahnya di bawah ini :
1. Buka Notepad atau Notepad++ anda,
2. Silahkan ketikkan atau Copas saja script di bawah ini :

<!DOCTYPE HTML>
<html>
<head>
<titile> Belajar HTML5 Dasar </title>
</head>
<body>
Hallo Mas Idris, Apa kabar? Heheheh
</body>
</html>

3. Simpan file anda dengan nama belajar.html

Kalo sudah, silahkan buka file belajar.html di browser anda atau dengan cara klik dua kali saja.

Nah, bagaimana, mudah kan? Untuk mengetahui apa sih maksut dari sintak-sintak di atas? Mari kita ulas sebentar di bawah ini.

Seperti yang saya sudah sampaikan di atas, kalu HTML adalah bahas pemprograman yang digunakan untuk menampilkan data dan menggunakan sintak HTML itu ada caranya dan aturannya :


– Baris Pertama : <!DOCTYPE HTML>
ini sebenarnya hanya sebagai penanda bahwa versi HTML yang anda gunakan adalah HTML versi 5.

– Baris Ke dua : <html>
Jelas, ini adalah sintak pembuka jika anda membuat sebuah halaman website dengan HTML syntax.

– Baris Ke Tiga <head>
Ini sebagai penanda bahwa atribut yang ada di dalam tag ini adalah header, seperti arsitektur manusia saja, ada kepala, badan dan kaki. Nah pada dasarnya ini adalah kepalanya halaman HTML. Saya rasa anda cukup faham maksut saya. Hahahahahaa.
– Baris Ke Empat <titile> Belajar HTML5 Dasar </title>
Ini adalah sebuah title dari halaman website anda. Letaknya ada di head bar halaman browser anda saat membuka halaman web ini. Selai sebagai identitas, atribut title ini juga memiliki fungsi besar dalam SEO (Search Engine Optimization) lho…

– Baris Ke Lima </head>
Layaknya sebuah pintu, ada pintu pembuka dan penutup. HTML juga punya sintak pembuka dan penutup. Nah, kalau atribut html, tag penutup pasti sama dengan tag pembukanya, hanya saja ada penambahan tanda garis miring sebelum teks atributnya. contohnya ya </head>.
– Baris Ke Enam <body>
Seperti yang sudah saya utarakan tadi, layaknya arsitektur manusia, kerangka website juga memiliki badan yang saat ini kita deklarasikan dengan atribut <body>.
-Baris Ke Tujuh
Ini hanya sekedar teks yang akan dimunculkan di halaman / kanvas web browser anda.
– Baris Ke Delapan dan Sembilan
Semuanya hanya sebagai atribut penutupnya saja dari atribut <body> dan atribut </html>.

Ingat, gunakan alur yang benar ya, jangan kebalik. Kalau kebalik atau penempatan atribut tidak sesuai, maka yang dihasilkan tidak akan sempurna sesuai dengan apa yang kita harapkan. Sebagai contohnya peletakan atribut yang salah adalah seperti ini.

<u> Teks ini akan bergaris bawah
<i> Teks ini akan tercetak miring / Italic </u>
</i>

Maka yang dihasilkan akan berantakan, silahkan coba sendiri. Dan inilah sintak yang benar :

<u> Teks ini akan bergaris bawah </u>
<i> Teks ini akan tercetak miring / italic </i>

Nah, bagaimana kawan, mudah kan. Semoga ini bermanfaat buat anda yang ingin belajar menjadi programmer web. Selamat belajar dan selamat berinprofisasi. Hehehe.

Membuat Fixed Menu Ketika Scroll Dengan CSS3, Jquery & HTML5

Kali ini tutorial-webdesign.com akan mencoba membuat menu yang posisinya selalu diatas (fixed) setelah halaman web di scroll, bukan hanya berada diatas, manu yang tadinya menyatu dengan halaman website ini akan berubah warna juga. Intinya disini kita akan belajar bagaimana menghapus dan menambah class pada tag html ketika menu di scroll dengan bantuan jquery.
Agak berbeda dengan yang kita buat sebelum nya di tutorial Membuat Menu Posisi Tetap dan Responsive dimana kita tidak membutuhkan javascript untuk itu, karena menunya sudah langsung kita letakan di bagian atas halaman website dengan CSS.

Untuk merubah bentuk menu seperti itu kita tentunya membutuhkan Javascript untuk mendapatkan event ketika mouse di scroll tersebut, kali ini kita menggunakan Jquery untuk praktek menghapus lalu menambahkan class dengan nama lain ketika website di scroll..

Oke langsung saja kita membuat struktur HTML nya, disini kita mencoba menggunakan tag-tag HTML5 untuk praktek.

Struktur HTML

<div>

	<header></header>

	<nav></nav>

	<section></section>
</div>

Kode diatas adalah truktur HTML kita secara singkat, selangkapnya akan dijabarkan dibawah ini masing-masing isi dari setiap bagian.

Header

Bagian header umumnya kita isi dengan Judul dan keterangan tentang website tersebut (tagline).

<header>
	<h1>Fixed Menu When Scroll</h1>
	<p><a href="http://www.tutorial-webdesign.com/fixed-menu-scroll-css-jquery-html5">http://www.tutorial-webdesign.com</a> | Image by : <a href="http://www.flickr.com/photos/thetruthabout/3396317853/sizes/m/in/photostream/" target="_blank">TheTruthAbout</a></p>
</header>

Navigation

Pada bagian ini adalah menu kita, simple saja, isinya hanya sebuah div yang didalam nya ada list menu (ul > li)

<nav>
	<div id="twd-menu">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#about">About</a></li>
			<li><a href="#services">Services</a></li>
			<li><a href="#portfolio">Portfolio</a></li>
			<li><a href="#contact">Contact</a></li>
		</ul>
	</div>
</nav>

Perlu diperhatikan disitu yaitu nama class dari div, yang diberi nama normal. Ini berguna untuk memberikan style utama sebelum di scroll.

Section / Konten website

Bagian ini berisi isi dari website yang kita buat, ada beberapa bagian dan kita beri setiap bagian sesuai dengan ID dari setiap menu (about, services, portfolio dan contact)

<section>
	<h2>Scroll me please... ↓</h2>
	<p><img src="http://farm4.staticflickr.com/3581/3396317853_e84a205773.jpg" alt=""> </p>

	<aside id="about">
		<h2>About</h2>
		<p>Content...</p>
	</aside>

	<aside id="services">
		<h2>Services</h2>
		<p>Content...</p>
	</aside>
	<aside id="portfolio">
		<h2>Portfolio</h2>
		<p>Content...</p>
	</aside>
	<aside id="contact">
		<h2>Contact</h2>
		<p>Content...</p>
	</aside>

</section>

Style CSS

Setelah kita selesai dengan struktur HTML yang akan dibuat, saat nya kita mulai mempercantik tampilan dengan menggunakan CSS, tidak ada css khusus yang kita perlukan karena ini hanya keperluan demo saja.

CSS Awal

ini digunakan untuk global atau keseluruhan, sebenarnya ini kurang lengkap, biasanya untuk global itu kita perlu normalize, css reset atau yang lain nya agar lebih baik, tapi ini hanya untuk demo saja.

/* Global
====================*/
*{
	padding: 0;
	margin: 0;
}
html{
	background: url(img/bg.png);
}
body{
	margin-top: 70px;
}
a{
	text-decoration: none;
	color: #333;
}

header, nav, section{
	width: 450px;
	margin: 0 auto 0px auto;
}

CSS untuk header

/* header
====================*/
header{
	padding: 10px 0;
}

CSS untuk Menu Normal

/* Menu
====================*/
#twd-menu{
	margin-bottom:20px;
}
.normal{
	padding: 10px;background: #B16B67;
}
#twd-menu ul{
	list-style-type: none;
	padding: 0;
}
	#twd-menu ul li{
		display: inline-block;
	}
		#twd-menu ul li a{
			display: inline-block;
			padding:10px;
			border-radius: 10px;
			color: #ddd;
		}
			#twd-menu ul li a:hover{
				background:black;
				color: #fff;
			}

CSS Menu ketika scroll

/* Menu When Scroll */
.fixed {
	position: fixed;
	top: -5px;
	left: 0;
	width: 100%;
	padding: 10px;
	background: #0B7271;
	color: #f8f8f8;
	-webkit-transition: top 400ms ease 0s;
	-moz-transition: top 400ms ease 0s;
	-o-transition: top 400ms ease 0s;
	-ms-transition: top 400ms ease 0s;
	transition: top 400ms ease 0s;
	box-shadow: 0 0 40px #222;
	-webkit-box-shadow: 0 0 40px #222;
	-moz-box-shadow: 0 0 40px #222;
}
.fixed ul{
	width: 450px;
	margin: 0 auto;
}

CSS untuk konten website

/* Content
=================*/
aside{
	padding: 50px 10px;
}
aside h2{
	margin: 20px 0;
}

Seperti itulah urutan css yang kita buat. Lanjut dengan Javascript

Javascript

Untuk dapat merubah class .normal menjadi .fixed, agar tampilan menu berubah kita membutuhkan Javascript, disini kita sebelum nya talah menyisipkan Jquery tentunya dibagian head dan /head.
Lalu kita membuat sebuah file javascript dengan nama twd-menu.js dengan isi seperti dibawah ini.

$(function(){

	var menu = $('#twd-menu'),
		pos = menu.offset();

		$(window).scroll(function(){
			if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('normal')){
				menu.fadeOut('fast', function(){
					$(this).removeClass('normal').addClass('fixed').fadeIn('fast');
				});
			} else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
				menu.fadeOut('fast', function(){
					$(this).removeClass('fixed').addClass('normal').fadeIn('fast');
				});
			}
		});

});

Bisa dilihat disitu kita kita pertama akan menghapus class normal, lalu menambahkan class fixed, jadi ketika class normal dihapus tentunya style yang kita tulis di css untuk class .normal tidak berguna lagi, yang terpakai adalah kode css untuk class .fixed, dimana isinya position:fixed untuk membuat posisi tidak berubah dan width:100% agar lebarnya memenuhi layar monitor.

Hasil

Berikut adalah hasil yang telah dibuat, anda bisa melihat dan mendownload kode nya dari Github.

Perlu diketahui ini hanya untuk keperluan demo, jadi tidak semua bagian kami percantik dengan CSS.

DEMO | Download Code

Sekian

Oke sekian tutorial kali ini, semoga berguna untuk memulai pekerjaan anda.

Sumber

Membuat Jendela Pop Up Dengan CSS

Mungkin memunculkan jendela Pop Up atau Overlay hanya bisa dilakukan oleh javascript saja. Tapi dengan semakin pesatnya kehebatan CSS, kita bisa membuat jendela Pop Up sederhana. Bagaimana Caranya? Check it out.

Pertama dan yang paling utama sudah pasti membuat markup html nya dulu lah. Tanpa adanya file html, mana mungkin bisa dibuat.

<div id="button"><a href="#popup">Click Me</a></div>

<div id="popup">
    <div>
        <a href="#" title="Close">X</a>
        <h1>Jendela Pop Up</h1>
        <p>Ini adalah jendela Pop Up sederhana tanpa javasript<br/>
        Jendela ini dimunculkan oleh CSS<br/>
        Untuk menutup jendela ini, klik tombol close di kanan atas</p>
    </div>
</div>

Setelah itu simpan dengan nama file index.html atau apa saja. Kemudian double click file html nya.
Dan… Jeng.. jeng.. jeng..!!! Gak terjadi apa apa. Ya iyalah, kita belum kasih style nya 🙂

popup1

Setelah itu buatlah file style.css dan simpan pada folder file index.html tadi. Kemudian Ketik script berikut.

* {
margin: 0;
padding: 0;
}

body, html {
font-family: Calibri, "times new roman", sans-serif;
}

Style di atas hanya untuk me-reset margin dan padding, serta mengatur jenis font yang digunakan. Coba refresh browser anda, pasti yang berubah hanya margin, padding, dan jenis font-nya saja kan. Memang itu yang tadi kita lakukan.

popup2

Kemudian, supaya hyperlink yang pertama itu terlihat seperti tombol beneran, tambahkan script berikut.

#button {
margin: 5% auto;
width: 100px;
text-align: center;
}

#button a {
background-image: linear-gradient(to bottom,#2a95c5,#21759b);
background-image: -o-linear-gradient(to bottom,#2a95c5,#21759b);
background-image: -ms-linear-gradient(to bottom,#2a95c5,#21759b);
background-image: -moz-linear-gradient(to bottom,#2a95c5,#21759b);
background-image: -webkit-linear-gradient(to bottom,#2a95c5,#21759b);
background-color: #2e9fd2;
width: 86px;
height: 30px;
vertical-align: middle;
padding: 10px;
color: #fff;
text-decoration: none;
border: 1px solid transparent;
border-radius: 5px;
}

Setelah di save, refresh browser anda. Maka akan ada tombol di hadapan anda.

popup3

Lalu bagaimana dengan jendela Pop Up-nya? Sabar! Tambahkan saja script berikut.

#popup {
width: 100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,.7);
top: 0;
left: 0;
z-index: 9999;
visibility: visible;
}

.window {
width: 400px;
height: 100px;
background: #fff;
border-radius: 10px;
position: relative;
padding: 10px;
box-shadow: 0 0 5px rgba(0,0,0,.4);
text-align: center;
margin: 15% auto;
}

.close-button {
width: 20px;
height: 20px;
background: #000;
border-radius: 50%;
border: 3px solid #fff;
display: block;
text-align: center;
color: #fff;
text-decoration: none;
position: absolute;
top: -10px;
right: -10px;
}

Coba refresh browser anda. Dan.. Jendela Pop Up berhasil kita buat.

popup4

Trus bagaimana cara menyembunyikannya. Kuncinya ada pada visibility: visible yang kita beri pada div #popup. Sekarang kita ganti visibilty dari div #popup tersebut menjadi hidden. Kalo gak tau mana yang diganti, ganti script #popup tadi menjadi seperti berikut.

#popup {
width: 100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,.7);
top: 0;
left: 0;
z-index: 9999;
visibility: hidden;
}

Setelah browser anda refresh, pasti jendela Pop Up tadi hilang.

popup5

Coba anda Klik tombolnya, pasti tidak terjadi apa-apa kan. Iya, karena kita belum menambahkan style yang terakhir sekaligus menjadi style kunci. Tambahkan script berikut.

#popup:target {
visibility: visible;
}

Simpan, kemudian refresh browser anda. Kemudian klik tombolnya. Dan.. misi sudah selesai. Jendela Pop Up berhasil kita tampilkan. Untuk menutupnya, klik tombol close yang ada di pojok kanan atas (jadi inget pemilu).

Jadi, style lengkapnya adalah sebagai berikut.

* {
margin: 0;
padding: 0;
}

body, html {
font-family: Calibri, "times new roman", sans-serif;
}

#button {
margin: 5% auto;
width: 100px;
text-align: center;
}

#button a {
background-image: linear-gradient(to bottom,#2a95c5,#21759b);
background-image: -o-linear-gradient(to bottom,#2a95c5,#21759b);
background-image: -ms-linear-gradient(to bottom,#2a95c5,#21759b);
background-image: -moz-linear-gradient(to bottom,#2a95c5,#21759b);
background-image: -webkit-linear-gradient(to bottom,#2a95c5,#21759b);
background-color: #2e9fd2;
width: 86px;
height: 30px;
vertical-align: middle;
padding: 10px;
color: #fff;
text-decoration: none;
border: 1px solid transparent;
border-radius: 5px;
}

#popup {
width: 100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,.7);
top: 0;
left: 0;
z-index: 9999;
visibility: hidden;
}

.window {
width: 400px;
height: 100px;
background: #fff;
border-radius: 10px;
position: relative;
padding: 10px;
box-shadow: 0 0 5px rgba(0,0,0,.4);
text-align: center;
margin: 15% auto;
}

.close-button {
width: 20px;
height: 20px;
background: #000;
border-radius: 50%;
border: 3px solid #fff;
display: block;
text-align: center;
color: #fff;
text-decoration: none;
position: absolute;
top: -10px;
right: -10px;
}

#popup:target {
visibility: visible;
}

Karena misi sudah selesai, saya mau pergi dulu. Lho!? Kok main pergi aja tanpa memberi penjelasan!? Oke saya jelasin.
Pertama, kita sudah menjadikan jendela pop up nya menghilang dengan mengganti visibility: visible menjadi visibility: hidden. Tapi itu saja belum cukup! Untuk memunculkannya kita harus menekan tombolnya. Karena target dari tombol hyperlink kita adalah #popup, sehingga untuk memunculkannya, kita butuh pseudo-element (apa namanya pseudo-class ya!? Udahlah bodo amat). Karena div #popup tahu dia akan menjadi target dari tombol hyperlink kita. Kita tambakan pseudo-class :target pada div #popup serta menambahkan style visibility: visible, agar supaya div #popup-nya bereaksi ketika tombol diklik dan dia yang dijadikan target. Nah, reaksi itu akan mengubah visibility: hidden menjadi visibility: visible.
Kemudian untuk menyembunyikan jendela Pop Up-nya kembali, kita harus mengklik tombol close. Nah, tombol close itu kan targetnya # alias gak ada. Sehingga saat tombol close di klik, dia akan mengembalikan keadaan seperti semula.

Bingung ya!? Sama, gw aja yang ngetik bingung. Hehe 😛

Kesimpulannya : Jendela Pop Up sederhana dapat dibuat dengan CSS bahkan tanpa javascript. Ini menandakan semakin hebatnya kemampuan CSS dalam memanipulasi apapun.
Kesimpulan dari kesimpulannya : Selamat Bereksperimen!

DEMO  |  DOWNLOAD

sumber