Menggunakan Plyr.js untuk Menampilkan Video di Blog

Biasanya disaat pemilik blog/website ingin menampilkan video di artikel mereka, mereka bakal menggunakan iFrame biasa yang designnya jelek dan nggak Responsive di layar.

Jangan jadi seperti mereka, gunakan Plyr.js.

Plyr.js adalah sebuah media player yang simple, ringan, mudah di costumize/edit, dan mendukung browser modern.

Plyr.js bisa digunakan untuk menampilkan HTML5 Audio, HTML5 Video, iFrame (Responsive), Youtube Video, dan Vimeo.

Beberapa fitur unggulannya :

1. Mudah di Costumize
2. Responsive
3. Picture-in-Picture
4. HTML yang rapi
5. Support banyak Subtitle/Caption
6. Bisa bekerja dengan Bootstrap
7. Embedded Video
8. Dan yang lainnya..

Panduan Install

Sebenernya Plyr.js bisa di install di banyak platform, tapi kali ini aku ngasih panduan install di blogger aja. Beda-beda dikit kok cara install nya sama platform lain.

Pertama, pasang kode CSS eksternalnya dulu. Pasang kode ini diatas kode </head>

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://cdn.plyr.io/3.4.7/plyr.css");
//]]>
</script>

Kedua, pasang kode Javascript eksternalnya, pasang kode ini diatas kode </body>

<script type='text/javascript' src='https://cdn.plyr.io/3.4.7/plyr.js'></script>
<script type="text/javascript">
/*<![CDATA[*/
const players = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p));
const plyrs = Array.from(document.querySelectorAll('.js-plyr')).map(plyrs => new Plyr(plyrs));
/*]]>*/
</script>

Jangan beri tag Async pada script eksternal Plyr.js jika kamu gamau script ini tetap berjalan.

Selesai, sekarang kamu tinggal panggil aja Plyr.js nya kalau mau nampilin video/audio di blog/website kamu.

Cara Memanggil

1. Memanggil Audio

<audio class='js-player' controls>
  <source src="#" type="audio/mp3">
  <source src="#" type="audio/m4a"><!-- src diganti dengan link audio, type diganti dengan ekstensi filenya (mp3, m4a, flac, dsb). -->
</audio>

2. Memanggil Video dari Youtube

<div class="js-player" data-plyr-provider="youtube" data-plyr-embed-id="88Nrdqw5Hx8"></div>

Perhatikan, ganti isi dari data-plyr-embed-id="..." dengan id dari video Youtube kamu. Kodenya ada di setelah tulisan ?v=.

Contoh :

https://www.youtube.com/watch?v=dlFA0Zq1k2A&list=RD9JB80AO-GCU

Bagian dlFA0Zq1k2A&list=RD9JB80AO-GCU adalah id yang kamu perlukan.

3. Memanggil Video dengan Direct Link

Jika kamu ingin nampilin video, tapi nge-upload nya di Google Drive atau Dropbox atau website upload lainnya, gunakan kode pemanggil ini :

<video class="js-plyr" controls playsinline poster="#" src="#">
  <source src="#" type="video/mp4" size="480">
  <source src="#?720" type="video/mp4" size="720">
  <source src="#?1080" type="video/mp4" size="1080">

<!-- Captions are optional -->
  <track kind="captions" label="Français" srclang="fr" src="#">
  <track kind="captions" label="English" srclang="en" src="#" default>
  <track kind="captions" label="Español" srclang="es" src="#">
</video>

Bagian yang bisa di-edit :

1. [poster="..."] = Ganti isinya dengan link gambar thumbnail yang ingin kamu gunakan.

Contoh :

poster="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5djyAhOeR620zt30Zq5RZrRpZmtAWylYESuyhDCeHuLuUVevv8XX25AbBARDIZwz35s2Df1VztrqcnSwKPeDljhXAAlBMb-r_Nt9m-jKGu7UhdkH4GH9fZ2JzxyUUUXxUmo3g5YQ1NIU/s1600/spiderman-into-the-spider-verse-4k-2018-9o.jpg"

2. [src="..."] = Ganti isinya dengan link video kamu.

Contoh :

src="https://cdn.plyr.io/static/blank.mp4"

3. [type="video/mp4"] = Ganti dengan ekstensi video kamu.

Contoh :

type="video/mp4"
type="video/mkv"
type="video/webm"

4. [size="..."] = Ganti dengan dimensi video kamu.

Contoh :

size="480"
size="720"
size="1080"

5. [label="..."] = Ganti dengan nama bahasa subtitle/caption.

Contoh :

label="Français"
label="English"
label="Indonesia"

6. [srclang="..."] = Ganti dengan singkatan negara yang kamu jadiin bahasa di subtitle / caption.

Contoh :

srclang="fr"
srclang="en"
srclang="id"

4. Memanggil Video dengan iFrame Youtube

Pertama, cari video yang akan digunakan di Youtube, kemudian tekan tombol Share.

Tekan tombol Embed, kemudian copy semua kode yang ada.

Setelah itu, berikan pembungkus seperti ini :

<div class="plyr__video-embed" id="player">
<iframe src="https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1" allowfullscreen allowtransparency allow="autoplay"></iframe>
</div>

Kode <div class="plyr__video-embed" id="player"> adalah pembungkusnya, didalamnya adalah kode iFrame untuk menampilkan videonya.

5. Settings JSON

Khusus bagi kalian yang ngerti setting JSON-nya, ini daftarnya langsung dari sumbernya.

Option	Type	Default	Description
enabled	Boolean	true	Completely disable Plyr. This would allow you to do a User Agent check or similar to programmatically enable or disable Plyr for a certain UA. Example below.
debug	Boolean	false	Display debugging information in the console
controls	Array, Function or Element	['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen']	If a function is passed, it is assumed your method will return either an element or HTML string for the controls. Three arguments will be passed to your function; id (the unique id for the player), seektime (the seektime step in seconds), and title (the media title). See controls.md for more info on how the html needs to be structured.
settings	Array	['captions', 'quality', 'speed', 'loop']	If you're using the default controls are used then you can specify which settings to show in the menu
i18n	Object	See defaults.js	Used for internationalization (i18n) of the text within the UI.
loadSprite	Boolean	true	Load the SVG sprite specified as the iconUrl option (if a URL). If false, it is assumed you are handling sprite loading yourself.
iconUrl	String	null	Specify a URL or path to the SVG sprite. See the SVG section for more info.
iconPrefix	String	plyr	Specify the id prefix for the icons used in the default controls (e.g. "plyr-play" would be "plyr"). This is to prevent clashes if you're using your own SVG sprite but with the default controls. Most people can ignore this option.
blankVideo	String	https://cdn.plyr.io/static/blank.mp4	Specify a URL or path to a blank video file used to properly cancel network requests.
autoplay	Boolean	false	Autoplay the media on load. This is generally advised against on UX grounds. It is also disabled by default in some browsers. If the autoplay attribute is present on a <video> or <audio> element, this will be automatically set to true.
autopause¹	Boolean	true	Only allow one player playing at once.
seekTime	Number	10	The time, in seconds, to seek when a user hits fast forward or rewind.
volume	Number	1	A number, between 0 and 1, representing the initial volume of the player.
muted	Boolean	false	Whether to start playback muted. If the muted attribute is present on a <video> or <audio> element, this will be automatically set to true.
clickToPlay	Boolean	true	Click (or tap) of the video container will toggle play/pause.
disableContextMenu	Boolean	true	Disable right click menu on video to help as very primitive obfuscation to prevent downloads of content.
hideControls	Boolean	true	Hide video controls automatically after 2s of no mouse or focus movement, on control element blur (tab out), on playback start or entering fullscreen. As soon as the mouse is moved, a control element is focused or playback is paused, the controls reappear instantly.
resetOnEnd	Boolean	false	Reset the playback to the start once playback is complete.
keyboard	Object	{ focused: true, global: false }	Enable keyboard shortcuts for focused players only or globally
tooltips	Object	{ controls: false, seek: true }	controls: Display control labels as tooltips on :hover & :focus (by default, the labels are screen reader only). seek: Display a seek tooltip to indicate on click where the media would seek to.
duration	Number	null	Specify a custom duration for media.
displayDuration	Boolean	true	Displays the duration of the media on the "metadataloaded" event (on startup) in the current time display. This will only work if the preload attribute is not set to none (or is not set at all) and you choose not to display the duration (see controls option).
invertTime	Boolean	true	Display the current time as a countdown rather than an incremental counter.
toggleInvert	Boolean	true	Allow users to click to toggle the above.
listeners	Object	null	Allows binding of event listeners to the controls before the default handlers. See the defaults.js for available listeners. If your handler prevents default on the event (event.preventDefault()), the default handler will not fire.
captions	Object	{ active: false, language: 'auto', update: false }	active: Toggles if captions should be active by default. language: Sets the default language to load (if available). 'auto' uses the browser language. update: Listen to changes to tracks and update menu. This is needed for some streaming libraries, but can result in unselectable language options).
fullscreen	Object	{ enabled: true, fallback: true, iosNative: false }	enabled: Toggles whether fullscreen should be enabled. fallback: Allow fallback to a full-window solution. iosNative: whether to use native iOS fullscreen when entering fullscreen (no custom controls)
ratio	String	16:9	The aspect ratio you want to use for embedded players.
storage	Object	{ enabled: true, key: 'plyr' }	enabled: Allow use of local storage to store user settings. key: The key name to use.
speed	Object	{ selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2] }	selected: The default speed for playback. options: Options to display in the menu. Most browsers will refuse to play slower than 0.5.
quality	Object	{ default: 'default', options: ['hd2160', 'hd1440', 'hd1080', 'hd720', 'large', 'medium', 'small', 'tiny', 'default'] }	Currently only supported by YouTube. default is the default quality level, determined by YouTube. options are the options to display.
loop	Object	{ active: false }	active: Whether to loop the current video. If the loop attribute is present on a <video> or <audio> element, this will be automatically set to true This is an object to support future functionality.
ads	Object	{ enabled: false, publisherId: '' }	enabled: Whether to enable vi.ai ads. publisherId: Your unique vi.ai publisher ID.
urls	Object	See source.	If you wish to override any API URLs then you can do so here. You can also set a custom download URL for the download button.

6. Bermain dengan CSS

Ini adalah contoh CSS style yang aku buat, kamu bisa menggunakannya langsung atau di-edit kembali agar sesuai dengan website punya kamu.

.js-plyr,.post,.post-content{max-width:100%}
.js-plyr,.plyr__control--overlaid svg,article pre{display:block}
.plyr__control--overlaid{padding:1.5rem;background-color:rgba(156,136,255,.75)}
.plyr--video .plyr__control.plyr__tab-focus, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true] {background-color: rgba(156,136,255,.9);}
.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before {background: #aab74d;}
.plyr--video .plyr__control.plyr__tab-focus {box-shadow: 0 0 0 2px rgba(156,136,255,.5);outline: 0;}
.plyr__control.plyr__tab-focus {box-shadow: 0 0 0 2px rgba(156,136,255,.5);outline: 0;}
.plyr--video .plyr__controls{background:linear-gradient(transparent,rgba(0,0,0,.5))}
.plyr--audio .plyr__control.plyr__tab-focus,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true],.plyr--video .plyr__controls .plyr__control.plyr__tab-focus,.plyr--video .plyr__controls .plyr__control:hover,.plyr--video .plyr__controls .plyr__control[aria-expanded=true],.plyr__menu__container label.plyr__control input[type=radio]:checked+span{background-color:rgba(156,136,255,.75)}
.plyr--full-ui input[type=range]{color:#9c88ff}
.plyr__poster{background-size:cover}
.plyr__control--overlaid:focus, .plyr__control--overlaid:hover {background: #9c88ff;}
.plyr-ratio .plyr__video-wrapper{padding-bottom:56.25%;height:0}
.plyr-ratio .plyr__video-wrapper video{width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;margin:auto}
.plyr__menu__container .plyr__control{font-size:14px;font-family:Google Sans,sans-serif;font-weight:500;line-height:1.5}
.plyr__menu__container ul,.plyr__menu__container ul li{margin:0;list-style:none}
.plyr--audio .plyr__controls{border:1px solid #dbe3e8}

Demo on CodePen