Posting Iframe dan menampilkan video .ogv, .mpeg/mpg di diBlogdetik

18 Dec 2011

Melalui media preview jQuery plugins, kesulitan untuk menampilkan beberapa media dalam bentuk iframe di halaman posting blogdetik akhirnya bisa teratasi. Dalam demo-1 dan demo-2 media dalam format file flash (.swf), .html (iframe), .mp4, dan embed kode dari google maps (iframe), youtube serta vimeo dapat dibuat sebagai materi posting dengan sangat sempurna sehingga kendala yang selama ini membatasi sekaligus menghalangi d’blogger untuk menyertakan sebuah media bergerak (movie/video) serta audio/music teratasi sudah. Demo ke-3 kali akan menunjukkan kepada kita bahwa peran jquery media plugins sederhana yang kita buat masih dapat menampilkan bebeapa bentuk file media yang lain seperti halnya file .ogv, .mpeg/.mpg dan sekaligus memberi kemungkinan untuk memnisualisasikan embed kode dari situs video sharing lain seperi halnya dailymotion yang tak berbeda jauh dengan youtube dan vimeo.

Media Preview » video (.mpg/.mpeg)

Video dalam bentuk file .mpeg/.mpg

Kode HTML :

<h3>Media Preview &raquo; video (.mpg/.mpeg)</h3> <a class="GRprev_video {width:480, height:360}" href="http://demojqueryprojects.comule.com/video/master_gubhugreyot_2_340.mpg">Video dalam bentuk file .mpeg/.mpg</a>

File video .mpeg/.mpg mempunyai ukuran width dan height yang berbeda tergantung setting yang dilakukan saat proses editing video dilakukan, oleh karena itu untuk mendapatkan preview video dengan hasil optimal, media preview harus diset sesuai ukuran file yang tersedia. Pada demo dimensinya width=480px dan height=360px, sehingga pada kode kita berikan ukuran width:480, height:360.

Media Preview » video (.ogv)

File video dalam format .ogv (di buat tanpa suara)

Saat ini banyak file video dalam format .ogv dapat anda download dan gunakan. Menampilkan video dalam bentuk ogv di halaman posting tak berbeda caranya dengan media yang lain. Pengaturan terpenting adalah pada penentuan width dan height agar bisa ditampilkan melalui player secara optimal.

Kode HTML :

<h3>Media Preview &raquo; video (.ogv)</h3> <a class="GRprev_video {width:480, height:360}" href="http://demojqueryprojects.comule.com/video/ogv_gubhugreyot-1.ogv">File video dalam format .ogv</a>

Media Preview » movie trailer (dailymotion)

Timber : by Esma-Movie

Seperti halnya Youtube dan Vimeo, daylymotion juga sebuah situs layanan video sharing yang sangat menarik untuk dikunjungi.

Kode HTML :

<h3>Media Preview &raquo; movie trailer (dailymotion)</h3> <a class="GRprev_video {width:630, height:354, type:'iframe'}" href="http://www.dailymotion.com/embed/video/xcvm0v_timber_shortfilms">Timber : by Esma-Movie</a>

Tunggu tutorialnya di gubhugreyot.blogdetik.com


TAGS Media & Iframe preview jQuery


-

Author

Follow Me