Cara memasang video dengan JW Player di blogspot, bagaimana menambahkan video pada postingan blog dengan JWPlayer secara gratis
Gak tau kenapa, akhir-akhir ini saya lagi suka aja posting hal-hal yang berbau video, eh salah deh nanti konotasinya negatif lagi. Maksudnya Pemutar Video / Video Player bray, jika kalian perhatikan dan saya yakin kalian tidak memperhatikan bahwa dipostingan sebelumnya ada dua artikel yang erat hubungannya dengan video, salah duanya, ada Implementasi Penggunaan Tag <video> HTML5 pada Postingan Blog dan Memasang Video JS di Blogspot dengan Video dari Google Drive. Terlepas dari kedua artikel tersebut, lagi dan lagi saya akan berbagi seputar Pemutar Video yaitu JW Player.
JW Player sendiri adalah sebuah pengaya untuk memutar konten video atau audio dengan sangat mudah dan pintar. Berbeda halnya dengan player bawaan HTML5 ataupun Video JS, banyak orang khususnya yang memiliki blog streaming memilih JW Player karena aspek kompatibilitasnya. Maka dari pada itu, untuk menggunakan video player JW Player ada harga yang perlu kita keluarkan, tapi tenang, JW Player sendiri memberikan trial atau masa percobaan, bagi kita yang ingin menggunakan JWPlayer. Tak tanggung-tanggung masa percobaannya pun lumayan lama yaitu selama 6 bulan.
Sebelum ke pemasangan seperti biasa, saya berikan demo memasak eh demo video dengan menggunakan JW Player
Memasang JW Player pada Blogger secara Gratis
Cukup mudah sebetulnya, tapi jangan disimak aja. Langsung praktekin bray.- Kunjungi situs resminya JW Player
- Ga dikunjungi juga kaga ngapa-ngapa sii
- Masuk Blogger > Edit Template > Cari </head> pastekan JavaScript di bawah tepat di atas tag </head> lalu Save
<script src="https://content.jwplatform.com/libraries/xZ88RwO4.js"></script> <script type="text/javascript">jwplayer.key = "9dOyFG96QFb9AWbR+FhhislXHfV1gIhrkaxLYfLydfiYyC0s";</script>
- Sekarang kita pasang JW Playernya di postingan, pastekan kode di bawah pada mode HTML
<div id="myElement"></div> <script> var playerInstance = jwplayer("myElement"); playerInstance.setup({ image: "poster_video_kalian", aspectratio: "16:9", primary: "html5", sources: [{ file: "/sample/BigBuckBunny.360p.mp4" },{ file: "/sample/BigBuckBunny.720p.mp4" }] }); </script>
- [message]
- ##bullhorn## Keterangan
-
myElement adalah id video kalian, jadi ketika ingin membuat dua player secara bersamaan cukup bedakan saja nama id nya image merupakan atribut yang bisa kita gunakan untuk menampilkan thumbnail video aspectratio merupakan skala dari video tersebut, kenapa saya tidak menggunakan width dan height karena untuk membuat video yang responsive penerapan seperti itu juga bisa, kalian bisa isi 16:9 atau 4:3 source merupakan sumber media atau video, lantas kenapa ada dua ? maksud disana adalah resolusi dari sebuah video, jadi kedua video tersebut sama hanya resolusinya saja yang berbeda misalnya video pertama resolusinya adalah 720p dan yang kedua adalah 1080p. Lebih pada penggunaan tombol HD nya saja sii, pada source di isi satu juga ga masalah
COMMENTS