Menambahkan Timeline pada Video Youtube

Dengan menggunakan Javascript, video di youtube yang ditempelkan di website atau blog dapat diatur dengan kode program. Skrip dari program berikut dapat ditambahkan dalam sebuah laman web berbasis HTML.

<div id="player"></div>
<br>
    <input type="button" value="Intro" onclick="setCurrentTime(0)" /> Intro<br>
    <input type="button" value="Bagian 1" onclick="setCurrentTime(1)" /> Inovator Sesi 1<br>
    <input type="button" value="Bagian 2" onclick="setCurrentTime(2)" /> Inovator Sesi 2<br>
    <input type="button" value="Bagian 3" onclick="setCurrentTime(3)" /> Inovator Sesi 3<br>
    <script>
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '480',
          width: '680',
          videoId: '1LSGD435qoI',
        });
      }
      function setCurrentTime(slideNum) {
        var object = [ 60, 120, 220,550 ];
        player.seekTo(object[slideNum]);
      }

Untuk menyesuaikan skrip di atas agar sesuai dengan video yang kita miliki, kita dapat menyunting pada bagian yang diperlukan, yaitu pada bagian Button, dimana kita dapat mengganti teks tombol sesuai kebutuhan, termasuk menambah atau mengurangi tombol sesuai dengan jumlah yang dibutuhkan. Contoh kode untuk salahsatu tombol di atas adalah sebagai berikut.

<input type="button" value="Bagian 1" onclick="setCurrentTime(1)" /> Inovator Sesi 1<br>

Penyuntingan berikutnya adalah pada bagian pengaturan waktu pada masing-masing tombol. Pada contoh di atas, jumlah tombol yang ditampilkan adalah 4 buah, sedangkan timing waktu untuk menentukan waktu video pada saat tombol diklik adalah pada baris berikut:

var object = [ 60, 120, 220,550 ];

Pada bagian ini kita memiliki larik sejumlah empat buah sesuai jumlah tombol. Masing-masing lirik merupakan detik dimulainya video. Sebagai contoh, tombol nomor dua, jika diklik, akan memutar video mulai detik 120, tombol ketiga akan memulai video pada detik 220. Pada bagian inilah kita dapat mengubahnya sesuai video kita.

Perlu diperhatikan, skrip ini hanya dapat dijalankan pada server yang mendukung JavaScript semisal Blogspot. Situs seperti WordPress.com tidak mendukung JavaScript sehingga tidak dapat mengatur timing dengan skrip di atas.