MASIGNALPHA101
6625556490781333381

Responsive HTML5 Video Player

Responsive HTML5 Video Player
Monday, September 24, 2018

Cara Menginstall / Memasang Html5 Video Player
Letakan plyr.css di bagian atas </head>, dengan Copy Paste Code Berikut :
<link href='https://cdn.plyr.io/3.4.3/plyr.css' rel='stylesheet'/>
Letakan plyr.js di atas </body>, dan menginisialisasi Plyr (), dengan Copy Paste Code Berikut:
<script src="https://cdn.plyr.io/3.4.3/plyr.js"></script>
Letakan JQuery di atas </body>, dengan Copy Paste Code Berikut :
<script>/*<![CDATA[*/const players = Array.from(document.querySelectorAll('.js-player')).map(player => new Plyr(player));/*]]>*/</script>


Memasang Kode HTML Video Player Default Dengan Thumbnail
<video class='js-player' poster="thumbnail.jpg" controls playsinline>
  <source src="video.mp4" type="video/mp4">
</video>

Format
Untuk menentukan format yang berbeda, anda bisa menggunakan format webm, yang merupakan format video dengan kualitas sangat baik dan sangat sedikit, tetapi belum didukung oleh semua browser, sehingga lebih mudah untuk meninggalkan format tersebut dengan di gantikan format video yg mendukung browser anda
<video class='js-player' poster="thumbnail.jpg" controls playsinline>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

Menambahkan Subtitle
Plyr kompatibel dengan subtitle WebVTT, untuk ini cara termudah adalah menggunakan elemen HTML5 <track />, misalnya :
<video class='js-player' poster="thumbnail.jpg" controls playsinline crossorigin>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <!-- Subtitle-->
  <track kind="captions" label="English" srclang="en" src="captions_en.vtt">
  <track kind="captions" label="Español" srclang="es" src="captions_es.vtt" default>
</video>

Kualitas
Versi 3.1.x sudah mendukung opsi kualitas untuk video dalam HTML5. Untuk menentukan opsi kualitas, kami perlu menambahkan elemen HTML5 , dengan ukuran atribut = "{quality}", di mana {kualitas} diganti oleh kualitas video,
<video class='js-player' poster="thumbnail.jpg" controls playsinline>
  <!-- Kualitas -->
  <source src="video_576p.mp4" size="576" type="video/mp4">
  <source src="video_720p.mp4" size="720" type="video/mp4">
  <source src="video_1080p.mp4" size="1080" type="video/mp4">
</video>
Plyr secara otomatis akan mendeteksi opsi kualitas yang ditentukan dalam HTML, menambahkan ini ke menu opsi.

Finally HTML Video Player Dengan semua Fitur thumbnail, Kualitas , subtitle
<video class='js-player' poster="thumbnail.jpg" controls playsinline>
  <!-- Kualitas -->
  <source src="video_576p.mp4" size="576" type="video/mp4">
  <source src="video_720p.mp4" size="720" type="video/mp4">
  <source src="video_1080p.mp4" size="1080" type="video/mp4">
 <!-- Subtitle -->
 <track kind="captions" label="English" srclang="en" src="captions_en.vtt">
 <track kind="captions" label="Español" srclang="es" src="captions_es.vtt" default>
</video>