• 601
  • 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


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




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

Можешь почитать и вот эту статейку "Падающий снег на сайт на css и js"

mistakes

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

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

Ваше мнение

Ваше отношение к TWIG
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element