Cara Gampang Menyisipkan Video Ke Dalam Postingan Blog

Ada kalanya kita merasa harus memasukkan video ke dalam postingan blog Cara Praktis Menyisipkan Video ke dalam Postingan Blog

salah satu contohnya.

Secara garis besar, ada 2 cara menyisipkan video kedalam website:

Menggunakan tag embed (object, embed, dan iframe)
Dengan tag video di HTML5

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

Saya sudah mencoba untuk pribadi mengupload video ke blogspot, tapi engga dapat diputar. Entah apa penyebabnya. Playernya juga kurang menarik, hehe. Tapi pada dasarnya caranya menyerupai berikut ini:

a. Embed video memakai tag <embed>

Tag embed ini sudah usang banget, semenjak netscape (belum ngerasain), atau zamannya friendster. Formatnya menyerupai ini:

<embed autostart="false" height="180" src="/path/nama_video.mpeg" width="250"></embed>

Ekstensi yang didukung yakni .swf (macromedia flash), .wmv (microsoft windows media video), .mov (quick time movie, apple), dan .mpeg (moving pictures expert group). Atributnya ada banyak, diantaranya:

autostart - otomatis memulai video dikala halaman dibuka, nilainya true atau false
hidden - menampilkan button (control) atau tidak, nilainya true atau false
volume - sound, dari 0 hingga 100
loop- untuk reply (putar ulang), nilainya true atau false
playcount - menyerupai dengan loop, tapi misal nilainya "2", akan berhenti jikalau 2x diputar

b. Embed video memakai tag <object>

Sebenernya fungsi tag object utamanya bukan untuk video, tapi dapat kita gunakan untuk menyisipkan video ke website. Formatnya menyerupai 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 memakai tag <iframe>

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

Nah youtube/ vimeo/ dll ini biasanya memakai iframe untuk menampilkan video di situs yang lainnya. Formatnya menyerupai ini:

<iframe width="1126" height="768" src="https://www.youtube.com/embed/LWbHXXcF3bo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Jadinya begini:

Kamu dapat saja memakai 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 kini udah era-nya html5, ada tag yang lebih anggun (dibawah ini). Sedangkan tag object lebih diperuntukkan untuk media menyerupai flash.

Nah untuk iframe, pada dasarnya ia yakni 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 yakni .mp4, .webm, dan .ogg. Penggunaannya pun cukup mudah, menyerupai 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 kini 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:

preload - memuat video otomatis dikala halaman html dibuka
autoplay - otomatis memutar video
loop - mengulang
muted - untuk menonaktifkan suara
controls - menampilkan control player

Ada juga atribut poster, fungsinya untuk mengubah thumbnail (gambar preview) video. Selengkapnya kau dapat buka website w3.org diatas.

Baca Juga

Ini rujukan video yang disisipkan dengan tag <video>:

Gimana? Lebih sepakat kan? Dibanding video dari youtube diatas, saya dapat 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 dapat kita unggah maksimal hanya 1 menit. (sama aja dong kalo gitu).

1. Pakai telegra.ph

Udah usang saya melirik cara ini. Baru dapat dipakai semenjak telegra.ph memakai https. (karena jikalau blog kau https, tidak dapat menampilkan remote media yang bersumber dari halaman yang tidak https).

Maksimal ukuran video yang dapat kita upload ke telegra.ph yaitu 5MB. Menurut saya ini cukuplah untuk video yang singkat. (Sekedar membantu klarifikasi 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 menentukan memakai OneDrive. Alasannya, sebab code embed dari OneDrive dapat dimanipulasi sehingga kita tetap dapat memakai <video> tag.

Pertama, upload video kau 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 dapat dipakai 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 kau mungil. Kalau resolusinya tinggi menyerupai diatas, jadinya pecah. Selengkapnya kau dapat inspect element halaman ini.

... dah. Semoga bermanfaat.

Sumber https://www.fathurhoho.id/