Berikut adalah script html untuk pemilihan format file video yang benar yaitu

Selamat malam kawan, apakah kalian pernah menonton video di youtube atau di situs Indonesia terbaru yaitu metube?, pasti kalian menjawab pernah (bagi yang sudah pernah) dan belum (bagi yang belum) tapi yang belum nonton pasti tahu lah apa itu youtube, bahkan anak-anak pun banyak yang tahu tentang youtube. Dengan berdirinya youtube banyak orang bekerja sebagai tukang posting video menjadi para miliarder muda yang sukses dalam postingan videonya, bahkan mereka menyebutnya sebagai artis youtube. Untuk membuat situs penayang video seperti youtube kita memerlukan suatu plugin namun kali ini kita tidak akan membahas tentang plugin tersebut namun kita akan membahas tentang “menampilkan video dengan html”, sejak munculnya html versi 5 kita bisa menampilkan video tanpa repot-repot buat plugin, hanya dengan tag <video> kita sudah bisa menampilkan video di situs kita. Untuk lebih jelasnya ikut saya baca kebawah dengan judul:

Cara Menampilkan video dengan Html

Terlebih dahulu siapkan aplikasi edit text (seperti notepad, notepad++ atau sejenisnya) dan browser seperti (google chrome, opera mini, uc browser dan sejenisnya ).

Siapkan juga satu buah folder dengan nama “belajar” (tanpa tanda petik).

Dan yang harus kamu siapkan selanjutnya adalah video dengan format (mp4, webm, atau ogg) lalu ubah nama videonya menjadi buka_video.mp4 atau buka_video.webm ataupun buka_video.ogg

Buka aplikasi edit text (seperti notepad, notepad++ atau sejenisnya), lalu ketikan format html berikut:

<html>

<head><title>judul video</title></head>

<body>

<h3>INI VIDEO KARTUN MEAT BALL</h3><hr/><br/>

<video width=”400px” height=”300px” controls>

<source src=”buka_video.mp4″ type=”video/mp4″>

aplikasi tidak mendukung

</video>

</body>

</html>

Simpan ke folder “belajar” (tanpa tanda petik) dengan nama “tampil_video.html” (tanpa tanda petik)

Maka hasilnya adalah:


Kekurangan dari tag video ini terletak pada formatnya, yaitu tag ini hanya bisa menampilkan video berformat mp4, webm dan ogg. Dan untuk suport pada aplikasi browsernya adalah (lihat table dibawah ini):


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

Penjelasan dari format html:>

1.       <html>  : ini merupakan tag awal suatu format html dan harus selalu ada dalam format html

2.       </html> :ini merupakan tag penutup dari suatu dokumen html

3.       <head> :merupakan tag yang bisa di pasang dengan css (cascade style sheet) dan juga judul

4.       </head> : merupakan tag penutup dari <head>

5.       <title> merupakan tag yang berfungsi sebagai judul dari suatu dokumen html, dan tag ini selalu diapit dengan tag <head>disini tag title <head>

6.       </title> : merupakan tag penutup dari <title>

7.       <body> : merupakan tag yang digunakan untuk menampilkan isi dari suatu dokumen yang akan ditampilkan.

8.       </body> :merupakan tag penutup dari <body>

9.       <h3> :merupakan heading yang berfungsi mengubah ukuran dengan number 3, semakin besar no yang di berikan maka tulisan akan semakin kecil, tag ini ditutup dengan </h3>

10.   <br/> : tag ini berfungsi untuk membuat garis baru.

11.   <hr/>: merupakan tag yang berfungsi untuk membuat garis baru beserta garis bawah.

12.   <video> merupakan tag yang berfungsi menampilkan video tag ini diakhiri dengan tag </video>. Dan  memiliki berbagai atribut yaitu (lihat table dibawah ini):


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

13.   <source src=”buka_video.mp4″ type=”video/mp4″>

<source src=”buka_video.webm” type=”video/webm”>

<source src=”buka_video.ogg” type=”video/ogg”>

Kode diatas digunakan untuk menampilkan video sesuai formatnya, jika saya tadi di dalam format html menggunakan video berformat mp4 maka saya menggunakan tag 

<source src=”buka_video.mp4″ type=”video/mp4″>

Mungkin sekian artikel yang dapat kita bahas, jika para pengunjung tidak ingin ketinggalan pemberitahuan artikel terbaru dari kami maka bisa masukan email anda dibawah.

Apa elemen HTML yang benar untuk memutar file video?

adapun element html5 yang akan kita gunakakan untuk membuat pemutar video adalah element <video>.. </video>.

File apa saja yang bisa ditarik dalam video dan musik di HTML5?

Format suara yang telah didukung hingga saat ini adalah MP3, Ogg dan WAP. File-file Audio yang didukung HTML5 adalah MP3,WAV, dan OGG.

Apa HTML yang benar untuk menyisipkan gambar?

Untuk menyematkan gambar pada website, Anda perlu menggunakan tag <img> pada dokumen HTML.

Jika Anda ingin menyisipkan sebuah video dari source luar seperti youtube lalu tag HTML yang manakah yang digunakan?

Tag yang kita butuhkan untuk menambahkan video dari Youtube adalah <iframe> . Tag ini sebenarnya berfungsi untuk menambahkan halaman lain dalam sebuah frame. Perhatikan URL yang digunakan pada atribut src , di sana kita menggunakan /embed/ .