برنامج فور شو للأندرويد

كود عرض السيرفرات/المشغلات/الحلقات للـ بلوجر أو ووردبريس

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته


اليوم حاب أطرح لكم كود سيرفرات المشاهدة أو الحلقات لمواقع الأفلام والمسلسلات وغيرها
الكود خاص, قمت بكتابته بالتعديل عليه ليتوافق مع نظرتي الخاصه, بإمكانك التعديل عليه كما يحلو لك
الكود يعمل على اي منصة HTML مثل بلوجر Blogger او ووردبريس WordPress أو اي سكربت HTML
,
طبعاً إذا كنت مثلي فأنت قمت بالبحث كثيراً عن كود السيرفرات/المشغلات والحلقات, ولم تجد الكثير منها على المستوى العربي والأجنبي
والمنشر ضعيف جداً من الناحية البرمجية والتصميم, ولا يأدي المطلوب منه بشكل كامل
,

# مالمميز في هذا الكود عن غيره؟ #

أهم ميزه, خاصية إظهار المحتوى بعد الضغط على زر المشغل/الحلقة
أي أنه يقوم بعرض فيديو واحد فقط (الذي إخترته من الزر) بدون حتى تحميل باقي المشغلات/الحلقات
وعند الإنتقال إلى [مشغل/حلقة] أخرى يقوم بإلغاء السابق وعرض الحالي فقط
هذه الميزة مهمة جداً
لأنها ستقوم بتسريع تصفح الأفلام في موقعك, لأن زمن التحميل سيكون أقل بكثير وقمت بعمل صفحة بها 1000 حلقة والسرعة بالطبع لم تتأثر نهائياً
وأيضاً ميزة وجود صفحة [ترحيبيه/رئيسية] تظهر عند الدخول للموضوع لأول مره, أو عند تحديث الصفحة فقط
بإمكانك إستغلالها بوضع عرض تشويقي للفيلم مثلاً أو صورة مخصصة, أو حتى إعلان لزيادة أرباحك

الكود:
        <div id="Playerholder" class="embedded-video" style="background: #000;">
            <iframe width="100%" height="400" src="LINK0" frameborder="0" allowfullscreen=""></iframe>
        </div>
        <center><b>w w w . i N 4 s s e r . c o m</b></center>
<div id="player" class="col-xs-12 col-sm-12 col-md-12 wide-player">
    <div id="video-wrapper">
        <div style="margin-bottom: 10px;">
            <a href="javascript:void(0)" class="btn btn-default" data-embed-id="1">مشغل 1</a>
            <a href="javascript:void(0)" class="btn btn-default" data-embed-id="2">مشغل 2</a>
            <a href="javascript:void(0)" class="btn btn-default" data-embed-id="3">مشغل 3</a>
            <a href="javascript:void(0)" class="btn btn-default" data-embed-id="4">مشغل 4</a>
            <a href="javascript:void(0)" class="btn btn-default" data-embed-id="5">مشغل 5</a>
            <a href="javascript:void(0)" class="btn btn-default" data-embed-id="6">مشغل 6</a>
</div>
        <script>
            var embedMe = function(id, jQobj) {
                var iframes = {};
                iframes[1] = '<iframe width="100%" height="400" src="LINK01" frameborder="0" allowfullscreen></iframe>';
                iframes[2] = '<iframe width="100%" height="400" src="LINK02" frameborder="0" allowfullscreen></iframe>';
                iframes[3] = '<iframe width="100%" height="400" src="LINK03" frameborder="0" allowfullscreen></iframe>';
                iframes[4] = '<iframe width="100%" height="400" src="LINK04" frameborder="0" allowfullscreen></iframe>';
                iframes[5] = '<iframe width="100%" height="400" src="LINK05" frameborder="0" allowfullscreen></iframe>';
                iframes[6] = '<iframe width="100%" height="400" src="LINK06" frameborder="0" allowfullscreen></iframe>';
                if (typeof iframes[id] === 'undefined') {
                    return;
                }
                jQobj.removeClass('btn-default');
                jQobj.addClass('btn-default');
                jQuery('#Playerholder').html(iframes[id]);
            }
            jQuery('[data-embed-id]').click(function() {
                if (jQuery(this).hasClass('btn-success')) {
                    return;
                }
                jQuery(this).parent().find('.btn').removeClass('btn-success');
                jQuery(this).parent().find('.btn').addClass('btn-default');
                jQuery(this).addClass('btn-success');
                jQuery(this).removeClass('btn-default');
                var id = jQuery(this).data('embed-id');
                embedMe(id, jQuery(this));
            });
        </script>
    </div>
</div>
<style>
.btn{
  float:right;
  min-width: 103.8px;
  border: 1px solid rgba(154, 154, 154, 0.15) !important;
  border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
  font-family: 'Droid Arabic Kufi', sans-serif;
  list-style-type: none;
  margin-bottom: 1px;
  margin-top: 1px;
  margin-right: 2px;
  margin-left: 2px;
  padding: 5px 0;
  font-size: small;
}
.btn-success{
  background: linear-gradient(#41A7D6, #0C577A) !important;
  border-color:  #0d4f6d !important;
}
.btn:hover{
background-color: #41A7D6 !important;
}
div#Playerholder{
  background: none !important;
}</style>
<link href='https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet' type='text/css'/>
<script src='https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'/>
غير كلمة [ LINK0 ] برابط لأي صفحة تريد عرضها كـ رئيسية للموضوع ( تريلر مثلا)
غير كلمة [ LINK01 - LINK02 - LINK03 - LINK04 - LINK05 - LINK06 ] إلى روابط الفيديو

لمشاهدة مثال حي للكود
# إضغط هنا #