Create a Mirror Stream With Function Refresh

Now I will share a very useful tutorial for you who have a video streaming blog, video streaming blog usually use mirror tab with different video host server so that blog visitors can choose which one he thinks is good. And on this occasion I will also create a Tutorial how to  Create a Mirror Stream With Function Refresh, because the streaming mirror that uses reload or refresh function for lighter and streaming video is not error, This script I took from Tuzone.us
Demo Click here
First go to Blogger> Themes> Edit HTML, then save the following CSS under <style> in your template, if it's save theme.

Copy the code below:

/* Create a Mirror Stream With Function Refresh By Arleth98
   ================================================= */
#tabmenu{list-style:none;overflow:hidden;margin-left:-8px}
#tabmenu li{float:left;width:33.3%;text-align:Center;margin-bottom:2px;background:#333}
#tabmenu li:hover{background:#1a77d0}
#tabmenu li:nth-child(even){background:#555}
#tabmenu li span{margin:0}
#tabmenu li a{display:block;cursor:pointer;padding:5px;font-weight:bold;color:#fff}
#tabmenu li a:hover{color:#FFF;text-decoration:none}
.infvideos{margin-top:10px;font-size:12px}
.infvideos .left{float:left}
.YuuStreamVideo p{margin:0}
.infvideos .left span{background:#1353A2;color:#FFF;display:block;float:left;margin-right:5px;border:1px solid #323232;margin:3px;padding:5px 8px}
.infvideos .left span a{color:#a2a2a2}
.infvideos .right{float:right}
.infvideos .right .reportmirror{float:right;margin-right:80px}

Second Make a post with HTML editing, then use the HTML markup and Javascript below, do not forget to change the link given in blue with your video link

Copy the code below And replace the blue code with your code:

<ul id="tabmenu" >
<li class='each-menu active'><a onclick="changeChannel('v1')">
  <span class="YuuPlayInfoFile">Savefile</span></a>
</li>
<span class="YuuStart"></span></li>
<li class='each-menu active'><a onclick="changeChannel('v2')"><span class="YuuPlayInfoFile">Mp4upload</span></a></li>
<span class="YuuStart"></span></li>
<li class='each-menu active'><a onclick="changeChannel('v3')"><span class="YuuPlayInfoFile">Openload</span></a></li>
<span class="YuuStart"></span></li></div>
<div id="plv">
  <div class='YuustreamVideo'>
    <div class='YuuStreamVideo'>
      <p>
        <iframe id="playerCode" type="text/html" frameborder="0" scrolling="no" width="100%" height="350px" src="https://www.youtube.com/embed/UJRSV_cJKlA" allowfullscreen=''></iframe>
      </p>
    </div>
    <script type='text/javascript'>
      function changeChannel(channelName){
      plyDiv = document.getElementById('playerCode');
      timestamp = new Date().getTime();
      switch(channelName)
      {
      case 'v1':
      plyDiv.src = 'https://www.youtube.com/embed/UJRSV_cJKlA';
      document.getElementById('YuuinfFile').innerHTML = 'Savefile';
      document.getElementById('Yuuinfvdio').innerHTML = 'tabsmirror';
      plyDiv.load();
      plyDiv.play();
      break;
   
      case 'v2':
      plyDiv.src = 'http://www.mp4upload.com/embed-lzc0kk8k6rmh.html';
      document.getElementById('YuuinfFile').innerHTML = 'Mp4upload';
      document.getElementById('Yuuinfvdio').innerHTML = 'tabsmirror';
      plyDiv.load();
      plyDiv.play();
      break;
   
      case 'v3':
      plyDiv.src = 'https://oload.tv/embed/Lx7ZgnV0jgY/Last_The_Side_Event.mp4';
      document.getElementById('YuuinfFile').innerHTML = 'Openload';
      document.getElementById('Yuuinfvdio').innerHTML = 'tabsmirror';
      plyDiv.load();
      plyDiv.play();
      break;
   
      }
      }
    </script>
  </div>
  <div class="infvideos">
    <div class="left"> <span id='YuuinfFile'><b>Savefile</b></span> </div>
  </div>
</div>

Thank you for reading my tutorial, hopefully useful, see you in the next tutorial

No comments