Cara menempatkan video di tengah html

Hai Selamat datang kembali di tutorial lapak belajar, jika pada tutorial sebelumnya kita sudah membahas cara menambahkan audio menggunakan HTML 5, pada tutorial kali ini kita akan membahas cara menambahkan video menggunakan HTML 5

Table of Contents Show

Video Tutorial Belajar HTML – Menampilkan Video Menggunakan HTML 5
Dukungan peramban
Format File Video yang Didukung
Jenis Atribut
Skrip sederhana
Attribute Lain pada Tag
Elemen HTML apa untuk memutar video?
Bagaimana cara menampilkan video di halaman web?
Format video apa yang dapat dimasukkan ke dalam HTML?
Jika Anda ingin menyisipkan video dari sumber eksternal seperti YouTube, tag HTML mana yang digunakan?

Video Tutorial Belajar HTML – Menampilkan Video Menggunakan HTML 5

Dengan HTML 5 Anda dapat menambahkan video dengan mudah, namun seperti pembahasan audio sebelumnya, ada batasan dari browser yang didukung, serta format file video yang didukung, nah kita akan membahasnya satu per satu.

Dukungan peramban

BrowserChromeInternet ExplorerMozilla FirefoxSafariOperaSupport Version4. 09. 03. 54. 010. 5

itu adalah browser dan versinya yang mendukung tag video di HTML 5, sepertinya hampir semua browser telah mendukung tag video di HTML 5

(sumber. http. //w3sekolah. com)

Format File Video yang Didukung

Setelah membahas browser, selanjutnya kita juga membahas mengenai format file video yang didukung oleh tag

BrowserMP4WebMOggInternet ExplorerYaTidakTidakChromeYaYaYaFirefoxYaYaYaSafariYaTidakTidakOperaYa (Dari Opera 25)YaYa

(sumber. http. //w3sekolah. com)

terlihat hanya ada 3 format file video yang disupport oleh tag

MP4
WebM
Ogg

dimana setiap browser memiliki kemampuan yang berbeda untuk mendukung format video yang dapat ditampilkan, namun format file mp4 sepertinya didukung di hampir semua browser meskipun di opera harus menggunakan versi minimal 25, jadi saya sarankan teman-teman dapat menggunakan format file mp4 untuk video yang akan ditampilkan di halaman web Anda

Jenis Atribut

Setelah kita mengetahui bahwa format file yang didukung adalah mp4, webm, dan ogg, anda perlu memberikan deklarasi format file video yang akan ditampilkan pada tipe atribut pada tag sumber, untuk nilainya dapat dilihat pada tabel dibawah ini

Format FileJenis MediaMP4video/mp4WebMvideo/webmOggvideo/ogg

Gampang kan.. nah kita akan mencoba membuat kode sederhana yang akan menampilkan file video dengan HTML 5

Skrip sederhana

coba tulis skrip seperti di bawah ini

<. DOCTYPE html>

<html>

<judul>Menambahkan Video dengan HTML 5</judul>

</kepala>

<tubuh>

Browser Anda Tidak Mendukung HTML 5 Video

</video>

</tubuh>

</html>

misalnya anda simpan dengan nama add_video_html5. html

jangan lupa untuk menempatkan video dengan nama video. mp4, video. webm, dan video. oog

sebenarnya Anda hanya dapat menulis satu file seperti video. mp4, lalu mengapa saya harus menulis 3 file video ?? .

Nah, setelah disimpan silahkan buka di browser, maka hasilnya akan seperti berikut

terlihat di browser akan menampilkan video dan juga terdapat kontroler seperti tombol play, volume, dan fullscreen

Deskripsi Skrip

nah kita akan pelajari scriptnya satu persatu

Tag yang digunakan ada 2 yaitu tag
Tag
Pada tag
Tag digunakan untuk menuliskan alamat dari video yang akan ditampilkan
Dalam masing masing tag ada 2 attribute yaitu src(digunakan untuk menuliskan alamat video yang akan ditampilkan) dan type(digunakan untuk menuliskan tipe format file video)
Pada script ini saya menulis 3 tag sumber dimana pada setiap tag sumber saya menampilkan video yang sama tetapi menggunakan format video yang berbeda yaitu mp4, webm, dan ogg, Cara ini digunakan untuk mengatasi ketika browser tidak mendukung format file video yang akan ditampilkan maka kita tuliskan 3 format seperti pada contoh diatas sehingga browser akan menampilkan video yang memiliki format file yang didukung oleh browser, baik mp4, webm, dan oog
Kami meletakkan teks " Browser Anda Tidak Mendukung Video HTML 5 " di bawahnya sendiri sebelum tag , teks ini akan ditampilkan saat browser tidak mendukung tag

Attribute Lain pada Tag

Selain attribute width, height, dan controls yang telah kita tuliskan pada contoh skrip, tag

AttributeValueFungsiAutoplaybisa dikosongkandigunakan agar videonya otomatis diplay ketika web telah selesai di loadloopbisa dikosongkandigunakan agar videonya melakukan looping (repeat) ketika videonya selesai diputarmutedbisa dikosongkandigunakan jika menginginkan videonya tidak bersuarapreload auto,metadata,none digunakan untuk melakukan persiapan (buffer) otomatis ketika halaman web telah diload, sehingga ketika anda memplay video, video telah di buffer sebelumnya srcurl videodigunakan untuk mengatur url video jika anda tidak menggunakan tag

nah attributnya banyak, attributnya bisa kalian gunakan sesuai kebutuhan, itu saja untuk sekarang cara menambahkan video di html 5, sampai jumpa di tutorial lainnya...

[stextbox id=”info”] Anda serius ingin menguasai HTML?

Warung Belajar telah membuat DVD Tutorial "Tutorial HTML - Kotak Putih". DVD Tutorial kali ini membahas tentang HTML secara lebih lengkap dan detail. Penjelasan lebih lanjut bisa ke. Tutorial HTML – Kotak Putih[/stextbox]

Elemen HTML apa untuk memutar video?

adapun elemen html5 yang akan kita gunakan untuk membuat pemutar video adalah elemen

Bagaimana cara menampilkan video di halaman web?

Cara Menampilkan Video di Situs Web .

Buka youtube atau klik disini

Temukan video yang sesuai yang Anda butuhkan dengan mengetikkan kata kunci atau membuka video yang ada

Buka video yang salah dari hasil pencarian

Klik Bagikan di bagian bawah video

Klik Sematkan

Salin teks di kotak teks

Format video apa yang dapat dimasukkan ke dalam HTML?

Beberapa format video didukung oleh elemen File MPEG 4, dengan codec video H264, dan codec audio AAC. File Ogg, dengan video codec Theora dan codec audio Vorbis. File WebM dengan codec video VP8 dan codec audio Vorbis .

Jika Anda ingin menyisipkan video dari sumber eksternal seperti YouTube, tag HTML mana yang digunakan?

Tag yang perlu kita tambahkan video dari Youtube adalah Tag ini sebenarnya berfungsi untuk menambahkan halaman lain dalam bingkai a . Perhatikan URL yang digunakan pada atribut src, disana kita menggunakan /embed/.