Установка видео на сайт. Ч.2.
В прошлой заметке я рассказал Вам, как установить видео на сайт при помощи сервиса Yuotube.com.
Хочу заметить, что этот сервис не один такой в интернете, их много, поэтому вы можете использовать разные сервисы. Возможно, некоторые покажутся вам лучше.
В этом уроке я покажу вам, как установить видео на сайт при помощи флэш плеера.
Плюсы такого размещения видео:
1. Никакой рекламы в видеоролике. Вы поставили и пользуетесь им.
2. Никаких ограничений по времени и качеству видеоролика.
3. Работоспособность видео зависит только от Вас.
Минусы:
1. Видео занимает на хостинге приличное пространство.
2. Если у вас большая посещаемость – хостинг может не справиться, и сайт может временно не работать.
Сейчас мы подробно разберем установку видео на вашем сайте.
Сразу хочу, что бы вы уразумели, в интернет любое видео производиться не будет, должен быть формат FLV, SWF или MOV. Это одни из форматов флэш видео, если вы разместите на сайте видео в формате AVI, или в другом формате (не флэш) - оно проигрываться не будет.
Так что перед размещением, вам придется скомпилировать видео в один из форматов.
Теперь непосредственно про само размещение видео на сайте.
Шаг 1. Необходимо скачать сам плеер, его вы можете скачать с этой страницы:
https://flowplayer.org/download/index.html
Нажмите на кнопочку, которую я показал на картинке ниже, скачайте архив к себе на компьютер, и извлеките его содержимое в отдельную папку.
Шаг 2. Распаковываем скаченный архив, и от туда копируем три файла: flowplayer-3.2.4.min.js, flowplayer.controls-3.2.3.swf и flowplayer-3.2.5.swf в отдельную папочку на хостинге. (если вы хотите поэкспериментировать у себя на компьютере, тогда сохраните папку рядом с HTML файлом, в котором вы хотите подключить видео)
PS: Обратите внимание, что имена файлов, которые я привел, могут немножко отличаться циферками, от тех, которые вы скачаете (возможно, к этому моменту появится более свежая версия Flowplayer).
Шаг 3. Теперь, когда вы уже скопировали файлы плеера в отдельную папочку, открываем HTML файл для вставки видео и туда копируем следующие строчки кода:
1. Эту строчку вам необходимо вставить между тегами <head>.и.</head>
<head>.....
<script type="text/javascript" src="sys/flowplayer-3.2.4.min.js"></script>
...</head>
Зеленым помечен путь к файлу flowplayer-3.2.4.min.js. Сначала указываем папку, а затем, через слэш, указываем точное имя файла.
2. А вот этот код вам необходимо вставить в том месте, где должно проигрываться видео:
<a href="https://expert-css.com/market/css-m/sys/video.flv"
style="display:block;width:640px;height:480px"
id="player">
</a>
<script>
flowplayer("player", "sys/flowplayer-3.2.5.swf");
</script>
Зеленым мы указываем полный путь к видео файлу, который хранится в интернете.
Синим мы указываем размеры отображаемого видео. width - ширина, height - высота.
Красным мы указываем путь к фалу flowplayer-3.2.5.swf.
PS: файлы flowplayer-3.2.5.swf и flowplayer.controls-3.2.3.swf обязательно должны находиться в одной папке, лучше всего в одну папку помещайте сразу три файла.
PSS: соблюдайте пропорции видео, иначе оно может выглядеть растянутым, что, естественно, не очень красиво.
Шаг 4. Сохраняете и заливаете на хостинг (либо можете запустить прямо у себя на компьютере).
Если нет под рукой видео файла в интернете и HTML файла, можете его создать прямо сейчас. А видео взять из моего продажного ролика.
Ниже код страницы, которая у меня получилась. Откройте PSPad редактор и создайте файл. Там я только вставил видео и больше ничего:
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="sys/flowplayer-3.2.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Как создать сайт самому?</title>
</head>
<body>
<a href="https://expert-css.com/market/css-m/sys/video.flv"
style="display:block;width:640px;height:480px"
id="player">
</a>
<script>
flowplayer("player", "sys/flowplayer-3.2.5.swf");
</script>
</body>
</html>
Как видите, нет ничего сложного в вставке видео на страничку сайта.
Да, и еще, если вы решите поэкспериментировать у себя на компьютере, видео может не работать, что бы можно было просмотреть видеоролик, указывайте путь к тому видео, которое находится в интернете, как пимер можете взять мое видео.
Путь: https://expert-css.com/market/css-m/sys/video.flv
2011-02-27 в 18:14:07
что такое HTML файл и как его открыть
2011-02-28 в 09:48:10
HTML файл - эта страница которая отображается в интернете или на компьютере.
В общем страники сайтов - например как эта.
Бывают странички, которые формируются на PHP.
В общем, Ромыч , советую тебе для начала пройти курс по HTML, он бесплатен - поймешь че это за каша и как ей пользоваться:
Подписка на бесплатный видеокурс
2011-03-01 в 18:58:21
Как правильно залить файлы в фтп сайта , чтобы потом они проигривались , на компьютере отлично плаэр работает , а вот залил на сайт , прописываю в нужном месте код и не играет , что-то она не хочет вчитывать на сайте халитые файлы в фтп. Хялпп
2011-03-02 в 08:09:57
Павел, а какое видео - разрешение имею ввиду.
2011-03-19 в 01:05:13
Привет,а как сделать перемотку?
2011-03-22 в 23:28:52
Не совсем понял? Перемотка уже встроена!
2011-03-23 в 18:24:39
Перемотка работает только при полностью загруженном файле,а хотелось бы смотреть с любой точки,пока видео ещё полностью не загружено.
2011-06-29 в 20:42:13
Сергей помогите плиз. не чего понять не могу, что куда добавлять.Сайт стоит на MaxSite CMS, хостинг jino по вашему курсу ставил сайт5миня зеленый в этом деле разъясните подробнее пожалуйста. Заранее СПАСИБО!
2011-07-05 в 12:47:39
Виталий, есть форум поддержки - все вопросы помогаем решать там!
Форум обучению создания сайтов и помощи новичкам!
Ждем тебя там
2011-07-16 в 00:34:27
Здравствуйте, Сергей. А как сделать, чтобы плеер не запускал видео автоматом?
2011-07-16 в 00:48:36
Всё. Извините, на буржуйском форуме ответ нашёл.
Если кому интересно, то нужно вставить дополнительные строчки сюда:
flowplayer("player", "flowplayer-3.2.2.swf");
И тогда получится так:
flowplayer("player", "flowplayer-3.2.2.swf", { clip: {autoPlay: false, autoBuffering: true}});
А вообще, очень удобный плеер и простой.
2011-07-16 в 09:18:55
Вообще то для бесплатного варианта не предусмотрено отключение авто запуска.
Но все равно - большое спасибо за содействие! Тоже буду использовать на своих проектах
2011-08-19 в 22:43:22
Здраствуйте пожалуйста помогите мне нужна помощь по флоу плееру у меня никак неполучается сделать плейлист на нем перепробовал все до чего смог додуматься если можете поподробнее обьясните кудатчо вставлять
2011-08-20 в 00:22:21
По моему эта возможность есть только в платном варианте плеера, а они этим не сильно светят.
Есть другие плееры, где есть списки.
2011-09-27 в 15:10:32
Кнопка на архив не активна.Не могу скачать
2011-09-27 в 15:14:51
А кнопку не у нас надо нажмать на картинке
А на сайте - ссылка над картинкой
2011-10-23 в 03:25:14
Здравствуйте, а есть у этого плеера возможность проигрывать ссылки из youtube на моем сайте? ну всмысле пользователь добавляет ссылку ролика на youtube допустим в комментарии. а потом эта ссылка начинает проирываться сама этим вот плеером. если этого не умет делать flowplayer, то какой плеер способен на это?
2011-10-23 в 09:57:39
нет, и врятли такое вообще где то есть.
2011-12-07 в 01:54:10
Здравствуйте, Серёга. Подскажите пожалуйста, можно ли поставить два и более плееров на страницу. И как?
2011-12-07 в 10:12:03
Ну да - шаг 3 пункт 2.
Просто вставляете это код снова и меняете путь к файлу.
2011-12-07 в 11:34:10
Спасибо, что-то он не хочет.
Ладно, разберёмся, если может, значит будет.
Спасибо.
2011-12-07 в 13:07:21
Возможно есть кое какие нюансы при вставке сразу двух и более видео, но я этим не интересовался к сожалению.
А не проще ли использовать ютуб?
И видео разместить можно, и дополнительная реклама твоему сайту, и нагрузки на сервер нет.
2011-12-26 в 12:27:22
Здравствуйте Сергей.
Спс за подробную инструкцию. все хорошо все работает.
Только вот. Существует ли возможность проигрывать видео не из инета, а с моего же компа??? мне именно это и нужно.
2011-12-26 в 13:01:05
Нет, если нужно что бы видео из компа проигрывалось в нете.
Для этого надо видело сначала в нет закачать.
2012-01-15 в 04:06:25
https://api.hostinger.ru/redir/51827 бесплатный хостинг без рекламы с поддержкой php короче все как положено.
2012-02-14 в 01:36:36
не работает в Internet Explorer
2012-05-19 в 18:27:11
Не могу скачать сам плеер, помогите.
2012-07-24 в 12:47:25
Помогите please, у меня на компе на flowplayer не проигревается видео. Что делать.
2012-07-25 в 01:01:40
Кирилл - должен работать.
Адам, возможно у тебя флеш-плеер не установлен.
Роман, тоже проверь или стоит плеер для эксплорера.
2012-07-27 в 00:50:49
Плеер установлен, просто надо было открывать через локальный сервер и указать полный путь https://адрес . А так спасибо.
2012-08-13 в 12:46:36
Добрый день.Установила плеер на сайт, но работает только через SWFObject.Подскажите,пожалуйста,возможно ди при этом сделать несколько роликов на одной странице?
2013-10-08 в 16:11:18
Подскажите пож-та, мне нужно чтобы видео запускалось автомномно без доступа в интернет, как это сделать?
2013-10-10 в 02:34:58
Татьяна, добрый день!
Не совсем поняла ваш вопрос -
вы хотите, чтобы видео с сайта запускалось без доступа в интернет,
или просто запускать видео с компьютера?
Или же вы хотите, чтобы ваше видео не было привязано к какому-нибудь видеохостингу и запускалось именно с вашего сайта?
2013-10-24 в 20:19:10
Помогите установить скрипт! Я нифига не понял( Мой скайп filimon0075
2013-11-02 в 15:47:14
Здравствуйте, сделал как вы и говорили. Но в блоке div не отображается видео. Он как бы прозрачен. Воспроизведение происходит лишь по щелчку, после чего открывается другая страничка и видео идет там. Как сделать, чтобы плеер был сразу на страничке?