Membuat Multi Server Video Streaming Seperti Layarkaca21

Anang_at
Apa itu Multi Server Video Streaming ?
Multi tab Server Video Streaming adalah beberpa tab server player video striming untuk memutar video atau film striming di blog atau website.

Kalanu kalian pernah play film striming di internet ada beberapa kualitas SD, HD, Full HD, BluRay dan lainnya. Bila video tersebut tidak bisa di putar maka kita ganti tab server dan seterusnya. Hal ini untuk mengantisipasi bila link alternatif striming (cadangan) tidak bisa di putar.

Responsive Multi tab Server Video Streaming ini sangat nyaman ketika kita play video langsung load, jadi loding tidak terasa berat karena sudah suport Responsive.

Beberapa hal yang harus di persiapkan dalam membuat Multi Server Video Streaming Seperti Layarkaca21 
  • Postingan blog
  • Kode script
Kode CSS Untuk di pasang </head>
<style type="text/css">
/*CSS Multi Tab Video by Blog Mas Tamvan*/
#multitab-video{position:relative;box-sizing:border-box;margin:0 auto;line-height:2em;font-size:15px!important;width:100%}
#multitab-video #movie-player{position:relative;padding-bottom:56.25%;padding-top:1.66666666666667em;height:0}
#multitab-video #movie-player iframe{position:absolute;top:0;left:0;width:100%;height:100%}
#multitab-video #server-list{position:relative;background:#fafafa;display:block}
#multitab-video #server-list .server-item:before{content:attr(title);width:9.93333333333333em;display:inline-block;padding-left:0.933333333333333em}
.server-item{border-bottom:1px solid #c8c8cb}
#multitab-video #server-list a{color:#334;text-decoration:none;border:1px solid #443;padding:0.333333333333333em 0.666666666666667em;display:inline-block;margin:0.333333333333333em;box-sizing:border-box}
a:active{background-color:yellow}
</style>

Kode HTML untuk di pasang di postingan
<div id='multitab-video'>
    <div id="movie-player">
        <iframe src="EMBED URL VIDEO" frameborder="0" webkitAllowFullScreen="" mozallowfullscreen="" allowFullScreen="" name="search_iframe"></iframe>
    </div>
    <div id="server-list">
        <div class="server-item" title="NAMA SERVER">
            <a href="EMBED URL VIDEO" target="search_iframe">SD 360p</a>
            <a href="EMBED URL VIDEO" target="search_iframe">SD 480p</a>
            <a href="EMBED URL VIDEO" target="search_iframe">HD 720p</a>
            <a href="EMBED URL VIDEO" target="search_iframe">HD 1080p</a>
        </div>
        <div class="server-item" title="NAMA SERVER">
            <a href="EMBED URL VIDEO" target="search_iframe">SD 360p</a>
            <a href="EMBED URL VIDEO" target="search_iframe">SD 480p</a>
            <a href="EMBED URL VIDEO" target="search_iframe">HD 720p</a>
            <a href="EMBED URL VIDEO" target="search_iframe">HD 1080p</a>
        </div>
    </div>
</div>
Keterangan 
  • Kode warna biru ubah nama server kalian
  • Kode warna merah link iframe video / filem
  • Kode warna pink ubah nama kualitas video / film

Yuk kita Membuat Multi Tab Server Video Streaming Responsive di Blog dengan mudah, ikuti langkah - langkah berikut 
  • Masuk Dasbor, Menu Tema, Edit HTML

  • Copy paste kode CSS di atas </head> yang sudah saya sediakan di atas, lalau save

  • Buat postingan, Masukan kode HTML di postingan dan ubah menjadi mode HTML, kode yang sudah saya sediakan di atas

    Keterangan 
    • Kode warna biru ubah nama server kalian
    • Kode warna merah link iframe video / filem
    • Kode warna pink ubah nama kualitas video / film

  • Save dan lihat hasilnya

Sekarang kalian sudah bisa membuat Membuat Multi Tab Server Video Streaming Responsive di Blog atau website dengan sederhana serta simpel, yang suka buat blog / website setriming ini sangat rekomendasi sekali untuk anda, semoga turotial ini bisa bermanfaat, Trima kasih
Comments

Komentar

Cancel