How to Install JW Player on Blogger and HTML 5 Templates

How to Embed JW Player in Blogger Blog - Among the widely used and Premium HTM Video players is JW Player. I usually use JW Player for copyrighted videos, such as children's dances that often use popular songs.

This tutorial can be used for Blogger or HTML 5 Template users. For WordPress, there is usually a plugin. For friends who need JW Player, please follow the steps. At the same time, I also provide a free key .

JW Player JavaScript

Please install this js above </head>

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

Standard Version

For the standard version, it only displays Videos and Video Thumbnails.

Once the above code is installed, please save this code above </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>

For HTML code that is posted like this.

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

Untuk id='player-jw' Do id='player-jw'n't change it, because this is the caller ID. Please adjust the rest.

Demo JW Player

Full Version

For the full version, added logo, logo link, title, and subtitle. Please study the JS.

For the full version, use this code and save it above </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>

For the HTML code like this:

<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'>

Demo JW Player Lengkap