Cara Gampang 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
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&resid=805ECBE9C72471E4%21106&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/
