How to Install a Simple Episode Switcher

The first step is to make sure your site includes Jquery library, if not you can install it first by copying the following code modified Jquery (loaded when the page has all been loaded) and put it on top </head>

<script type='text/javascript'>
//<![CDATA[
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

Or you can directly code the following if the above doesn't work. the same way as copy above </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Then you can just make a post or page by putting the code below

<span id='AnimeTitle'>Episode 1</span>
<div class='append-video'>
    <video id='animeshot' controls="controls" width="100%">
        <source src="https://www.blogger.com/video-play.mp4?contentId=568ed33395090bba" type="video/mp4" />
    </video>
</div>
<div id="Episode" class="tabs tabs-episode">
<!-- tombol akan muncul disini -->
</div>

<!-- CSS PEMBANTU -->
<style>
#Episode {
    display: flex;
    flex-wrap: wrap;
}
.ganti-episode {
    padding: 5px 10px;
    margin: 3px;
    background: #e1e1e1;
    color: #444;
    border-radius: 3px;
    cursor: pointer;
}
#AnimeTitle {
    display: block;
    width: 100%;
    text-align: center;
    padding: 5px;
    font-size: 18px;
    font-family: 'Custom','Oswald';
    background: #232323;
    color: #fff;
}
</style> 

<!-- JAVASCRIPTNYA -->
<script>
// Link video taruh disini (Usahakan 1 jenis link sumber)
var anime = [
 "https://www.blogger.com/video-play.mp4?contentId=568ed33395090bba",
 "https://www.blogger.com/video-play.mp4?contentId=27472a21b43a674e",
 "https://www.blogger.com/video-play.mp4?contentId=c4801a3d8a176fd2",
 "https://www.blogger.com/video-play.mp4?contentId=77904c34fd08c3ad",
 "https://www.blogger.com/video-play.mp4?contentId=1d3269c7c2ed2e15",
 "https://www.blogger.com/video-play.mp4?contentId=c44d94e10282dad4",
 "https://www.blogger.com/video-play.mp4?contentId=30245e959f9cd3b3",
 "https://www.blogger.com/video-play.mp4?contentId=a10ecd6616ac3e4a",
 "https://www.blogger.com/video-play.mp4?contentId=c51622f8e17ae30a",
 "https://www.blogger.com/video-play.mp4?contentId=7e12f1ae1549abd6",
 "https://www.blogger.com/video-play.mp4?contentId=1b32c8a8046606fa",
 "https://www.blogger.com/video-play.mp4?contentId=53c37132c30433c",
]

$(document).ready(function(){

(function(){
 // Definisikan Jumlah Episode dan lokasi appendnya
 var jumlahEpisode = anime.length
 var tabsEps = $('.tabs-episode')

 //tombol akan di lopping sesuai jumlah data Array Anime
 for (var i = 0; i < jumlahEpisode; i++) {
    tabsEps.append("<a class='ganti-episode' data-id='"+i+"' data-eps='Episode "+(i+1)+"'>'"+(i+1)+"</a>")
 }

 // Definisikan lokasi yang akan di timpakan video anime
 var videoAnime = $('.append-video')

 //saat di klik tombolnya maka elemen video akan berganti
 $('.ganti-episode').click(function(){

 //CATATAN : ini untuk yang menggunakan tag <video></video>
  videoAnime.html('<video id="animeshot" controls="controls" width="100%"><source src="'+anime[parseInt($(this).data('id'))]+'" type="video/mp4"></video>')

 //CATATAN : ini untuk yang menggunakan iframe
 //  videoAnime.html('<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="'+anime[parseInt($(this).data('id'))]+'" ></iframe></div>')

 // Nama Episode akan berganti
  $('#AnimeTitle').text($(this).data('eps'))
 })

}())

 
})
</script>

Note: Pay attention to Laying and the Code so that the results when the test buddy succeeds according to the tutorial. If difficulties or confusion try commenting below.
 DEMO
That's how to install the episode switcher that I made simple. Indeed there are still many ways that are used and there are also those who use an easier method than this. At least this method can be applied by friends blogged friend

Source: codepelajar.com