Как вставить видео на сайт

Согласитесь, куда приятнее читать публикации, украшенные яркими картинками и сопровождающиеся соответствующим тематическим видео, чем однообразный текст. И, если со вставкой картонок мало-мальски разбирается каждый копирайтер – скопировал, вставил, подписал. То, вот как разобраться со вставкой видео? Тем более, что заказчик на вас наседает, и требует, чтобы это было в обязательном порядке. Но, не спешите отказываться от такого заказа, просто… узнайте о том, как это делает ВМзона, и тогда вставка видео-ролика на страницы сайтов или блогов перестанет быть для вас головной болью.

Как вставить видео на сайт

И, хотя вам кажется, что вы задали достаточно серьёзный вопрос, относительно процесса вставки видео-роликов на сайт, и должны услышать на него единственно верный и правильный ответ, не спешите. На самом деле, ответов на него ни один, а несколько, и все они правильные. Поэтому, вы можете выбрать любой понравившийся вам способ. Правда, для начала вам придётся как минимум, попробовать каждый из этих вариантов. А там, какая теория превратится в удобную практику – решаете только вы. Забегая наперёд, хочется сказать – видео вставляется каждым из этих способов, и работает без перебоев…

Способ №1 –вставка видео с Ютюб

Не секрет, что развитие Интернета – с каждым днем всё интенсивнее, и виртуальные пространства пленяют всё больше пользователей из реального пространства. Причём, последние уже не просто хотят читать тексты и публикации, но и требуют лицезрения графических элементов, интерактивных примочек и, конечно же, видео на самих страницах сайтов. Такие «навороты» делают пребывание пользователя на сайте более приятным, а вот работу копирайтера, на плечи которого часто как раз и ложится такая вставка видео, немного усложняют. Хотя, если разобраться, понять и отработать алгоритм действий до автоматизма – ничего сложного в этом нет. Уникальный контент создаёте? Так, неужели видео не вставите….

Итак, для начала у нас с вами есть текст, в который необходимо вставить видео-ролик. Благо с последним в Интернет пространстве проблем нет. И, огромное количество таких роликов храниться на Youtube, причём ролики там различной тематики. Искать их очень просто – ввел в поисковую строку запрос, система выдала вам список результатов, с указанием автора ролика, названия, количеством просмотров. Из всего этого видео-материала вам необходимо выбрать тот ролик, который более всего соответствует смыслу вашей публикации. Выбрали? Если вы ничего не нашли (бывает и такое), но у вас есть свой ролик, для того, чтобы вставить его на сайт, вам необходимо для начала загрузить его на Youtube. Без этого никак. Дальнейший алгоритм действий загрузки с Youtube вашего ролика или родного ю-тюбовского – аналогичный.

Итак, для входа на Youtube вам нужен ваш аккаунт Гугл. Если такового нет – регистрируйтесь, в любом случае, пригодиться. Не зарегистрированных пользователей система не принимает и видео от них не добавляет. Так что сохранить анонимность не удастся. Итак, вы всё-таки вошли в сервис, теперь ищите кнопку «Добавить видео». Нажав на эту кнопку, вы получаете вопрос о выборе файла для загрузки. Этим файлом и будет ваше видео, которое находится на вашем компьютере. Кстати, файлы можно загружать, а можно перетаскивать мышью – кому как удобнее. Однако, в любом случае, полная загрузка файла, независимо от способа, занимает определённое время. Так что не паникуйте, если всё происходит не сразу и не так быстро, как вы хотели.

После загрузки видео, вам необходимо заполнить соответствующие поля под ним – указать название, составить краткое описание, указать тэги. Обязательно ли это делать? В принципе, да. Так, ваше видео становится более понятным. Теперь сохраняйте весь материал. У вас на экране появится ссылка с адресом вашего ролика. Если по ней пройти, то можно сразу попасть на страницу, на которой он размещён. Не устали? Тогда, продолжаем дальше. Для того, чтобы вставить это видео на нашу веб-страницу, нам нужен его код. Для того, чтобы его узнать, просто щёлкайте по вкладке «Поделиться» и по вкладке «HTML-код». Таким образом, вы узнаете код для вставки. Кстати, здесь можно увидеть и полезные параметры самого видео – его режим конфиденциальности, сам размер видео. Вы можете их оставить в состоянии исходников, а можете откорректировать. После этого копируйте сам код и вставляйте его в ваш html-файл. Выглядит это так: .

Если вы всё сделали правильно – видео должно работать. Если оно не работает – внимательно пройдитесь по пунктам действия ещё раз. Возможно, вы что-то упустили, или скопировали не полный код видео. У нас оно не работает, потому, что кода видео нет.

Способ №2 – вставка видео с помощью скрипта плеера

Согласно этому способу, у вас появляется возможность без помощи какого либо видео сервиса (как в предыдущем варианте) загружать видео на сайт.

Итак, вам опять нужен ролик. Сохраните его на сайте в папке под названием «видео» - чтоб не путаться. Теперь, для того, чтобы это видео «заиграло» нам нужен плеер, который будет его воспроизводить. К счастью, на сегодняшний день существует много вариантов бесплатных видеоплееров с помощью которых вы сможете вставить такое своё виде на сайт. Можете выбирать любой, но мы бы порекомендовали плеер Flowplayer. Данный вариант разработан был специально для владельцев сайтов, предлагается на бесплатной основе, скачать его файлы можно к себе на компьютер.

После того, как вы скачали плеер на компьютер (в этом нет ничего сложного, если следовать пошаговой инструкции), разархивируйте его в какую-либо папку вашего сайта. Можно, для удобства создать папку с одноимённым названием плеера и разархивировать все файлы туда. Теперь возвращаемся к файлу и к коду видео. Для того, чтобы они нашли друг друга, необходимо подключить javascript-файл плеера к имеющемуся у нас html-файлу. Для того, чтобы это осуществить, необходимо внутри тега head, он идёт сразу после подключения таблицы стилей, вписать следующее: ё<script type="text/javascript" src="flowplay/flowplayer-3.2.2.min.js"></script>. Если вы назвали папку с видеопроигрывателем по-другому – путь будет прописан немного иначе.

После этого необходимо вернуться к нашему файлу и разместить сам плеер уже с файлом видео. Это можно сделать непосредственно под заголовком, предварительно вставив в тег div, который мы выровняем по центру. Кратко и схематически это выглядит так: <div align="center"><a href="video/mult.mp4" style="display: block; width: 560px; height: 315px;" id="player"></a><script type="text/javascript"> flowplayer("player", "http://ваш сайт/путь/к/файлу/flowplay/flowplayer-3.2.2.swf", { clip: { autoPlay: false, autoBuffering: true }});</script></div> Ещё раз проверьте пути до файлов, и если вы называли папки по-другому – впишите свои данные.

Обратите внимание, что здесь выставлены настройки, которые препятствуют автоматическому запуску видео, но позволяют его загрузку. В случае, если вы хотите автоматически запускать видео, вам необходимо на пути следования flowplayer-3.2.2.swf сделать следующее: уберите знак «,», закройте (, и поставьте ;. А, всё, что у вас находится после этого и до /script – необходимо будет удалить

Ещё один нюанс, на который хочется обратить внимание – данный проигрыватель поддерживает только видео формата мп4 или .flv..

Способ№3 – загрузка видео с помощью возможностей HTML5

Пропишите в статье сайта, где вы планируете вставить видео, следующее - <video src="video/mult.mp4" controls></video>. А, теперь, достаточно вам будет открыть страницу в браузере, как вы увидите, что видео уже добавилось автоматически. Главное – обратить внимание на путь к видео – значения должны соответствовать его «адресу». Правда, просто? Как, так получилось? Дело в том, что параметр controls автоматически производит добавку панели управления для видео файлов. Кстати, если вы хотите, чтобы видео запускалось после загрузки страницы автоматически – добавьте параметр «autoplay». Примечательно, что данный способ соответствует новым стандартам и будет интересен тем разработчикам, которые работают с html5 и хотят идти в ногу с прогрессом. Правда, есть в этом варианте и свои недостатки, о которых стоит знать заранее.

Видео будет работать только в новых браузерах, тогда как классическая Опера для него не подойдёт. Чтобы оно заработало в ней, необходимо будет видеоматериал конвертировать в особый формат«Ogg Theora», менять его код, тем самым предоставляя браузеру альтернативу. Как и где конвертировать видео – можно вот на этом сервисе online-convert.com/ . Отконвертируемый файл сохраните в папке "видео" и код для его вставки измените. После этого видео должно работать и в Опере.

Хотя, если честно говорить, старые браузеры достаточно неохотно подтягивают html5-теги, могут их игнорировать, поэтому, здесь придется постараться, чтобы всё заработала, так как надо. Поэтому, этот способ хоть и простой, на первый взгляд, но в нём много нюансов, и в старых браузерах он работает с трудом, надо добавлять обходное решение в тег для вставки видео…

Успехов в работе вам, и хорошего настроения…

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