Cara Pasang JW Player di Blogger dan Template HTML 5

How to Embed JW Player in Blogger Blog - Diantara pemutar Video HTM yang banyak digunakan dan Premium adalah JW Player. JW Player biasanya saya gunakan untuk video yang kena copyright, seperti tarian anak yang sering menggunakan lagu-lagu populer.

Tutorial ini bisa digunakan untuk Blogger atau pengguna Template HTML 5.Untuk WordPress biasanya sudah ada plugin. Bagi sahabat yang memerlukan JW Player silahkan ikuti step-stepnya. Sekalian saya juga berikan key gratis .

JW Player JavaScript

Silahkan pasang js ini di atas </head>

<script src='https://kangismet.github.io/public/jwplayer-8-8-2.js' type='text/javascript'></script>

Versi Standar

Untuk versi standar, hanya menampilkan Video dan Thumbnail Video saja.

Setelah kode di atas terpasang, silahkan simpan kode ini di atas </body>.

 <script type='text/javascript'>/*<![CDATA[*/
  (function(a) {
    let plyElement = a.getElementById('player-jw');
    if (!plyElement)
      return;
    if (typeof jwplayer == 'function') {
      let jw = jwplayer('player-jw');
      jw.setup({
        title: plyElement.dataset.title,
        key: 'ITWMv7t88JGzI0xPwW8I0+LveiXX9SWbfdmt0ArUSyd=',
        width: '100%',
        aspectratio: '16:9',
        sources: [{
          'file': plyElement.dataset.video,
          'type': 'video/mp4',
        }],
        image: plyElement.dataset.poster,
      });
    }
  })(document);
/*]]>*/</script>

Untuk Kode HTML yang dipasang dipostingan seperti ini.

<div id='player-jw' data-video='URL_VIDEO' data-poster='URL_THUMBNAIL'>

Untuk id='player-jw' jangan dirubah, karena ini ID pemanggil. Yang lainnya silahkan sesuaikan.

Versi Lengkap

Untuk versi lengkap, ditambahkan logo, link logo, judul, dan subtitle. Silahkan dipelajari JSnya.

Untuk versi lengkap, gunakan kode ini dan simpan di atas </body>.

 <script type='text/javascript'>/*<![CDATA[*/
  (function(a) {
    let plyElement = a.getElementById('player-jw');
    if (!plyElement)
      return;
    if (typeof jwplayer == 'function') {
      let jw = jwplayer('player-jw');
      jw.setup({
        title: plyElement.dataset.title,
        key: 'ITWMv7t88JGzI0xPwW8I0+LveiXX9SWbfdmt0ArUSyd=',
        width: '100%',
        aspectratio: '16:9',
        sources: [{
          'file': plyElement.dataset.video,
          'type': 'video/mp4',
        }],
        logo: {
          'file': plyElement.dataset.logo,
          'link': plyElement.dataset.link,
          'hide': 'false',
          'position': 'top-right'
        },
        image: plyElement.dataset.poster,
        tracks: [{
          'file': plyElement.dataset.caption,
          'label': 'Indonesia',
          'kind': 'captions',
          'default': 'false'
          },
          {
          'file': plyElement.dataset.caption2,
          'label': 'Sunda',
          'kind': 'captions',
          'default':'true'
         }]
      });
    }
  })(document);
/*]]>*/</script>

Untuk Kode HTML nya seperti ini :

<div id='player-jw' data-video='URL_VIDEO' data-poster='URL_THUMBNAIL' data-logo='URL_LOGO' data-link='LINK_LOGO' data-title='Judul Video' data-caption='URL_SUBTITLE' data-caption2='URL_SUBTITLE2'>