Установка видео на сайт. Ч.2.

Вторник, 07 декабря 2010 года в 23:01      Просмотров: 14478

Установка видео на сайт. Flowplayer.В прошлой заметке я рассказал Вам, как установить видео на сайт при помощи сервиса Yuotube.com.

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

В этом уроке я покажу вам, как установить видео на сайт при помощи флэш плеера.

Плюсы такого размещения видео:

1.    Никакой рекламы в видеоролике. Вы поставили и пользуетесь им.

2.    Никаких ограничений по времени и качеству видеоролика.

3.    Работоспособность видео зависит только от Вас.

Минусы:

1.    Видео занимает на хостинге приличное пространство.

2.    Если у вас большая посещаемость – хостинг может не справиться, и сайт может временно не работать.

Сейчас мы подробно разберем установку видео на вашем сайте.

Сразу хочу, что бы вы уразумели, в интернет любое видео производиться не будет, должен быть формат FLV, SWF или MOV. Это одни из форматов флэш видео, если вы разместите на сайте видео в формате AVI, или в другом формате (не флэш) - оно проигрываться не будет.

Так что перед размещением, вам придется скомпилировать видео в один из форматов.

Теперь непосредственно про само размещение видео на сайте.

Шаг 1. Необходимо скачать сам плеер, его вы можете скачать с этой страницы:

https://flowplayer.org/download/index.html

Нажмите на кнопочку, которую я показал на картинке ниже, скачайте архив к себе на компьютер, и извлеките его содержимое в отдельную папку.

Качаем Flowplayer

Шаг 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

Комментариев: 35 RSS

HTML файл - эта страница которая отображается в интернете или на компьютере.

В общем страники сайтов - например как эта.

Бывают странички, которые формируются на PHP.

В общем, Ромыч smile, советую тебе для начала пройти курс по HTML, он бесплатен - поймешь че это за каша и как ей пользоваться:

Подписка на бесплатный видеокурс

3. Павел555
2011-03-01 в 18:58:21

Как правильно залить файлы в фтп сайта , чтобы потом они проигривались , на компьютере отлично плаэр работает , а вот залил на сайт , прописываю в нужном месте код и не играет , что-то она не хочет вчитывать на сайте халитые файлы в фтп. Хялпп whew

7. Виктор
2011-03-23 в 18:24:39

Перемотка работает только при полностью загруженном файле,а хотелось бы смотреть с любой точки,пока видео ещё полностью не загружено.

8. Виталий
2011-06-29 в 20:42:13

Сергей помогите плиз. не чего понять не могу, что куда добавлять.Сайт стоит на MaxSite CMS, хостинг jino по вашему курсу ставил сайт5минsmileя зеленый в этом деле разъясните подробнее пожалуйста. Заранее СПАСИБО!

Здравствуйте, Сергей. А как сделать, чтобы плеер не запускал видео автоматом?

Всё. Извините, на буржуйском форуме ответ нашёл.

Если кому интересно, то нужно вставить дополнительные строчки сюда:

flowplayer("player", "flowplayer-3.2.2.swf");

И тогда получится так:

flowplayer("player", "flowplayer-3.2.2.swf", { clip: {autoPlay: false, autoBuffering: true}});

А вообще, очень удобный плеер и простой.

Вообще то для бесплатного варианта не предусмотрено отключение авто запуска. wink

Но все равно - большое спасибо за содействие! Тоже буду использовать на своих проектах smile

13. Абдулла
2011-08-19 в 22:43:22

Здраствуйте пожалуйста помогите мне нужна помощь по флоу плееру у меня никак неполучается сделать плейлист на нем перепробовал все до чего смог додуматься если можете поподробнее обьясните кудатчо вставлять

По моему эта возможность есть только в платном варианте плеера, а они этим не сильно светят.

Есть другие плееры, где есть списки.

А кнопку не у нас надо нажмать на картинке smile

А на сайте - ссылка над картинкой smile

17. Аноним
2011-10-23 в 03:25:14

Здравствуйте, а есть у этого плеера возможность проигрывать ссылки из youtube на моем сайте? ну всмысле пользователь добавляет ссылку ролика на youtube допустим в комментарии. а потом эта ссылка начинает проирываться сама этим вот плеером. если этого не умет делать flowplayer, то какой плеер способен на это?

19. Александр
2011-12-07 в 01:54:10

Здравствуйте, Серёга. Подскажите пожалуйста, можно ли поставить два и более плееров на страницу. И как?

Ну да - шаг 3 пункт 2.

Просто вставляете это код снова и меняете путь к файлу.

21. Аноним
2011-12-07 в 11:34:10

Спасибо, что-то он не хочет.

Ладно, разберёмся, если может, значит будет.

Спасибо.

Возможно есть кое какие нюансы при вставке сразу двух и более видео, но я этим не интересовался к сожалению.

А не проще ли использовать ютуб?

И видео разместить можно, и дополнительная реклама твоему сайту, и нагрузки на сервер нет.

23. Кирилл
2011-12-26 в 12:27:22

Здравствуйте Сергей.

Спс за подробную инструкцию. все хорошо все работает.

Только вот. Существует ли возможность проигрывать видео не из инета, а с моего же компа??? мне именно это и нужно.

Нет, если нужно что бы видео из компа проигрывалось в нете.

Для этого надо видело сначала в нет закачать.

https://api.hostinger.ru/redir/51827 бесплатный хостинг без рекламы с поддержкой php короче все как положено.

Помогите please, у меня на компе на flowplayer не проигревается видео. Что делать.

Кирилл - должен работать.

Адам, возможно у тебя флеш-плеер не установлен.

Роман, тоже проверь или стоит плеер для эксплорера.

Плеер установлен, просто надо было открывать через локальный сервер и указать полный путь https://адрес . А так спасибо.

31. Аноним
2012-08-13 в 12:46:36

Добрый день.Установила плеер на сайт, но работает только через SWFObject.Подскажите,пожалуйста,возможно ди при этом сделать несколько роликов на одной странице?

Подскажите пож-та, мне нужно чтобы видео запускалось автомномно без доступа в интернет, как это сделать?

Татьяна, добрый день! smile

Не совсем поняла ваш вопрос -

вы хотите, чтобы видео с сайта запускалось без доступа в интернет,

или просто запускать видео с компьютера?

Или же вы хотите, чтобы ваше видео не было привязано к какому-нибудь видеохостингу и запускалось именно с вашего сайта?

Помогите установить скрипт! Я нифига не понял( Мой скайп filimon0075

35. Роман
2013-11-02 в 15:47:14

Здравствуйте, сделал как вы и говорили. Но в блоке div не отображается видео. Он как бы прозрачен. Воспроизведение происходит лишь по щелчку, после чего открывается другая страничка и видео идет там. Как сделать, чтобы плеер был сразу на страничке?


  • Комментариев: 35

  • Вконтакте

  • Facebook:

  • Disqus

Тест-драйв тренинга Верстаем на 5+ 2.0

Комментариев: 35

  • что такое HTML файл и как его открыть

  • HTML файл - эта страница которая отображается в интернете или на компьютере.

    В общем страники сайтов - например как эта.

    Бывают странички, которые формируются на PHP.

    В общем, Ромыч smile, советую тебе для начала пройти курс по HTML, он бесплатен - поймешь че это за каша и как ей пользоваться:

    Подписка на бесплатный видеокурс

  • Как правильно залить файлы в фтп сайта , чтобы потом они проигривались , на компьютере отлично плаэр работает , а вот залил на сайт , прописываю в нужном месте код и не играет , что-то она не хочет вчитывать на сайте халитые файлы в фтп. Хялпп whew

  • Павел, а какое видео - разрешение имею ввиду.

  • Привет,а как сделать перемотку?

  • Не совсем понял? Перемотка уже встроена!

  • Перемотка работает только при полностью загруженном файле,а хотелось бы смотреть с любой точки,пока видео ещё полностью не загружено.

  •  Виталий | 29 июня 2011 в 20:42:13

    Сергей помогите плиз. не чего понять не могу, что куда добавлять.Сайт стоит на MaxSite CMS, хостинг jino по вашему курсу ставил сайт5минsmileя зеленый в этом деле разъясните подробнее пожалуйста. Заранее СПАСИБО!

  • Виталий, есть форум поддержки - все вопросы помогаем решать там!

    Форум обучению создания сайтов и помощи новичкам!

    Ждем тебя там wink

  • Здравствуйте, Сергей. А как сделать, чтобы плеер не запускал видео автоматом?

  • Всё. Извините, на буржуйском форуме ответ нашёл.

    Если кому интересно, то нужно вставить дополнительные строчки сюда:

    flowplayer("player", "flowplayer-3.2.2.swf");

    И тогда получится так:

    flowplayer("player", "flowplayer-3.2.2.swf", { clip: {autoPlay: false, autoBuffering: true}});

    А вообще, очень удобный плеер и простой.

  • Вообще то для бесплатного варианта не предусмотрено отключение авто запуска. wink

    Но все равно - большое спасибо за содействие! Тоже буду использовать на своих проектах smile

  • Здраствуйте пожалуйста помогите мне нужна помощь по флоу плееру у меня никак неполучается сделать плейлист на нем перепробовал все до чего смог додуматься если можете поподробнее обьясните кудатчо вставлять

  • По моему эта возможность есть только в платном варианте плеера, а они этим не сильно светят.

    Есть другие плееры, где есть списки.

  • Кнопка на архив не активна.Не могу скачать

  • А кнопку не у нас надо нажмать на картинке smile

    А на сайте - ссылка над картинкой smile

  • Здравствуйте, а есть у этого плеера возможность проигрывать ссылки из youtube на моем сайте? ну всмысле пользователь добавляет ссылку ролика на youtube допустим в комментарии. а потом эта ссылка начинает проирываться сама этим вот плеером. если этого не умет делать flowplayer, то какой плеер способен на это?

  •  Александр | 7 декабря 2011 в 01:54:10

    Здравствуйте, Серёга. Подскажите пожалуйста, можно ли поставить два и более плееров на страницу. И как?

    • Ну да - шаг 3 пункт 2.

      Просто вставляете это код снова и меняете путь к файлу.

      • Спасибо, что-то он не хочет.

        Ладно, разберёмся, если может, значит будет.

        Спасибо.

        • Возможно есть кое какие нюансы при вставке сразу двух и более видео, но я этим не интересовался к сожалению.

          А не проще ли использовать ютуб?

          И видео разместить можно, и дополнительная реклама твоему сайту, и нагрузки на сервер нет.

  • Здравствуйте Сергей.

    Спс за подробную инструкцию. все хорошо все работает.

    Только вот. Существует ли возможность проигрывать видео не из инета, а с моего же компа??? мне именно это и нужно.

  • https://api.hostinger.ru/redir/51827 бесплатный хостинг без рекламы с поддержкой php короче все как положено.

  • не работает в Internet Explorer

  • Не могу скачать сам плеер, помогите.

  • Помогите please, у меня на компе на flowplayer не проигревается видео. Что делать.

  • Кирилл - должен работать.

    Адам, возможно у тебя флеш-плеер не установлен.

    Роман, тоже проверь или стоит плеер для эксплорера.

  • Плеер установлен, просто надо было открывать через локальный сервер и указать полный путь https://адрес . А так спасибо.

  • Добрый день.Установила плеер на сайт, но работает только через SWFObject.Подскажите,пожалуйста,возможно ди при этом сделать несколько роликов на одной странице?

  • Подскажите пож-та, мне нужно чтобы видео запускалось автомномно без доступа в интернет, как это сделать?

  • Татьяна, добрый день! smile

    Не совсем поняла ваш вопрос -

    вы хотите, чтобы видео с сайта запускалось без доступа в интернет,

    или просто запускать видео с компьютера?

    Или же вы хотите, чтобы ваше видео не было привязано к какому-нибудь видеохостингу и запускалось именно с вашего сайта?

  • Помогите установить скрипт! Я нифига не понял( Мой скайп filimon0075

  • Здравствуйте, сделал как вы и говорили. Но в блоке div не отображается видео. Он как бы прозрачен. Воспроизведение происходит лишь по щелчку, после чего открывается другая страничка и видео идет там. Как сделать, чтобы плеер был сразу на страничке?

Оставьте комментарий!

Вы можете войти под своим логином или зарегистрироваться на сайте.

A PHP Error was encountered

Severity: Notice

Message: Undefined index: tc_vk_apiid

Filename: blocks/comments-vk.php

Line Number: 15

comments powered by Disqus