Tag berikut yang digunakan untuk menyisipkan Video pada halaman Web

Memasukkan Video pada Web dengan HTML5

Table of Contents Show

Memasukkan Video pada Web dengan HTML5
About Muliana Insan W.
Sebuah blog biasanya memiliki video, gambar, ataupun audio. Mengapa demikian? karena video dapat membuat sebuah blog menjadi semakin menarik. Video juga dapat memperbanyak pengunjung sehingga blog kita semakin berkembang. Apalagi jika blog itu sendiri dilengkapi dengan gambar ataupun audio yang baik. Secara otomatis pengunjung akan tertarik bahkan penasaran dengan blog kita sendiri sehingga mereka akan terus-menerus melihat atau mengupdate isi dari blog kita. Namun, lebih baik memposting video, gambar, atau audia yang bermanfaat bagi semua orang.
Oleh karena itu, ada cara tersendiri untuk memasukkan gambar, audio, ataupun video itu. Disini saya akan memposting cara memasukan video, gambar, dan audio dalam HTML. Dalam proses ini kita akan menggunakan Notepad++
Mengenal HTML5 Video
Browser Support
Tag <video>, Child tag dan atributnya
Tipe File dan dukungan browsernya
Atribut dan Kontrol
Tag apa yang digunakan untuk menampilkan video?
Jenis tag apa yang digunakan untuk menampilkan gambar dan video pada sebuah halaman web?
Bagaimana cara memasukan video ke halaman web?
Apa itu tag header?
Tag apa yang digunakan untuk menyisipkan video?
Bagaimana cara memasukkan video pada halaman web?
Tag apa yang digunakan jika ingin menambahkan gambar pada halaman web?
Tag apakah yang dibutuhkan dalam menyisipkan file gambar ke dalam HTML?

Video merupakan konten media yang sangat sering digunakan untuk menyajikan, mempresentasikan, dan menyampaikan suatu informasi berupa sekumpulan gambar-gambar yang bergerak pada jenjang waktu tertentu. Hal yang sangat lumrah jika video dijadikan media untuk menyampaikan informasi pada era teknologi informasi seperti sekarang ini dikarenakan media yang satu ini dapat dengan mudah dapat diterima, mudah diserap, serta mudah dipahami oleh pengguna yang ditarget atau dituju. Oleh karena itu menambahkan video mungkin bisa dijadikan media yang menunjang pada konten pada web dan bisa menarik perhatian pengguna.

Sebelum memulai tutorial memasukkan video pada web ini, ada baiknya untuk memeriksa apakah Browser yang kalian gunakan bisa mendukung teknologi memasukkan video HTML5. Maka dari itu sangat disarankan untuk menggunakan Browser versi terbaru karena beberapa pada browser tidak mendukung teknologi video HTML5 ini. Disini saya menggunakan browser Mozilla Firefox versi 47.

Baiklah, berikut adalah langkah-langkahnya :

1. Buka Notepad++ sobat , jika sobat tidak memiliki Notepad++ maka sobat juga bisa menggunakan Notepad bawaan dari sistem operasi Windows.

2. Ketikkan kode HTML berikut, ini merupakan kode utama untuk memasukkan video pada web :


<!DOCTYPE html>

<html>

<head>

<title>Video Pada Web dengan HTML5</title>

</head>

<body>

<h2><u>Ini merupakan Video dengan menggunakan HTML5</u></h2> <br /> 

<video src="nama-video.mp4" width="700" height="400" controls="controls">

</video>

</body>

</html>

Berikut beberapa tag lainnya pada video di HTML5 ini :
autoplay ini berfungsi untuk memutar video secara otomatis saat file dokumen web dibuka pada browser.
loop ini digunakan untuk mengulangi secara otomatis video yang telah selesai diputar.
controls ini berfungsi sebagai penampil untuk kendali pada video seperti tombol play, pause, volume dan sebagainya.

Yang perlu diperhatikan dalam memasukkan video dengan menggunakan HTML5 ini adalah jenis format video yang ingin dimasukkan pada web lalu nama video yang dituju perhatikan huruf yang digunakan (huruf besar atau huruf kecil, atau bisa jadi gabungan dari keduanya), angka, dan simbol. oh ya, dan satu hal yang lagi yang juga tak kalah penting untuk diperhatikan adalah tempat direktori kalian menyimpan video yang dituju, saya sarankan letakkan pada 1 folder yang sama agar lebih mudah.

3. Jika kalian menggunakan Notepad bawaan dari Windows maka simpan dengan akhiran .html pada nama file-nya, contohnya seperti ini: video-pada-html5.html

Karena disini saya menggunakan Notepad++ maka saya hanya perlu memilih ekstensi .html pada saat ingin menyimpannya.

Dan hasilnya akan terlihat seperti ini :

Sekian tutorial cara memasukkan video pada web dengan HTML5, semoga bermanfaat dan dapat menambah pengetahuan sobat tentang pembuatan web.

About Muliana Insan W.

Saya hanyalah seorang Web Programmer junior dan Desainer Grafis junior yang mencoba memberikan pengetahuannya yang tidak seberapa kepada khalayak luas.

Table of Contents Show

Sebuah blog biasanya memiliki video, gambar, ataupun audio. Mengapa demikian? karena video dapat membuat sebuah blog menjadi semakin menarik. Video juga dapat memperbanyak pengunjung sehingga blog kita semakin berkembang. Apalagi jika blog itu sendiri dilengkapi dengan gambar ataupun audio yang baik. Secara otomatis pengunjung akan tertarik bahkan penasaran dengan blog kita sendiri sehingga mereka akan terus-menerus melihat atau mengupdate isi dari blog kita. Namun, lebih baik memposting video, gambar, atau audia yang bermanfaat bagi semua orang.
Oleh karena itu, ada cara tersendiri untuk memasukkan gambar, audio, ataupun video itu. Disini saya akan memposting cara memasukan video, gambar, dan audio dalam HTML. Dalam proses ini kita akan menggunakan Notepad++
Mengenal HTML5 Video
Browser Support
Tag <video>, Child tag dan atributnya
Tipe File dan dukungan browsernya
Atribut dan Kontrol
Tag apa yang digunakan untuk menampilkan video?
Jenis tag apa yang digunakan untuk menampilkan gambar dan video pada sebuah halaman web?
Bagaimana cara memasukan video ke halaman web?
Apa itu tag header?

Hay guys.. Ketemu lagi sama saya. Tau lah siapa saya, orang paling ganteng di keluarga saya wkwkwk.. Ga usah gugup guys, yang baca ini juga ganteng-ganteng dan cantik-cantik kok. Udah senyumnya berhenti hahaa.. Klo masih ketawa berarti suka sama blog ini, mkasih.. Langsung ke pokok pikirannya aja yah guys.

Sebuah blog biasanya memiliki video, gambar, ataupun audio. Mengapa demikian? karena video dapat membuat sebuah blog menjadi semakin menarik. Video juga dapat memperbanyak pengunjung sehingga blog kita semakin berkembang. Apalagi jika blog itu sendiri dilengkapi dengan gambar ataupun audio yang baik. Secara otomatis pengunjung akan tertarik bahkan penasaran dengan blog kita sendiri sehingga mereka akan terus-menerus melihat atau mengupdate isi dari blog kita. Namun, lebih baik memposting video, gambar, atau audia yang bermanfaat bagi semua orang.

Oleh karena itu, ada cara tersendiri untuk memasukkan gambar, audio, ataupun video itu. Disini saya akan memposting cara memasukan video, gambar, dan audio dalam HTML. Dalam proses ini kita akan menggunakan Notepad++

A. Memasukan Video

Untuk memasukkan video ke dalam dokumen HTML, juga digunakan tag yang sama yaitu tag < embed > Format untuk video yaitu mp4, flv, avi, 3gp dll

Penggunaan file multimedia dalam sebuah website merupakan hal yang biasa untuk memperkaya informasi dan meningkatkan ke-interaktif-an. Dari semua file multimedia yang ada, video merupakan jenis file yang paling baik untuk menyampaikan informasi pada website.

Sayangnya, beberapa web developer pemula biasanya kesulitan dalam menampilkan video pada website. Biasanya, ini karena membatasi pemikiran sendiri bahwa menampilkan video harus menggunakan plugin javacript tambahan.

Padahal, saat ini sudah terdapat teknik HTML5 Video yang dapat menampilkan video dengan sederhana dan super mudah.

Mengenal HTML5 Video
- Contoh
- Browser Support
Tag <video>, Child tag dan atributnya
- Tipe File dan dukungan browsernya
- Atribut dan Kontrol

Mengenal HTML5 Video

HTML5 video adalah istilah yang digunakan untuk menampilkan video dengan menggunakan tag <video>, yang mana merupakan salah satu tag HTML5. Dengan adanya tag <video>, kita bisa menampilkan sebuah video hanya dengan 5 baris kode saja.

Jika anda menggunakan HTML5 video, sebaiknya anda juga menggunakan deklarasi HTML5 dan elemen-elemen HTML5 lainnya sehingga dokumen HTML anda valid HTML5.

Contoh

Jika anda ingin melihat bagaimana HTML5 video bekerja, silahkan lihat contoh dibawah ini.

<video width=”100%” height=”auto”>
<source src=”http://www.w3schools.com/html/mov_bbb.mp4” type=”video/mp4″ />
<source src=”http://www.w3schools.com/html/mov_bbb.ogg” type=”video/ogg” />
<source src=”http://www.w3schools.com/html/mov_bbb.webm” type=”video/webm” />
Your browser does not support HTML5 video.
</video>

Your browser does not support HTML5 video.

Jadi, jika anda ingin menampilkan video dengan html5, cukup salin kode di atas. Yang perlu anda ganti adalah url ke file videonya, yang saya warnai dengan warna merah.

Perlu anda ketahui bahwa pada setiap browser, tampilan video player HTML5 ini berbeda-beda, seperti di bawah ini.

Browser Support

Tidak semua browser mendukung tag <video>. Yaa, inilah kekurangan HTML5 video jika dibandingkan dengan video dengan plugin javascript. Browser-browser versi lama, tidak mendukung tag <video> sehingga HTML5 video tidak bisa diterapkan. Untuk lebih detailnya silahkan lihat tabel di bawah ini.

Element	Chrome	Internet Explorer	Firefox	Safari	Opera
<video>	4.0	9.0	3.5	4.0	10.5

Tag <video>, Child tag dan atributnya

Tipe File dan dukungan browsernya

Format file video untuk HTML5 video ada 3 jenis, yaitu .mp4, .ogg, dan .webm. Ketiga jenis file ini ada untuk masalah crossbrowser. Artinya, pada browser satu hanya jenis .mp4 yang didukung, sedangkan pada browser 2 hanya .ogg dan .webm yang didukung. Jadi, sebaiknya gunakan ketiga format tersebut sehingga bisa maksimal tampil di banyak browser.

Silahkan lihat tabel di bawah ini untuk dukungan browser untuk format video tersebut yang lebih jelas.

Browser	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	NO	NO
Opera	YES (from Opera 25)	YES	YES

Atribut dan Kontrol

Tag <video> mempunyai atribut-atribut untuk mengatur bagaimana video player tampil. Misalnya, anda bisa menampilkan video agar otomatis berjalan/play saat web dibuka dengan menambahkan atribut autoplay seperti di bawah.

Untuk atribut lain, anda bisa melihatnya pada tabel berikut ini. Untuk contoh dan detailnya, silahkan klik nama atributnya.

Attribute	Value	Description
autoplay	Tidak harus diisi	Menentukan video agar otomatis berjalan saat web selesai dimuat/load.
controls	Tidak harus diisi	Menentukan agar kontrol (seperti tombol play/pause, atau progressbar) tampil.
height	pixels (ex. 300px)	Menentukan tinggi video player
loop	Tidak harus diisi	Menentukan agar video diulangi/dimainkan lagi secara terus menerus setelah selesai.
muted	Tidak harus diisi	Menentukan agar video tidak bersuara
poster	URL (ex.	Menentukan sumber file gambar yang tampil pada video player saat video tidak berjalan.
preload	auto metadata none	Menentukan bagaimana video seharusnya tampil sebelum di mainkan ketika website sudah dimuat.
src	URL (ex.	Menentukan sumber file video jika tidak menggunakan tag <source> didalamnya
width	pixels (ex. 300px)	Menentukan lebar video player

Yap, itulah penjelasan bagaimana menampilkan video dengan HTML5. Selamat mencoba dan semoga bermanfaat.

Referensi :
– http://www.w3schools.com/html/html5_video.asp
– http://www.w3schools.com/tags/tag_video.asp

~Muhammad Syakirurohman~

Tag apa yang digunakan untuk menampilkan video?

HTML sekarang punya tag baru untuk membuat media player, yakni tag <video> .

Jenis tag apa yang digunakan untuk menampilkan gambar dan video pada sebuah halaman web?

Gambar dapat kita tambakan di HTML dengan menggunakan tag <img> . Tag ini memiliki atribut wajib, yakni src .

Bagaimana cara memasukan video ke halaman web?

Menambahkan Video pada Post dan Page.

Ketikkan URL (alamat internet) dari video pada Video URL textbox. Biasanya situs yang membagikan videonya sevara gratis sudah menyediakan URL yang bisa di copy-paste..

(Optional) Ketikkan judul dari video pada Title text box..

Klik tombol Insert into Post..

Apa itu tag header?

Elemen <header> merupakan salah satu elemen dalam HTML5 yang mempunyai tujuan khusus atau arti semantik tertentu. Elemen <header> berfungsi header bagi seluruh halaman HTML ataupun sebagai header bagi seksi-seksi tertentu seperti header bagi seksi elemen <article>.

Tag apa yang digunakan untuk menyisipkan video?

Tag <video>: Menambahkan Video Pada HTML Element tag ini akan menghasilkan tampilan berupa video player yang dilengkapi dengan berbagai control video seperti tombol play, pause, stop, duration, tracking bar, volume dan lainnya. Setiap browser memiliki tampilan pemutar video yang berbeda.

Bagaimana cara memasukkan video pada halaman web?

Menambahkan Video pada Post dan Page.

Ketikkan URL (alamat internet) dari video pada Video URL textbox. Biasanya situs yang membagikan videonya sevara gratis sudah menyediakan URL yang bisa di copy-paste..

(Optional) Ketikkan judul dari video pada Title text box..

Klik tombol Insert into Post..

Tag apa yang digunakan jika ingin menambahkan gambar pada halaman web?

Nah, tag yang digunakan untuk memasukan gambar pada dokumen HTML adalah menggunakan tag <img>.

Tag apakah yang dibutuhkan dalam menyisipkan file gambar ke dalam HTML?

Menambahkan Gambar di HTML Gambar dapat kita tambakan di HTML dengan menggunakan tag <img> . Tag ini memiliki atribut wajib, yakni src . Jika kita tidak mengisi atribut src , maka gambar tidak akan ditampilkan.