Cara Mudah Menyisipkan Video ke dalam Postingan Blog
fathurhoho

Cara Mudah Menyisipkan Video ke dalam Postingan Blog

Published by:
memasukkan video kedalam blogAda kalanya kita merasa harus memasukkan video ke dalam postingan blog. Misalnya saat membuat tutorial dan ingin menampilkan step yang njelimet, yang susah banget kalau cuma dijelaskan dengan foto saja. Ini salah satu contohnya.

Secara garis besar, ada 2 cara menyisipkan video kedalam website:
  1. Menggunakan tag embed (object, embed, dan iframe)
  2. Dengan tag video di HTML5

#1. Cara embed video dari youtube atau video sharing lainnya ke blog

Saya sudah mencoba untuk langsung mengupload video ke blogspot, tapi engga bisa diputar. Entah apa penyebabnya. Playernya juga kurang menarik, hehe. Tapi intinya caranya seperti berikut ini:

a. Embed video menggunakan tag <embed>

Tag embed ini sudah lama banget, sejak netscape (belum ngerasain), atau zamannya friendster. Formatnya seperti ini:
<embed autostart="false" height="180" src="/path/nama_video.mpeg" width="250"></embed>

Ekstensi yang didukung adalah .swf (macromedia flash), .wmv (microsoft windows media video), .mov (quick time movie, apple), dan .mpeg (moving pictures expert group). Atributnya ada banyak, diantaranya:
  1. autostart - otomatis memulai video saat halaman dibuka, nilainya true atau false
  2. hidden - menampilkan button (control) atau tidak, nilainya true atau false
  3. volume - sound, dari 0 sampai 100
  4. loop- untuk reply (putar ulang), nilainya true atau false
  5. playcount - mirip dengan loop, tapi misal nilainya "2", akan berhenti jika 2x diputar

b. Embed video menggunakan tag <object>

Sebenernya fungsi tag object utamanya bukan untuk video, tapi bisa kita gunakan untuk menyisipkan video ke website. Formatnya seperti ini:
<object  data="/path/nama_video.mpeg" width="400" height="400">
    <param name="autoplay" value="true">
    <param name="volume" value="50">
</object>
Atribut atau parameternya hampir sama dengan tag embed diatas.

c. Embed video menggunakan tag <iframe>

Biasanya seorang pemilik website engga ngehosting video di website mereka sendiri. Alasannya karena video ini mengkonsumsi storage dan bandwidth yang besar. Makanya sebagian besar website menggunakan layanan video sharing seperti youtube atau vimeo.

Nah youtube/ vimeo/ dll ini biasanya menggunakan iframe untuk menampilkan video di situs yang lainnya. Formatnya seperti ini:
<iframe width="1126" height="768" src="https://www.youtube.com/embed/LWbHXXcF3bo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Jadinya begini:

Kamu bisa saja menggunakan tag embed atau object untuk video dari youtube (dll) nya. Tinggal sesuaikan saja src-nya. Tapi defaultnya kita dikasih tag iframe.

d. Perbandingan tag embed, object, dan iframe

Tag embed yang pertama kali ada di html, dan sudah didukung kebanyakan browser, tapi sekarang udah era-nya html5, ada tag yang lebih bagus (dibawah ini). Sedangkan tag object lebih diperuntukkan untuk media seperti flash.

Nah untuk iframe, pada dasarnya dia adalah tag embed -- yang fungsinya menampilkan halaman website lain, di website kita sendiri (remote). Penggunaan iframe tidak direkomendasikan dalam pertimbangan SEO.

#2. Cara menyisipkan video ke blog dengan tag video HTML5

Sudah saya singgung sedikit diatas, HTML5 merekomendasikan tag <video> untuk menampilkan video di website, ekstensi yang didukung adalah .mp4, .webm, dan .ogg. Penggunaannya pun cukup mudah, seperti ini:
<video width="100%" height="100%" controls>
  <source src="/path/nama_video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

Modern browser sekarang rata-rata sudah mendukung tag video html5.
Browser MP4 WebM Ogg
Internet Explorer ✔️ ✖️ ✖️
Chrome ✔️ ✔️ ✔️
Firefox ✔️ ✔️ ✔️
Safari ✔️ ✖️ ✖️
Opera ✔️ ✔️ ✔️

Atributnya juga tidak jauh berbeda dengan tag embed:
  1. preload - memuat video otomatis saat halaman html dibuka
  2. autoplay - otomatis memutar video
  3. loop - mengulang
  4. muted - untuk menonaktifkan suara
  5. controls - menampilkan control player
Ada juga atribut poster, fungsinya untuk mengubah thumbnail (gambar preview) video. Selengkapnya kamu bisa buka website w3.org diatas.

Ini contoh video yang disisipkan dengan tag <video>:


Gimana? Lebih oke kan? Dibanding video dari youtube diatas, saya bisa membuatnya fit-to-page (alias responsive) dengan menentukan height dan widthnya. Sedang di youtube, harus mengedit html template lagi.

#3. Hosting video gratis untuk blog

Sebelumnya saya ngehosting video untuk blog ini di gfycat. Tidak ada batasan size video di gfycat, tapiiiiii, maksimal durasi video yang bisa kita unggah maksimal hanya 1 menit. (sama aja dong kalo gitu).

1. Pakai telegra.ph

Udah lama saya melirik cara ini. Baru bisa digunakan sejak telegra.ph menggunakan https. (karena jika blog kamu https, tidak bisa menampilkan remote media yang bersumber dari halaman yang tidak https). 

Maksimal ukuran video yang bisa kita upload ke telegra.ph yaitu 5MB. Menurut saya ini cukuplah untuk video yang singkat. (Sekedar membantu penjelasan tutorial). Video diatas, itu dari telegraph, ini code menampilkannya:

<video controls="controls" eq-attached="true" height="100%" loop="" preload="auto" src="https://telegra.ph/file/f08119c8a988b32107dbc.mp4" width="100%"></video>

2. Embed video dari OneDrive

Sebenarnya ada beberapa opsi, pakai google drive, pakai mega nz, dll. Tapi saya lebih memilih menggunakan OneDrive. Alasannya, karena code embed dari OneDrive bisa dimanipulasi sehingga kita tetap bisa menggunakan <video> tag.

Pertama, upload video kamu ke onedrive. Cara generate code embednya harus dari onedrive live (web). Ini juga hanya berlaku untuk onedriver personal. Saya udah coba ke akun onedrive school, code embednya berbeda (karena pathnya ada di sharepoint).

Ini code embed (iframe) video dari onedrive:
<iframe src="https://onedrive.live.com/embed?cid=805ECBE9C72471E4&resid=805ECBE9C72471E4%21106&authkey=AKyf7Nt6mc1Uyvs" width="320" height="236" frameborder="0" scrolling="no" allowfullscreen></iframe>

Agar bisa digunakan dengan video tag, ganti embed? menjadi download. Seperti ini:
<video autoplay="autoplay" eq-attached="true" height="100%" loop="loop" muted="muted" preload="auto" src="https://onedrive.live.com/download?cid=805ECBE9C72471E4&amp;resid=805ECBE9C72471E4%21106&amp;authkey=AKyf7Nt6mc1Uyvs" width="100%"></video>

Berikut hasilnya:


Atributnya saya buat berbeda dengan video yang sebelumnya. Ini autoplay, tanpa control (seolah-olah jadi gif).... Berguna kalau video kamu mungil. Kalau resolusinya tinggi seperti diatas, jadinya pecah. Selengkapnya kamu bisa inspect element halaman ini.

... dah. Semoga bermanfaat.