Cara Membuat Cinema Mode seperti Web Streaming

Cara Membuat Cinema Mode seperti Web Streaming

Codepelajar - Halo sobat code pelajar ! selamat berjumpa kembali dengan artikel saya yang dijamin menarik ini. Pada kali ini saya akan membagikan kepada kalian semua yaitu tutorial membuat cinema mode atau theater mode pada situs video sobat. Cinema mode ini biasanya dalam berbentuk tombol yang biasa diletakan di bawah embed video yang sedang di putar pada situs-situs streaming. Dengan Menekan tombol cinema on, maka layar monitor akan seketika gelap kecuali bagian video yang sedang diputar pada situs web sobat. Mode ini biasa orang-orang sebut dengan mode theater juga karena serasa menonton sebuah theater.


Pada tutorial Sebelumnya saya sempat membuat Tab seperti Anoboy bisa dilihat di postingan saya kali ini disini


Cara membuat tombol light cinema swicth ini cukup mudah dan sederhana, karena sebenarnya di github juga sudah banyak berbagai script javascript perihal memasang mode theater ini. Dan pada kali ini kebetulan karena sebuah request dari seorang sobat blogger meminta agar codepelajar membuat artikel cara memasang tomnbol cinema swicth ini, saya akan membagikan tutorialnya kepada sobat sekalian yang ingin mencoba memasangnya. Baiklah sebelum mulai masuk ke tutorial sobat bisa melihat demonstrasinya dibawah ini.




Cara Memasang Tombol Cinema Mode sederhana

Pertama, sobat salin dahulu kode Javascript berikut dan letakan tepat di atas </body>.


<script>/*<![CDATA[*/if(jQuery){(function(a){a.extend(a.fn,{cinema:function(d){var e=a(this),g=a("body"),b=['<div class="jquery-cinema">',"</div>"];g.prepend(b.join(""));a(".jquery-cinema").css({height:g.height()+"px",position:"absolute",top:"0px",left:"0px",width:"100%","z-index":"4000","background-color":"rgb(0, 0, 0)",opacity:"0.9",display:"none"});a(".jquery-cinema").fadeIn(500);e.data("cinemaselfposition",e.css("position"));e.data("cinemaselfzindex",e.css("z-index"));e.css({position:"relative","z-index":"5000"});a(".jquery-cinema").click(function(){var m=a(".jquery-cinema").data("cinemaelements");if(m!=null){for(var j=0,n=m.length;j<n;j++){var k=m[j];k.css({"z-index":k.data("cinemazindex"),position:k.data("cinemaposition")})}}a(this).fadeOut(500,function(){a(this).remove()});e.css({position:e.data("cinemaselfposition"),"z-index":e.data("cinemaselfzindex")})});if(d!=null){if(d.elements!=null){a(".jquery-cinema").data("cinemaelements",d.elements);for(var f=0,h=d.elements.length;f<h;f++){var c=d.elements[f];c.data("cinemazindex",c.css("z-index"));c.data("cinemaposition",c.css("position"));c.css({"z-index":"9999",position:"relative"})}}}},uncinema:function(){var d=a(".jquery-cinema").data("cinemalements");if(d!=null){for(var b=0,e=d.length;b<e;b++){var c=d[b];c.css({"z-index":c.data("cinemazindex"),position:c.data("cinemaposition")})}}a(".jquery-cinema").fadeOut(500,function(){a(this).remove()});a(this).css({position:a(this).data("cinemaselfposition"),"z-index":a(this).data("cinemaselfzindex")})}})})(jQuery)};/*]>*/</script>

Selanjutnya, tinggal menyalin kode pemicu untuk tombolnya seperti di bawah ini. Kode ini bisa sobat simpat disaat memporting, atau sobat bisa pasang sebelum </body> agar tidak selalu mengulang kode yang sama.

<script>/*<![CDATA[*/
$(document).ready(function(){
 /*== Definisikan variable biar gampang ==*/
    var video_wrapper = $('.video-cinema') /*<<=== Bisa disesuaikan dengan id/class video wrappernya */
    var tombol_cinema = $('.cinema-on') /*<<== yang ini juga sesuaikan */

    tombol_cinema.click(function(){
     video_wrapper.cinema();
    });
})
/*]]>*/</script>


Jika sudah memasang script diatas, langkah kedua adalah memasang css berikut untuk merapihkan tombolnya. Sobat juga bisa membuat tombol sendiri jika tidak suka dengan cara saya, sobat bisa membuatnya custom. sobat simpan css ini sebelum tag </head>.

<style type="text/css">
.button-wrapper {
    position: relative;
    text-align: center
}
.button-wrapper button {
    background: #ddd;
    border: none;
    padding: 10px;
    width: 100%;
}
</style>

Langkah selajutny adalah bagaimana cara membuat struktur kode di HTML-nya. Di setiap postingan video yang akan di upload sobat hanya perlu membuat seperti ini:

<div class="video-cinema"> <!-- Sobat hanya perlu menambahkan class video-cinema seperti ini -->
    <div class="video-responsive">
      <iframe src='LINK-VIDEO'></iframe>
    </div>
</div>
<div class="button-wrapper">
    <button class="cinema-on">Cinema on</button>
</div>

Setelah selesai, save dan lihat hasilnya. Pastikan sobat mengerti di setiap langkahnya. Jika masih ada error periksa kembali dan cek errornya di console


Cinema mode ini menggunakan Jquery library, jadi kalau belum pasang jquerynya sobat hanya perlu memasang kode jquery yang terbaru saja. Untuk informasi tentang script asal jqeury cinema mode ini bisa dilihat di situs officialnya disini.

Baiklah ini akhir dari postingan saya kali ini tentang bagaimana cara memasang mode cinema/theater seperti situs streaming kebanyakan. Kode ini sangat sederhana dan sobat bisa berkreasi sesuai ide sobat punya saja seperti apa ingin dibuatnya. Bagi yang kebingungan jangan sungkan untuk bertanya di komentar dibawah setelah artikel ini. Nantikan tutorial lainnya seputar Code Blogging di Codepelajar.


Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel