Некорректно отображается видео в табах

Екатерина
Екатерина
1.8K
3
Александр, добрый день. Прежде, чем писать вам, я обращалась за помощью к другим людям, но никто не смог мне помочь. Надеюсь, что вы сможете помочь мне разобраться с моей проблемой. У меня на сайте некорректно отображается видео в табах. Если видео размещать само по себе, без табов, то оно будет работать нормально, а вот в табах почему-то не хочет. Сам таб имеет такую конструкцию 
<div class="korpus"><input name="odin" checked="checked" id="vkl1" type="radio"><label for="vkl1">Источник 1</label><input name="odin" id="vkl2" type="radio"><label for="vkl2">Источник 2</label><div>первая вкладка</div><div>вторая вкладка</div></div>
В первый вкладке стоит object видео и оно отображается без проблем. Во вторую вкладку я ставлю видео в виде скрипта, такой конструкции: 
<div id="player"></div><script> var player = new Clappr.Player({source: "http://msk3.peers.tv/streaming/cartoonnetwork/16/tvrec/playlist.m3u8", parentId: "#player"}); </script>
И именно этот видеоплеер из источника 2, не хочет нормально отображаться, он отображается 2 раза, дублируя сам себя (см.скриншот). Причем, верхний плеер из источника 2 вообще не активен, а нижний активен, но когда его включаешь, то нет ни кнопки плей, ни громкости, ни других кнопок. В общем, в этом и проблема, что плеер дублирует сам себя. Полностью конструкция табов на странице имеет такой вид: 
<div class="korpus"><input name="odin" checked="checked" id="vkl1" type="radio"><label for="vkl1">Источник 1</label><input name="odin" id="vkl2" type="radio"><label for="vkl2">Источник 2</label><div><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" id="flashObject" height="390" align="middle" width="640"><param name="allowScriptAccess" value="always"><param name="autostart" value="true"><param name="allowFullScreen" value="true"><param name="movie" value="http://clients.cdnet.tv/flashplayer/player2.swf"><param name="quality" value="hi"><param name="bgcolor" value="#000000"><param name="flashVars" value="userid=35&videoid=3561&videotype=stream&sessid=R1Ft3PE1xSbblhaKPdsst"><embed id="embedObject" src="http://clients.cdnet.tv/flashplayer/player2.swf" flashvars="userid=35&videoid=3561&videotype=stream&sessid=R1Ft3PE1xSbblhaKPdsst" quality="hi" bgcolor="#000000" name="flashObject" allowscriptaccess="always" allowfullscreen="true" autostart="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" height="390" align="middle" width="640"></object></div><div><div id="player"></div><script> var player = new Clappr.Player({ source: 'http://msk3.peers.tv/streaming/cartoonnetwork/16/tvrec/playlist.m3u8', parentId: '#player' }); </script></div></div>
Также, хочу сказать, что плеер, который стоит в источнике 2, был взят с этого сайта _http://clappr.github.io/classes/Player.html и имеет следующую конструкцию: 
<head>
  <script type="text/javascript" src="http://cdn.clappr.io/latest/clappr.min.js"></script>
</head>

<body>
  <div id="player"></div>
  <script>
    var player = new Clappr.Player({source: "http://your.video/here.mp4", parentId: "#player"});
  </script>
</body>
Не знаю, возможно это конфликт скриптов или может еще что-то? Также, укажу вам код самой страницы того модуля, где эти табы размещены. Мало ли, вдруг он вам понадобиться? Там, кстати, и ваш скрипт расположен тоже... 
<html>
<head>
<meta charset="utf-8">
<title>$ENTRY_TITLE$ прямой эфир - $SITE_NAME$</title>
<meta name="description" content="$SOURCE$" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<?$META_DESCRIPTION$?>
<?$META_KEYWORDS$?>
<script type="text/javascript">
 var browser = navigator.userAgent;
 var browserRegex = /(Android|BlackBerry|IEMobile|Nokia|iP(ad|hone|od)|Opera M(obi|ini))/;
 var isMobile = false;
 if(browser.match(browserRegex)) {
 isMobile = true;
 addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
 function hideURLbar(){
 window.scrollTo(0,1);
 }
 }
</script>
<link type="text/css" rel="StyleSheet" href="/_st/my.css" />
<script type="text/javascript">
var navTitle = 'Navigation';
</script>
<script type="text/javascript" src="http://cdn.clappr.io/latest/clappr.min.js"></script> 
</head>

<body class="page-body">
 
$ADMIN_BAR$
$GLOBAL_AHEADER$
<!-- <global_promo> -->
<?if($URI_ID$='page1')?>
<section>
<div class="wrapper">
 <div id="promo">
 <div class="promo-img">
 <div id="uncheader" class="$UHEADER_CLASS$">
 <div id="uCozHeaderMain" style="background:url(/uCozHeader.png) 50% 50% no-repeat;"></div>
 </div>
 </div>
 <div class="promo-caption">
 <div class="promo-i">
 <div class="promo-b">
 <div class="promo-title">
 Lorem ipsum dolor sit amet
 </div>
 <div class="promo-text">
 Suspendisse a elit commodo, iaculis elit volutpat, gravida felis. Curabitur feugiat volutpat neque, et luctus dui dapibus nec.
 </div>
 </div>
 </div>
 </div>
 </div>
</div>
</section>
<?endif?>
<!-- </global_promo> -->
<div id="casing">
 <div class="wrapper">
 <?if($MODULE_ID$='forum')?><div class="forum-box"><?endif?>
 <!-- <middle> -->
 <div id="content">
 <div id="cont-i">
 <!-- <body> --><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="80%"><a href="$HOME_PAGE_LINK$"><!--<s5176>-->Главная<!--</s>--></a> » <a href="$MODULE_URL$"><!--<s5208>-->Онлайн ТВ<!--</s>--></a> <?if($SECTION_NAME$)?>» <a href="$SECTION_URL$">$SECTION_NAME$</a><?endif?> » <a href="$CAT_URL$">$CAT_NAME$</a></td>
<td align="right" style="white-space: nowrap;"><?if($ADD_ENTRY_LINK$)?>[ <a href="$ADD_ENTRY_LINK$"><!--<s5202>-->Добавить статью<!--</s>--></a> ]<?endif?></td>
</tr>
</table>
<hr />
<div class="eTitle" style="padding-bottom:3px;"><?if($MODER_PANEL$)?><div style="float:right">$MODER_PANEL$</div><?endif?><h1>$ENTRY_TITLE$</h1></div>
<table border="0" width="100%" cellspacing="0" cellpadding="2" class="eBlock">
<tr><td class="eText" colspan="2">$MESSAGE$ <br><div class="share42init"></div>
 <script type="text/javascript" src="//banktv.at.ua/share42/share42.js"></script><br><br><span style="font-size: 11pt;">Популярные каналы:</span> $MYINF_2$ </td></tr>
<tr><td class="eDetails1" colspan="2"><?if($RATING$)?><div style="float:right"><?$RSTARS$('16','/.s/t/2012/rating.png','1','float')?></div><?endif?><span class="e-category"><span class="ed-title"><!--<s3179>-->Категория<!--</s>-->:</span> <span class="ed-value"><a href="$CAT_URL$">$CAT_NAME$</a></span></span><span class="ed-sep"> | </span><span class="e-add"><span class="ed-title"><!--<s3178>-->Добавил<!--</s>-->:</span> <span class="ed-value"><a href="$PROFILE_URL$">$USER$</a> </span></span>
<?if($AUTHOR_NAME$)?><span class="ed-sep"> | </span><span class="e-author"><span class="ed-title"><!--<s5173>-->Автор<!--</s>-->:</span> <span class="ed-value"><u>$AUTHOR_NAME$</u><?endif?> <?if($AUTHOR_EMAIL_JS$)?><a href="$AUTHOR_EMAIL_JS$" title="E-mail">E</a><?endif?> <?if($AUTHOR_SITE$)?><a rel="nofollow" href="javascript://" onclick="window.open('$AUTHOR_SITE$');return false;" title="Web-site">W</a><?endif?></span></span>
</td></tr>
<tr><td class="eDetails2" colspan="2"><span class="e-reads"><span class="ed-title"><!--<s3177>-->Просмотров<!--</s>-->:</span> <span class="ed-value">$READS$</span></span> <?if($COMMENTS_NUM$)?><span class="ed-sep"> | </span><span class="e-comments"><span class="ed-title"><!--<s3039>-->Комментарии<!--</s>-->:</span> <span class="ed-value">$COMMENTS_NUM$</span></span><?endif?>
<?if($TAGS$)?><span class="ed-sep"> | </span><span class="e-tags"><span class="ed-title"><!--<s5308>-->Теги<!--</s>-->:</span> <span class="ed-value">$TAGS$</span></span><?endif?>
<?if($RATING$)?><span class="ed-sep"> | </span><span class="e-rating"><span class="ed-title"><!--<s3119>-->Рейтинг<!--</s>-->:</span> <span class="ed-value"><span id="entRating$ID$">$RATING$</span>/<span id="entRated$ID$">$RATED$</span></span></span><?endif?></td></tr>
</table>

<?if($COM_IS_ACTIVE$)?>
<?if($COM_CAN_READ$)?>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td width="60%" height="25"><!--<s5183>-->Всего комментариев<!--</s>-->: <b>$COM_NUM_ENTRIES$</b></td><td align="right" height="25">$COM_PAGE_SELECTOR$</td></tr>
<tr><td colspan="2">$COM_BODY$</td></tr>
<tr><td colspan="2" align="center">$COM_PAGE_SELECTOR1$</td></tr>
<tr><td colspan="2" height="10"></td></tr>
</table>
<?endif?>

<?if($COM_CAN_ADD$)?>
$COM_ADD_FORM$
<?else?>
<?if($USER_LOGGED_IN$)?><?else?><div align="center" class="commReg"><!--<s5237>-->Добавлять комментарии могут только зарегистрированные пользователи.<!--</s>--><br />[ <a href="$REGISTER_LINK$"><!--<s3089>-->Регистрация<!--</s>--></a> | <a href="$LOGIN_LINK$"><!--<s3087>-->Вход<!--</s>--></a> ]</div><?endif?>
<?endif?>
<?endif?><!-- </body> -->
 </div>
 </div>
 <aside>
 <div id="sidebar"> 
 <div class="sidebox">
 <div class="inner">
 <div style="text-align:center;"><?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?><span><!--<s5212>-->Приветствую Вас<!--</s>-->, <a href="$PERSONAL_PAGE_LINK$"><b>$USERNAME$</b></a>!</span><?else?><span><!--<s5212>-->Приветствую Вас<!--</s>-->, <b>$USERNAME$</b>!</span><?endif?><br><?endif?>
 <?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?><a title="Мой профиль" href="$PERSONAL_PAGE_LINK$"><!--<s5214>-->Мой профиль<!--</s>--></a> | <a title="Выход" href="$LOGOUT_LINK$"><!--<s5164>-->Выход<!--</s>--></a><?else?><a title="Регистрация" href="$REGISTER_LINK$"><!--<s3089>-->Регистрация<!--</s>--></a> | <a title="Вход" href="$LOGIN_LINK$"><!--<s3087>-->Вход<!--</s>--></a><?endif?><?endif?></div>
 </div>
 <div class="clr"></div>
 </div>
 $GLOBAL_CLEFTER$
 </div>
 </aside>
 <!-- </middle> -->
 <div class="clr"></div>
 <?if($MODULE_ID$='forum')?></div><?endif?>
 </div>
</div>
$GLOBAL_BFOOTER$
<script type="text/javascript" src="/.s/t/2012/template.min.js"></script>
 
<div style="display:none">

</div>
<script>
$(function(){
 //получить табы (div-ы)
 tabs = $('.korpus > div');
 //получить label-ы
 labels = $('.korpus > input + label');
 //создать массив для хранения содержимого табов (div-ов)
 contentTabs = new Array(tabs.length);
 //наполнить массив данными
 for (var i=0; i<tabs.length; i++) {
 contentTabs[i] = tabs.eq(i).html();
 tabs.eq(i).attr('data-index',i);
 labels.eq(i).attr('data-index',i);
 }
 //удалить содержимое у всех табов кроме активного
 tabs.filter(':hidden').html('');
 //подписаться активный Tab (div)
 var currentTab = tabs.filter(':visible').attr('data-index');
 //при переключении tab
 $('label').click(function() {
 var activeTab = $(this).attr('data-index');
 if (currentTab != activeTab) {
 tabs.eq(currentTab).html('');
 tabs.eq(activeTab).html(contentTabs[activeTab]);
 currentTab = activeTab;
 }
 });
});
</script> 
</body>
</html>
Изображения:

Комментарии: 3

Александр Мальцев
Александр Мальцев
02.05.2016, 12:49
Для активизации плейера необходимо добавить:
//при переключении tab
$('label').click(function() {
  var activeTab = $(this).attr('data-index');
  if (currentTab != activeTab) {
  tabs.eq(currentTab).html('');
  tabs.eq(activeTab).html(contentTabs[activeTab]);
  
  if ($('#player').length>0) {
    var player = new Clappr.Player({ source: 'http://your.video/here.mp4', parentId: '#player' });
  }

  currentTab = activeTab;
 }
Аноним
Аноним
03.05.2016, 09:28
Александр, в какое место это нужно добавлять? В ваш скрипт дописать или отдельным скриптом добавить?
Александр Мальцев
Александр Мальцев
02.05.2016, 03:04
Во вкладке оставляйте только:
<div id="player"></div>
Скрипт размещайте за пределами вкладок:
<script> var player = new Clappr.Player({source: "http://msk3.peers.tv/streaming/cartoonnetwork/16/tvrec/playlist.m3u8", parentId: "#player"}); </script>