• 166
  • 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: нужны навыки css html

И так , продолжаем тему плейлистов для видео. Вариантов очень много и все по разному применяются. Перерывая кучу материала на эту тему нашел довольно интересный вариант. Там есть возможность добавлять видео сразу в плейлист.

Итак приступим
Идём на сайт jwplayer.com, регистрируемся, и заходим в личный кабинет.
screenshot_78.png

Находим Players жмём и переходим
screenshot_79.png

Жмем кнопку CREATE A PLAYER
screenshot_80.png

Настраиваем плеер как нам нужно и сохраняем
screenshot_81.png

И получаем ссылку на скрипт который на нужен
screenshot_82.png

Вот моя ссылка на скрипт
https://content.jwplatform.com/libraries/mHfKKUQx.js

Ну с сервисом на этом все.Дальше подключение плеера.
В секцию <head> подключаем скрипт и стиили;

Код:
<script src="https://content.jwplatform.com/libraries/mHfKKUQx.js"></script>
<style>
#player_jwplayer_playlistcomponent .jwlist li.active .jwtitle {
color: #0F0 !important;
}
#player_logo{width:1px;height:1px;}
#player_jwplayer_playlistcomponent .jwlist li {
height: 16px !important;
}
li div.jwplaylistimg.jwfill{
width:1px !important;height:1px !important;
}
#player_jwplayer_playlistcomponent .jwtitle {
margin-top: 0px !important;
}
</style>

Там где надо выводить плеер добавляем :
Код:
<!-- player youtube -->
<div id="player"></div>
<script type="text/javascript">
jwplayer("player").setup({
playlist: "http://Ваш_сайт.рф/папка_плейлиста/play.xml",
width: 1040,
height: 440,
listbar: {
position: 'right',
size: 360
}
});
</script>
<!-- player youtube end -->
В скрипте http://Ваш_сайт.рф/папка_плейлиста/play.xml заменить на свой путь до плейлиста.

Теперь сам плейлист, в моём примере это play.xml, и вот его содержимое.
Код:
<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/">
<channel>
<item>
<title>Верстка макета из PSD От профи</title>
<media:content url="https://www.youtube.com/watch?v=uS99nER1PwY" />
</item>
<item>
<title>Учим CSS за 1 час!</title>
<media:content url="https://www.youtube.com/watch?v=Kz50zP-J70Q" />
</item>
<item>
<title>Учим HTML за 1 Час!</title>
<media:content url="https://www.youtube.com/watch?v=5pBcKKiZSGE" />
</item>
</channel>
</rss>
url это адрес клипа на youtube.com

Вот пример:





А вот теперь и сама плюшка,будем ускорять создание плейлиста.
Создаём php файл (playlist-maker.php) в корне сайта с вот таким содержимым
Код:
<!DOCTYPE html>
<html>
<head>
<title>playlist</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<p>playlist</p>
<?php
if(isset($_REQUEST['title']))$title=$_REQUEST['title'];
if(isset($_REQUEST['youtube']))$youtube=$_REQUEST['youtube'];
$title=preg_replace("' - YouTube'si","",$title);
$title=preg_replace("'► 'si","",$title);
print '
title=' .$title .'

';
print '
youtube=' .$youtube .'
';
$rez='<item>
<title>' .$title .'</title>
<media:content url="http://www.youtube.com/watch?v=' .$youtube .'" />
</item>
';
file_put_contents('playlist.php', $rez, FILE_APPEND | LOCK_EX);
$xml = file_get_contents('playlist.php');
$top = '<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/">
<channel>
';
$bot = '</channel>
</rss>';
$xml = $top .$xml .$bot;
file_put_contents('playlist.xml', $xml);
?>
</body>
</html>

Далее в браузере создаёте закладку и в поле "Адрес" добавляете:
Код:
javascript:window.location='http://Ваш_сайт.рф/playlist-maker.php?title='+document.title+'&youtube='+window.location.search.replace("?v=","");
в которой
http://Ваш_сайт.рф/playlist-maker.php это адрес файла playlist-maker.php который мы создали, ну или перетащите вот эту кнопку Добавление в плейлист в панель закладок и потом отредактируйте в ней адрес на на файл http://Ваш_сайт.рф/playlist-maker.php

Ну теперь идём на сайт www.youtube.com, находим там нужный
клип и нажимаете на на созданную закладку в панели закладок.

Мы переходим на http://Ваш_сайт.рф/playlist-maker.php, и при этом
в файл плейлиста playlist.xml добавится выбранный клип.
Ворачиваемся обратно на youtube.com , находим там следующий клип
и снова нажимаем на ссылку в панели закладок и т.д. Файл плейлиста сохранится по адресу http://Ваш_сайт.рф/playlist.xml

play2.gif


Вот пример собранного плейлиста :




Вот вроде и все.

Можешь почитать и вот эту статейку "Фиксированный, плавающий блок "

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Вы нашли что искали?
Результаты

----