3978
- 0
- Адаптировал: irbees2008
- Уровень сложности исполнения: нужны навыки css html
И так , продолжаем тему плейлистов для видео. Вариантов очень много и все по разному применяются. Перерывая кучу материала на эту тему нашел довольно интересный вариант. Там есть возможность добавлять видео сразу в плейлист.
Итак приступим
Идём на сайт jwplayer.com, регистрируемся, и заходим в личный кабинет.
Находим Players жмём и переходим
Жмем кнопку CREATE A PLAYER
Настраиваем плеер как нам нужно и сохраняем
И получаем ссылку на скрипт который на нужен
Вот моя ссылка на скрипт
https://cdn.jwplayer.com/libraries/L01LAQIH.js
Ну с сервисом на этом все.Дальше подключение плеера.
В секцию <head> подключаем скрипт и стиили;
Код:
<script src="https://cdn.jwplayer.com/libraries/L01LAQIH.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 -->
Теперь сам плейлист, в моём примере это 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>
Вот пример:
А вот теперь и сама плюшка,будем ускорять создание плейлиста.
Создаём 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
Вот пример собранного плейлиста :
Вот вроде и все.
Можешь почитать и вот эту статейку "Хак- Применение внешних файлов в main.tpl "
Это тоже интересно
27.04.17Выводим Все новости
30.04.21Плюшки для FontAwesome
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.