Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.02.2019, 13:17
Аспирант
Отправить личное сообщение для egor8 Посмотреть профиль Найти все сообщения от egor8
 
Регистрация: 18.10.2014
Сообщений: 35

Просмотрщик видео с YouTube на JS
Просмотр видео в окне с Ютуба на своем сайте.
Отлично работает код, но мне нужно поправить скрипт, чтоб я мог загружать видео со своего хостинга: sait.ru/video/rolik.mp4
Здесь код скрипта, а ниже всей страницы:
$(document).ready(function() 
{
	youTuber();
  console.log('ddd');
});

function youTuber() 
{
	$("head").append($("<link>").attr({ type: 'text/css', rel: 'stylesheet', href: 'youtuber/youtuber.css' })); // css
	$("body").append($("<div>").attr({ class: 'youTuberBack' })); // bg
	$(".youTuberBack").height($(document).height());

	var i, id, shortLink, bg = $(".youTuberBack"), wh, ww, video, fw, fh, qw, qh, href;

	qw = [3840, 2560, 1920, 1280, 854, 640, 426]; // video sizes
	qh = [2160, 1440, 1080, 720, 480, 360, 240];

	function sizeVideo() // resize video
	{
		ww = $(window).width();
		for (i=0; i < qw.length; i++) 
		{
			if (ww > qw[i])
			{
				$("#youTuber").attr({"width": qw[i], "height": qh[i]});
				$(video).css({"width": qw[i], "height": qh[i]});
				break;
			}
		}		
	}

	function sizeContainer() 
	{
		if ($(video).is(":visible")) 
		{
			wh = $(window).height(); 
			ww = $(window).width(); 
			fw = $(video).width();
			fh = $(video).height();
			$(video).css("left", (ww-fw)/2);
			$(video).css("top", (wh-fh)/2);
			$(bg).css("height", $(document).height());
		}
	}

	function closeContainer()
	{
		$(bg).html("");
		$(bg).fadeOut("fast");		
	}

	$(".youTuber").click(function() // link click
	{
		href = $(this).attr("href"); // get link
		i = href.search(/\/youtu.be/i);

		if (i > 0) // youtu.be
		{
			id = href.match(/(\.be\/)([^&]+)/);
			id = id[2];
		} 
			else // youtube.com
		{
			id = href.match(/(\?|&)v=([^&]+)/);
			id = id[2];
		}

		if (id.length == 0) return false;

		$(bg).fadeIn("fast");
		$(bg).append($("<div />").attr({ id: 'youTuberLoading'}).text("Загрузка"));
		$(bg).append($("<div />").attr({ id: 'youTuberClose'}).html("×"));
		$(bg).append($("<div />").attr({ id: 'youTuberContainer' }));


		$("#youTuberContainer").append($("<iframe />").attr({ src: 'http://youtube.com/embed/'+id, frameborder: 0, id: 'youTuber', "allowfullscreen": "" }));
		video = $("#youTuberContainer");
		sizeVideo();
		$(video).fadeIn("fast");
		sizeContainer();
		return false;
	});

	$(window).resize(function() // resize 
	{
		sizeContainer();
		sizeVideo();
	});

	$(bg).click(function() // bg close
	{ 
		closeContainer();
	});

	$(document).keyup(function(a) // esc btn
	{ 
		if ((a.keyCode == 27) && ($(bg).is(":visible"))) {
			$(bg).click();
		} 
	});
}


Всей страницы код:

<!DOCTYPE html>
<html>
<head>
	<title>Просмотрщик видео с YouTube на JS</title>
    
    <style>
	.wrapper { height:100%}

.youTuberBack {
	color: #fff !important;
	display: none;
	z-index: 1100;
	opacity: 1;
	top: 0;
	left: 0;
	width: 100%;
	position: absolute;
	background: #000;
	text-align: center; 
}
#youTuberContainer {
	display: none;
	z-index: 1102;
	position: fixed;	
}
#youTuber {
	text-align: center;
	box-shadow: 0 0 40px #333;
}
#youTuberLoading {
	position: fixed;
	z-index: 1101;
	font-size: 1.5em;
	top: 49%;
	width: 5%;
	text-align: center;
	left: 45%;
}
#youTuberClose {
	position: fixed;
	right: 15px;
	top: 15px;
	padding: 3px 13px;
	z-index: 1101;
	font-size: 25px !important;
	text-shadow: 0 0 10px #fff;
	border-radius: 3px;
	cursor: pointer;
	-webkit-transition-duration: 0.1s; 
	-o-transition-duration: 0.1s; 
	-moz-transition-duration: 0.1s; 
	transition-duration: 0.1s;
}
#youTuberClose:hover {
	background: #333;
}
    </style>
    
    <script src="http://code.jquery.com/jquery-1.7.2.js"></script>
    
    
	<script>
	$(document).ready(function() 
{
	youTuber();
  console.log('ddd');
});

function youTuber() 
{
	$("head").append($("<link>").attr({ type: 'text/css', rel: 'stylesheet', href: 'youtuber/youtuber.css' })); // css
	$("body").append($("<div>").attr({ class: 'youTuberBack' })); // bg
	$(".youTuberBack").height($(document).height());

	var i, id, shortLink, bg = $(".youTuberBack"), wh, ww, video, fw, fh, qw, qh, href;

	qw = [3840, 2560, 1920, 1280, 854, 640, 426]; // video sizes
	qh = [2160, 1440, 1080, 720, 480, 360, 240];

	function sizeVideo() // resize video
	{
		ww = $(window).width();
		for (i=0; i < qw.length; i++) 
		{
			if (ww > qw[i])
			{
				$("#youTuber").attr({"width": qw[i], "height": qh[i]});
				$(video).css({"width": qw[i], "height": qh[i]});
				break;
			}
		}		
	}

	function sizeContainer() 
	{
		if ($(video).is(":visible")) 
		{
			wh = $(window).height(); 
			ww = $(window).width(); 
			fw = $(video).width();
			fh = $(video).height();
			$(video).css("left", (ww-fw)/2);
			$(video).css("top", (wh-fh)/2);
			$(bg).css("height", $(document).height());
		}
	}

	function closeContainer()
	{
		$(bg).html("");
		$(bg).fadeOut("fast");		
	}

	$(".youTuber").click(function() // link click
	{
		href = $(this).attr("href"); // get link
		i = href.search(/\/youtu.be/i);

		if (i > 0) // youtu.be
		{
			id = href.match(/(\.be\/)([^&]+)/);
			id = id[2];
		} 
			else // youtube.com
		{
			id = href.match(/(\?|&)v=([^&]+)/);
			id = id[2];
		}

		if (id.length == 0) return false;

		$(bg).fadeIn("fast");
		$(bg).append($("<div />").attr({ id: 'youTuberLoading'}).text("Загрузка"));
		$(bg).append($("<div />").attr({ id: 'youTuberClose'}).html("×"));
		$(bg).append($("<div />").attr({ id: 'youTuberContainer' }));


		$("#youTuberContainer").append($("<iframe />").attr({ src: 'http://youtube.com/embed/'+id, frameborder: 0, id: 'youTuber', "allowfullscreen": "" }));
		video = $("#youTuberContainer");
		sizeVideo();
		$(video).fadeIn("fast");
		sizeContainer();
		return false;
	});

	$(window).resize(function() // resize 
	{
		sizeContainer();
		sizeVideo();
	});

	$(bg).click(function() // bg close
	{ 
		closeContainer();
	});

	$(document).keyup(function(a) // esc btn
	{ 
		if ((a.keyCode == 27) && ($(bg).is(":visible"))) {
			$(bg).click();
		} 
	});
}
</script>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div class="wrapper">
	<h1>Скрипт для просмотра видео с YouTube на jQuery</h1>
	<hr>
	<p>Чтобы просмотреть видео, нажмите на картинку.</p>
	<a href="https://youtu.be/GtyR8w6REXE?list=RD3b4cXBtfPh4" class="youTuber">КЛИКАЕМ СЮДА</a>
	<hr>
</div>
</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Видео youtube через приложение light Оффтопик 2 07.08.2018 21:56
BackEnd/FrontEnd Developer (Native JS) Abab Работа 0 25.12.2016 10:56
Загрузка видео через js Alekseyideas Элементы интерфейса 1 15.11.2016 13:48
Видео без <VIDEO> и FLASH DIGIUS Общие вопросы Javascript 1 25.10.2016 03:34
js стиль render для react.js vflash Ваши сайты и скрипты 5 01.04.2016 22:57