Jump to content

Новая вкладка на главной странице


Recommended Posts

подскажите можно ли сделать так чтобы на главной странице выводился блок  с видеороликами к примеру 6 штук.. с ютуба.. уроки обучающие

 

 

Clip2net_200420100930.png

Link to post
Share on other sites
4 часа назад, alexrvs сказал:

по поводу видео я вставил ролики и все а вот еслибы с определеного канала они сами забирались в зависимости  от обновления

сейчас проще написать на js обычный блок с выводом контента с канала с оформлением под родной шаблон IPS
Делал когда-то для себя))Думаю интернет вам поскажет как переделать под новый апи твича)будет две вкладки с трансляциями твич и ютуб. Вверху всегда выводятся онлайн трансляции

Спойлер

<div class="ipsTabs ipsTabs_small ipsTabs_stretch ipsClearfix" id="blocksTab_01" data-ipstabbar="" data-ipstabbar-contentarea="#blocksTab_01_content">
   <a href='#blocksTab_01' data-action='expandTabs'><i class='icon-caret-down'></i></a>
   <ul role='tablist'>
      <li role='presentation'>
         <a href="#ipsTabs_1" role='tab' id='blocksTab_01_forums' class='ipsTabs_item ipsType_center' aria-selected="true"><i class="fa fa-youtube-play" aria-hidden="true"></i> YouTube</a>
      </li>
      <li role='presentation'>
         <a href="#ipsTabs_2" id='blocksTab_01_orion' role='tab' class='ipsTabs_item ipsType_center'><i class="fa fa-twitch" aria-hidden="true"></i> Twitch</a>
      </li>
   </ul>
</div>
<!-- The tab panel wrapper -->
<div id="blocksTab_01_content" class="ipsTabs_panels">
   <!-- The tab 1 -->
   <div id="ipsTabs_blocksTab_01_blocksTab_01_forums_panel" class="ipsTabs_panel" style="" aria-hidden="" animating="false">
      <div class="ipsWidget_inner">
         <div class="ipsPad_half" id="scroll_streams">
            <ul class="ipsDataList ipsDataList_reducedSpacing" id="results">	</ul>
         </div>
      </div>
   </div>
   <!-- The tab 2 -->
   <div id="ipsTabs_blocksTab_01_blocksTab_01_orion_panel" class="ipsTabs_panel" style="" aria-hidden="" animating="false">
      <div class="ipsWidget_inner">
         <div class="ipsPad_half"  id="scroll_streams">
            <ul class="ipsDataList ipsDataList_reducedSpacing" id="results2">	</ul>
         </div>
      </div>
   </div>
</div>
<!-- The tab panel wrapper -->

<script type="text/javascript">
$(document).ready(function () {
	var vidWidth = 300;
	var vidHeight = 70;
	//var _total = 30;
	//var vidCategoryId = 20;
	//var rCode = 'RU';
	//var eType = 'live';
	//var stat = '';
	//var searchText = $('#encodedStr').val(); 
	//https://www.googleapis.com/youtube/v3/channels?id=..', {}, event); 
	//var searchText = 'tarkov';
	$.get(
		"https://api.twitch.tv/kraken/search/streams?query=tarkov&client_id=ТУТвашключ=30", {
			//part: 'channels',
			//eventType: eType,
			//type: 'video',
			//videoCategoryId: vidCategoryId,
			//regionCode: rCode,
			//maxResults: _total,
			//query: searchText,
			//client_id: 'v8yf737iu36zk4ftw9te7w7cu9o11i'
		},

		function (data) {
			var output;
			$.each(data.streams, function (i, item) {
				display_name = item.channel.display_name;
                viewers = item.viewers;
              	name = item.channel.name;
				status = item.channel.status;
				medium = item.preview.medium;
				output = '<li class="stream_num2 ipsDataItem"><div class="ipsDataItem_icon ipsPos_top"><a href="https://player.twitch.tv/?channel='+name+'"><div class="ipsThumb ipsThumb_tiny ipsThumb_bg" style="background-image: url('+medium+');"></div></a></div><div class="ipsDataItem_main"><div class="ipsCommentCount ipsPos_right ipsFaded" data-ipstooltip="" _title="Смотрят трасляцию">'+viewers+'</div><a href="https://player.twitch.tv/?channel='+name+'"><strong class="ipsOnlineStatus ipsOnlineStatus_online"><i class="fa fa-circle"></i></strong> '+display_name+'</a><br><span class="ipsType_light ipsType_small shortened">'+status+'</span></div>';
              	$('#results2').append(output);
				//statYs = stater(name); 
			});
		});

});
</script>

<script type="text/javascript">
$(document).ready(function () {
	var vidWidth = 300;
	var vidHeight = 70;
	var vidResults = 30;
	var vidCategoryId = 20;
	var rCode = 'RU';
	var eType = 'live';
	var stat = '';
	//var searchText = $('#encodedStr').val(); 
	//https://www.googleapis.com/youtube/v3/channels?id=..', {}, event); 
	var searchText = 'tarkov';
	$.get(
		"https://www.googleapis.com/youtube/v3/search", {
			part: 'id,snippet',
			eventType: eType,
			type: 'video',
			videoCategoryId: vidCategoryId,
			regionCode: rCode,
			maxResults: vidResults,
			q: searchText,
			key: 'ТУТвашключ'
		},

		function (data) {
			var output;
			$.each(data.items, function (i, item) {
				channelTitle = item.snippet.channelTitle;
              	videTitle = item.snippet.title;
				videoId = item.id.videoId;
				url = item.snippet.thumbnails.high.url;
				//output = '<iframe frameborder="0" height="' + vidHeight + '" width="' + vidWidth + '" src=\"//www.youtube.com/embed/' + videoId + '\"></iframe><p style=\"width:420px;\">' + videTitle + '</p><p name="' + videoId + '"id="' + videoId + '"></p>';
				output = '<li class="stream_num2 ipsDataItem"><div class="ipsDataItem_icon ipsPos_top"><a href="https://www.youtube.com/embed/'+videoId+'"><div class="ipsThumb ipsThumb_tiny ipsThumb_bg" style="background-image: url('+url+');"></div></a></div><div class="ipsDataItem_main"><div class="ipsCommentCount ipsPos_right ipsFaded" data-ipstooltip="" _title="Смотрят трасляцию" name="' + videoId + '"id="' + videoId + '"></div><a href="https://www.youtube.com/embed/'+videoId+'"><strong class="ipsOnlineStatus ipsOnlineStatus_online"><i class="fa fa-circle"></i></strong> '+channelTitle+'</a><br><span class="ipsType_light ipsType_small shortened">' + videTitle + '</span></div>';
              	//Append to results listStyleType 
				$('#results').append(output);
				statYs = stater(videoId);
				//console.log('priemnik '+statYs) 
			});
		});

	function stater(viId) {
		$.get(
			"https://www.googleapis.com/youtube/v3/videos", {
				part: 'statistics,snippet',
				id: viId,
				key: "ТУТвашключ"
			},
			function (data) {

				$.each(data.items, function (i, item) {
					stat = + item.statistics.viewCount;
					//console.log('peredatchik ' + stat);
					$('div#' + viId + '').html(stat);
					//$('#results').append(stat); 
					//$('#results').append(stat); 
				});

			});
		// 
		//return stat; 
	}

});
</script>
<style>
#scroll_streams {
height:310px;
overflow-y:scroll;
}
.shortened {
display: inline-block;
max-width: 175px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: top;
</style>
<style>
.ON_stream {
  box-shadow: 0 0 25px #1A0B3C, 0px 0px 0px rgb(0, 0, 0);
  margin: 8px;
}
.ON_status{
  font-family: Helvetica Neue,Helvetica,sans-serif;
}
.ON_tIcon{
  padding: 0 10px 0 0;
  font-size: 20px;
}
.ON_user{
font-size: 16px;
font-weight: 600;
}
.ON_Online {
padding: 1px 5px;
font-size: 12px;
font-weight: 600;
text-transform: none;
box-shadow: 0px 2px 10px rgba(0,0,0,.3), inset 0 1px 0px rgba(255,255,255,.2);
background: rgba(24, 255, 107, 0.5);
} 
  
</style>

 

 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Ваша ссылка была автоматически строена.   Отображать как обычную ссылку

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...