Use CDNJS

We strongly advise that any third party Javascript Libraries like JQuery or CSS Frameworks are loaded from cdnjs as we have added a special rule in our caching logical to provide preferential caching for this URL. All libraries at that URL will be loaded from cache before going over the network. That means that as long as your code has loaded at least once on a particular device it will thereafter load from the cache making your code work when the Device's Internet is offline.

If you'd like to have the same icons as TelemetryTV you can use the Font Awesome library on cdnjs.com for all your icons.

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>  
  .inner {
    position: absolute;
    width: 50%;
    bottom: 10px;
    left: 25%;
    text-align: center;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
  }

  .fa {
    font-size: 32px;
    color: #0a394e;
  }
  </style>
</head>

<div class="inner">
<i class="fa fa-step-backward" id="previousBtn" style="font-size:36px;"></i>
<i class="fa fa-play-circle" id="playBtn" style="font-size:36px;"></i>
<i class="fa fa-pause-circle" id="pauseBtn"  style="font-size:36px"></i>
<i class="fa fa-step-forward" id="nextBtn" style="font-size:36px;"></i>
</div>

<script>
window.onloadTelemetryTV = function ttvSdkOnLoadFunc (ttv) {
  console.warn('onloadTelemetryTV:', ttv)

  const nextBtn = document.getElementById('nextBtn')
  if (nextBtn) {
    nextBtn.addEventListener('click', function () {
      window.console.log('Clicked on Next Page button')
      if (ttv.playlist && ttv.playlist.nextPage) {
        ttv.playlist.nextPage()
      }
    })
  }

  const previousBtn = document.getElementById('previousBtn')
  if (previousBtn) {
    previousBtn.addEventListener('click', function () {
      window.console.log('Clicked on Previous Page button')
      if (ttv.playlist && ttv.playlist.previousPage) {
        ttv.playlist.previousPage()
      }
    })
  }

  const playBtn = document.getElementById('playBtn')
  if (playBtn) {
    playBtn.addEventListener('click', function () {
      window.console.log('Clicked on Play button')
      if (ttv.playlist && ttv.playlist.play) {
        ttv.playlist.play()
      }
    })
  }

  const pauseBtn = document.getElementById('pauseBtn')
  if (pauseBtn) {
    pauseBtn.addEventListener('click', function () {
      window.console.log('Clicked on Pause button')
      if (ttv.playlist && ttv.playlist.pause) {
        ttv.playlist.pause()
      }
    })
  }

  const onApiChange = function onApiChange (status) {
    window.console.warn(`The API Status Changed! (${status})`)
  }
  ttv.onApiStatusChange(onApiChange)

  const onPageChange = function onPageChange (newPage) {
    ttv.log(`onPageChange - to ${newPage.name} (${newPage.id})`)
  }
  ttv.onPageChange(onPageChange)
}
</script>