Video HTML5 Player
Menampilkan Video menggunakan elemen video di HTML5

Sabung Ayam – Elemen Video di HTML5 memungkinkan kita untuk menampilkan video secara langsung tanpa membutuhkan aplikasi tambahan di luar html itu sendiri. Sebagai gambaran, sebelum HTML5 menjadi umum, untuk menampilkan video biasanya kita memerlukan bantuan Flash Plugin, File video yang ditampilkan-pun sudah diubah formatnya ke dalam format Flash. Hal ini memunculkan permasalahan kompatibilitas, karena pengunjung halaman yang ingin melihat content Video tersebut harus terlebih dahulu melakukan instalasi Flash Player sebagai plugin di browser yang digunakan.

Elemen Video

Berikut adalah contoh penggunaan elemen video di dalam halaman HTML;

<video controls poster="gambar.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Browser anda tidak mendukung pemutaran video.
</video>
  • Elemen video dibuka dengan tag pembuka dan ditutup dengan tag penutup
  • Memiliki beberapa atribut seperti : width, height, controls, poster, autoplay, lengkapnya dapat anda pelajari di url rujukan seperti yang dilampirkan di bawah artikel ini.
  • Dapat memutar 3 tipe file video yaitu mp4, ogg dan webm
  • Bisa berisi satu atau lebih source file, pengunjung dapat memilih sesuai dengan preferensi masing-masing apabila tidak ingin memutar video dengan tipe default

Atribut Poster, Autoplay dan Controls

Beberapa atribut yang sering digunakan memiliki fungsi ataupun kegunaan kurang-lebih sebagai berikut;

  • Poster merujuk kepada  gambar yang ditampilkan sebelum video tersebut diputar (play)
  • Autoplay apabila digunakan akan membuat video tersebut secara otomatis diputar (play) pada saat halaman selesai dipanggil
  • Controls apabila digunakan akan menampilkan kendali seperti Play / Pause, Volume Control, Full Screen Toggle dan Timeline

Perhatikan gambar berikut sebagai ilustrasi;

Video HTML5 Controls
Ilustrasi Video menggunakan HTML5

Di ilustrasi di atas dapat dilihat memanfaatkan atribut Poster, menampilkan gambar statis ketika video belum di play, dan juga mengaktifkan atribut Controls, yang menampilkan menu fungsional di bagian bawah video. Tampilan untuk masing-masing browser akan berbeda-beda namun fungsi dan pembagian sesuai atribut yang digunakan sama.

Shortcode di Template WordPress

Pemanfaatan shortcode di dalam template WordPress memiliki kegunaan masing-masing, dalam kasus elemen video HTML5, penggunaan shortcode akan mencegah ketidak-konsistenan format post wordpress yang kita miliki. Post atau Page di dalam wordpress yang kita buat alangkah baiknya dibuat se-steril mungkin dari kode HTML, memanfaatkan fitur yang disediakan oleh WordPress sehingga perubahan dan penambahan dikemudian hari lebih mudah dilakukan.

Selain itu, dalam kegunaaan untuk menampilkan Video, penggunaan shortcode dapat mempersingkat penulisan, dengan memasukkan path url ke dalam kode dan bukan ke dalam page atau post.

Untuk menampilkan video tanpa menggunakan shortcode kita harus menuliskan lengkap tag html dan atribut yang ingin kita gunakan, perubahan di masa yang akan datang pun harus kita lakukan satu-persatu, sebagai berikut;

<video controls poster="http://video.domain.com/gambarposter.jpg">
  <source src="http://video.domain.com/video.mp4" type="video/mp4">
</video>

Pada contoh di atas video.domain.com adalah subdomain yang kita gunakan. Sementara berikut adalah penulisan dengan menggunakan Shortcode di dalam post wordpress;

[vid file="video.mp4" poster="gambarposter.jpg"]

domain dan path yang digunakan dimasukkan kedalam fungsi yang nanti akan kita buat, dengan demikian memberikan keuntungan tambahan; pemindahan path penyimpanan video dan gambar dikemudian hari dapat kita ubah tanpa harus merubah post kita satu-persatu.

Membuat Shortcode di File functions.php

Dokumentasi lengkap mengenai API yang disediakan oleh WordPress terkait dengan pembuatan shortcode dapat dibaca lebih lanjut di Shortcode API Codex WordPress. Berikut adalah contoh sederhana terkait pembuatan shortcode untuk elemen video HTML5.

Langkah pertama adalah dengan membuat file yang berjudul functions.php (apabila belum ada) di dalam folder themes / template yang anda gunakan. File ini dapat dibuat baik melalui fasilitas cPanel (Hosting Control Panel) atau apabila anda memiliki akses FTP juga dapat menggunakan akses FTP yang anda miliki.  File functions.php berada di dalam folder yang sama dengan file template anda yang lain seperti index.php, header.php, footer.php, style.css.

Di dalam file functions.php tersebut kita akan melakukan dua hal sebagai berikut;

  • Menuliskan fungsi yang akan dijalankan ketika WordPress Template Framework menemukan shortcode handler yang kita daftarka di dalam page / post.
  • Mendaftarkan shortcut handler yang ingin kita gunakan, dalam hal ini vid, untuk penulisan shortcode [vid]
<?php

//Fungsi yang akan dijalankan (vid_html)
//Mengambil atribut dari dalam post (url dan page)
//Menampilkan full html5 elemen

function vid_html( $atts ) {
$vid = shortcode_atts( array(
'file' => '',
'poster'=>'',
), $atts );

return '
<video controls="controls" width="100%" height="auto" poster="http://video.domain.com/'.$vid['poster'].'">
<source src=http://video.domain.com/"'.$vid['url'].'" type="video/mp4">
</video>';

}

//Shortcut Handler
//Register shortcode vid untuk menjalankan fungsi vid_html
add_shortcode( 'vid', 'vid_html' );

?>

Setelah dua penambahan tersebut dilakukan maka setiap shortcode dengan contoh sebagai berikut;

[vid url="video.mp4" poster="gambar.jpg"]

Akan diterjemahkan oleh fungsi vid_html sehingga tampil ke browser menjadi sebagai berikut;

<video controls poster="http://video.domain.com/gambar.jpg">
  <source src="http://video.domain.com/video.mp4" type="video/mp4">
</video>

Demikian adalah contoh sederhana untuk pembuatan shortcode yang dapat anda integrasikan dengan template wordpress yang anda buat. Tentunya fungsi yang harus dimasukkan akan menjadi lebih kompleks apabila kebutuhan shortcode anda juga lebih kompleks. Namun secara prinsip fungsi dan handler yang dicontohkan diharapkan mampu memberikan gambaran kepada pengembangan dari fungsi tersebut.

Link

Advertisements