Как сделать загрузку видео на сайте
Урок 15. Как вставить видео на страницу сайта средствами HTML?
1. Как вставить видео на сайт средствами HTML?
2. Короткий код вставки видео с Youtube на сайт
Как вставить видео на сайт средствами HTML?
Есть два вида вставки видео на сайт: видео с другого ресурса (Youtube, Yandex video, Rutube и другие) и видеофайл, который уже загружен на сайт и открывающийся прямой ссылкой.
После этого Вы вставляете полученный код к себе на страницу. Получается примерно следующий отрезок кода:
Код HTML
Настройки окна видео подстраиваете под себя: width (ширина в пикселях), height (высота в пикселях). В ссылке http://video.rutube.ru/7c806393a9705797d7e92c4a05493d5d при выборе другого видео достаточно поменять код видео, который подчёркнут. Тег embed используется для старых настроек браузеров, поэтому там также не забываем поменять размеры видео и тд, иначе при просмотре через другой браузер окно с видео будет отличаться.
Поскольку простых путей не ищем, то предположим, что Вы хотите вставить SWF-файл. Существует множество плееров доступных он-лайн. Например, FlowPlayer ( скачать FlowPlayer ). После скачивания архива загрузите его на сайт в папку с соответствующим названием flowplayer. После этого надо прикрепить к странице с видео данный плеер, для этого вставляем в head следующую строку:
Код HTML
Останется только на самой стране вставить код для проигрывания видео. В href не забудьте вставить путь к видео.
Из плюсов данного метода хотел бы отметить отсутствие рекламы при проигрывании видео и, при нормальной работающем хостинге(!), быструю загрузку видео.
Короткий код вставки видео с Youtube на сайт
На этот случай достаточно одной строки кода с использованием iframe. В коде будет менять только http://www.youtube.com/embed/WRtAVxqacQM короткий идентификационный код для видео. Также по желанию можно изменить размеры окна видео: width (ширина в пикселях), height (высота в пикселях).
Код HTML (вставляем куда угодно в body документа)
И наслаждаемся клипом LP!)
Вставка видео или тег video в HTML5
Позволяет встраивать, воспроизводить и управлять настройками видеоролика на веб-странице.
Синтаксис
Пример кода тега video
Вставка видео с помощью в html-страницу при помощи embed
Элемент embed используется для загрузки и отображения объектов (например, видеофайлов, флэш-роликов, некоторых звуковых файлов и т.д.), которые исходно браузер не понимает. Чем метод отличается от предыдущих? В большинстве случаев, подобные объекты требуют подключения к браузеру специального модуля, который называется плагин, или запуска вспомогательной программы.
К слову, спецификация HTML 4.0 рекомендует использовать тег object для загрузки внешних данных вместо тега embed. Однако некоторые браузеры не отображают таким образом нужную информацию, поэтому наилучшим вариантом будет поместить embed внутрь контейнера object.
Спасибо за внимание! И успехов при вставке видео на сайт!)
Как оптимизировать видео для сайта
Видео – мощный инструмент для привлечения и вовлечения пользователей. Видеоформат уже сейчас называют одним из трендов настоящего и будущего, его популярность в рекламе постоянно растет. Уже сейчас на видео приходится более 70% всего потребительского интернет-трафика. Чуть меньше половины пользователей (43%) хотели бы получать еще больше контента в видеоформате. Да и самим маркетологам выгодно использовать видео: 4 из 5 пользователей принимают решение о покупке на основе просмотренного видео. Кроме того, компании, которые используют видео в рекламе, имеют на 27% выше CTR и на 34% выше уровень конверсии.
В общем, есть множество причин использовать видео, в том числе и на своем сайте. Однако тут встает вопрос об оптимизации: как использовать видео не во вред своему сайту? Об этом и пойдет речь в статье.
Выбираем формат видео для сайта
Для платформ YouTube и Vimeo стандартными форматами являются MP4 и WebM. MP4 поддерживают все браузеры, в то время как WebM сейчас поддерживают только Chrome и Firefox. Видеоролики в формате WebM, как правило, весят меньше, чем MP4-файлы, однако MP4 смотрятся чуть лучше на портативных девайсах.
Далее оптимизация разделяется на два пути:
Рассмотрим оба типа работ.
Оптимизация видео для сайта
Что нужно сделать для того, чтобы видео на сайте грузилось быстро.
Уменьшение веса видеофайла
Специальные программы вроде Blazemp или HandBrake позволяют уменьшить размер файла без ухудшения его качества. Более легкие файлы загружаются быстрее, а это значит, что сжатие файлов поможет сэкономить время, требующееся на загрузку страницы.
Главное, не переборщить и не сделать сильное сжатие в ущерб качеству; все-таки видеоролики с высоким разрешением выглядят более интересно и профессионально, а видео низкого качества может оставить у пользователей плохое впечатление от посещения сайта.
Конвертация в поддерживаемые HTML5-форматы
Используйте онлайн-конвертер для того, чтобы переконвертировать видео в форматы MP4 или WebM.
Удаление звука (если он не используется)
Оптимизация сайта под видео
Что нужно сделать, чтобы видео отображалось корректно.
Точный размер видео
Обязательно укажите в HTML или CSS размеры видео по вертикали и горизонтали – так браузеру будет проще определиться с пропускной способностью.
Загрузка видео после загрузки страницы (Lazy Load)
Если у вас есть видео, которое начинает проигрываться автоматически после того, как пользователь зашел на страницу, отложите его загрузку до того момента, когда загрузятся все остальные элементы на странице. Так у пользователей сложится более приятное впечатление от сайта.
Мобильные пользователи
Все больше людей выходят в сеть через портативные девайсы, поэтому сайты, не оптимизированные под мобильные устройства, изначально проигрывают оптимизированным сайтам.
Следуйте принципам адаптивного дизайна: ваш сайт должен нормально отображаться на дисплеях с разным разрешением и разных размеров; также сайт должен понимать ориентацию устройства для того, чтобы корректно проигрывать видеоролики.
Сделать так, чтобы сайт нормально отображался на разных устройствах, будет непростой даже для опытного фронтендщика. Да, можно сделать отдельную версию сайта специально для мобильных устройств, но есть более простой способ приспособить сайт под портативные нужды.
Допустим, на главной странице сайта есть видео, которое на мобильных устройствах выглядит не очень хорошо. Тогда можно просто запретить видео грузиться на портативных девайсах с небольшими экранами. Надо добавить в CSS такой код:
Советы для SEO-специалистов
И несколько советов, которые касаются SEO.
Да, сейчас есть популярные площадки для размещения видео – тот же YouTube. Однако если вы хотите продвинуть сайт в Google, размещать видео нужно на своем ресурсе. Если вы разместите видео на YouTube и дадите ссылку на свой сайт, то поисковые системы отдадут предпочтение YouTube, и в результате кто-то, кто ищет вашу компанию в Google, попадет на YouTube, а не на ваш сайт.
Заключение
Если перед добавлением роликов на сайт вы их оптимизируете, то появление видео на сайте окажет минимальное влияние на производительность – в отличие от конверсии, которая может значительно вырасти.
Экспериментируйте с видео: ставьте его в разные места сайта, анализируйте, что больше нравится вашим пользователям.
В конце концов, оптимизировать видео не так сложно, как сделать по-настоящему интересный ролик. Удачи!
Все способы, как можно вставить видео с Youtube на сайт
Иногда так хочется высказаться, объяснить суть происходящего, что даже не хватает слов. Поэтому начинаешь жестикулировать руками, пытаясь выразить переполняющие тебя чувства. Так бывает и с авторами контента, и для самовыражения кроме слов они иногда используют визуальные средства. Поэтому давайте разбираться, как вставить видео с youtube на сайт:
Зачем сайту видео?
Люди, исповедующие консервативный взгляд на значение интернета в распространении информации, рассматривают его как цифровой вариант обычного печатного таблоида. Но прогрессивная часть пользовательской аудитории не готова мириться с таким мнением. Им мультимедийность подавай! Одним из таких веяний и является ретрансляция видео с Youtube на своем сайте.
Как становится ясно из сказанного выше, видео на сайте может стать мощным инструментом популяризации, продвижения и заработка на своем ресурсе. Поэтому стоит более подробно ознакомиться со способами его размещения.
Способы размещения видео на сайте
Здесь мы рассмотрим наиболее популярные способы. Вот они:
С помощью тега создается плавающий фрейм, который является своего рода контейнером, позволяющим загружать содержимое другой веб-страницы.
Как видите, значение некоторых атрибутов можно с легкостью подправить под свои нужды. Прежде всего, это касается размеров отображаемого фрейма. Теперь осталось вставить его код в html вашего сайта. При этом главное учесть соразмерность окна вашего сайта и фрейма. Но если что-то пойдет не так, размеры можно легко подогнать.
Для демонстрации мы взяли шаблон простого двухстраничного сайта. Код плавающего фрейма вставляется в любой из блоков
Как видно из примера, в тегах реализовано несколько вариантов источников. То есть перед тем, как вставить видео на сайт, его нужно будет « перегнать » в несколько форматов. В зависимости от поддерживаемого формата браузер сам выберет нужный ему вариант.
Вот как это выглядит на нашем сайте:
Интеграция видео на сайтах, развернутых на основе CMS
1. WordPress – в этом популярном движке, начиная с версии 2.9, реализована поддержка вставки обычной ссылки на ролик, расположенный на одном из популярных видео хостингов. Для этого нужно всего лишь воспользоваться специальным шорткодом. Его синтаксис:
Вот некоторые из них:
2. Joomla – с этим движком все обстоит не так просто. Поэтому лучше для вставки видео и аудио данных воспользоваться специализированными плагинами.
Вот несколько проверенных:
На этом все! Надеемся, что с такими познаниями о том, как вставить видео на сайт, у вас теперь достаточно возможностей для выражения мыслей и чувств на страницах своего ресурса. Некоторыми из них вы можете поделиться с нами, оставив комментарий к этой статье.
Website-create.ru
Если Вы столкнулись с вопросом добавления видео ролика на страницы Вашего сайта или блога, но не знаете, как это сделать, то этот урок для Вас! В данном уроке мы рассмотрим 3 альтернативных способа добавления видео на сайт, и Вы сможете выбрать тот, который понравится Вам больше.
Интернет развивается с каждым днем все больше и больше. Сегодня пользователи хотят не только читать тексты, но также и лицезреть различные графические элементы, разные интерактивные примочки и еще смотреть видео прямо с веб страниц. Во многих случаях это создает дополнительное удобство для пользователя (например, когда он может посмотреть видео-инструкцию) или просто делает его пребывание на веб ресурсе более увлекательным.
Так или иначе, будь то полезное видео с уроком или инструкцией, демонстрационное видео какого-либо продукта или развлекательное видео, призванное скрасить досуг пользователя, рано или поздно появляется необходимость внедрения этого видео в веб страницу.
Есть несколько способов сделать это. Сегодня мы рассмотрим 3 разных способа, которые помогут Вам справиться с этой задачей. Какой из них выбрать – решать Вам. Итак, поехали…
Как вставить видео на сайт
Для того, чтобы тестировать все наши примеры, я создам html-файл, а также подключу к нему кое-какие стили. Ниже приведен код этого файла и код таблицы стилей, которая подключена к html-документу. Также все эти файлы Вы можете найти в исходниках к уроку. Объяснять этот код я здесь не буду, так как он достаточно простой, и я думаю, что Вы и сами в нем прекрасно разберетесь, однако, если что-то будет непонятно, то Вы всегда можете написать в комментариях свой вопрос, и я на него обязательно отвечу.
Итак, код html-файла:
Это просто html5 файл, который содержит в себе несколько заголовков. Далее под каждым из них мы будет размещать соответствующий код.
Я также прописала некоторые стили для этой странички. Они хранятся в файле «style.css», который лежит в том же каталоге, что и html-файл. Содержимое файла «style.css» выглядит следующим образом:
Если открыть наш html-файл в браузере, то сейчас он будет выглядеть так:
Подготовка закончена, давайте перейдем к самой вставке видео на веб страницу.
Первый способ, который мы рассмотрим – это вставка видео при помощи сервиса Youtube.
1. Первое что нам нужно – это иметь какой-то видео-ролик, который мы хотим вставить. Допустим, что он у нас есть и хранится на нашем локальном компьютере.
Теперь переходим на сайт www.youtube.com. Здесь нам нужно нажать на кнопку «Войти», расположенную в верхнем правом углу. После этого нужно произвести вход при помощи Вашего аккаунта Google. Если вдруг у Вас его еще нет, то сначала нужно его завести.
2. После того, как Вы вошли в сервис под своим аккаунтом, нажмите на кнопку «Добавить видео». Сервис предложит Вам выбрать файл для загрузки, и Вы можете выбрать нужный файл, который хранится у Вас на компьютере.
После того, как Вы выбрали нужный файл, он начнет загружаться. Нужно подождать немного, пока он полностью не загрузится.
После того, как видео загрузилось полностью, Вы можете перейти по его ссылке (ее вы можете увидеть вверху, сразу после сообщения о том, что загрузка завершена).
Когда Вы перейдете по данной ссылке, то увидите Ваше видео, размещённое на сервисе Youtube.
3. Теперь нам нужно получить код, для вставки видео на нашу веб страницу. Для этого сразу под видео щелкните по вкладке «Поделиться», а в ней по вкладке «HTML-код».
Теперь Вы можете увидеть html-код, который понадобится нам для вставки. Здесь также можно задать и некоторые другие параметры, такие как: размер видео, показывать ли похожие видео после окончания просмотра и режим конфиденциальности.
Когда Вы настроите все параметры, то можете скопировать код и вставить его в Ваш html-файл. Я вставлю код в файл под соответствующим заголовком следующим образом:
И теперь, если мы посмотрим работу нашего html-файла в браузере, то увидим, что видео вставилось и его можно просмотреть (посмотреть код в действии Вы можете нажав на иконку «Демо» в начале статьи).
Здесь, я думаю, все понятно. Давайте перейдем к следующему способу.
Вставляем видео при помощи скрипта плеера.
Можно вставить видео и не загружая его на какой-либо видеосервис. Если по какой-то причине Вы не хотите загружать видео на сервис, то можно воспользоваться скриптом плеера.
Итак, у Вас должен быть видеоролик, который Вы будете загружать. Допустим, что он хранится в какой-то папке на Вашем сайте. Я сохраню видеофайл в папке с именем «video».
Теперь нам нужен сам плеер. На данный момент существует множество бесплатных плееров, с помощью которых можно вставить видео на сайт. Давайте воспользуемся плеером Flowplayer. Это бесплатный видеоплеер для веб, который разработан специально для владельцев сайтов.
1. Скачайте файлы плеера себе на компьютер нажав вот на эту ссылку: FlowPlayer
2. После того, как Вы скачали файлы плеера на свой компьютер, нужно их разархивировать в какую-либо папку на Вашем сайте. Я создала папку «flowplay» и разархивировала файлы туда.
3. Теперь перейдем в html-файл и займемся кодом.
Первое, что нам нужно сделать это подключить javascript-файл плеера к нашему html-файлу. Для этого внутри тега head, сразу после подключения таблицы стилей пропишите следующий код:
Если Вы размещаете файл в другой папке, то обратите внимание, чтобы путь к файлу был прописан правильно.
4. Теперь перейдем в тело нашего файла и разместим сам плеер с проигрываемым файлом. Я размещу его прямо под соответствующим заголовком, предварительно поместив в тег div, который выровняю по центру.
Здесь Вам нужно будет проверить пути до файлов и прописать свои. Делая это будьте внимательны.
Также здесь выставлены настройки, которые не дают видео запускаться автоматически, однако разрешают его загрузку. Если Вы хотите, чтобы видео запускалось автоматически, то после пути к файлу «flowplayer-3.2.2.swf» следует убрать запятую, закрыть круглую скобку и поставить «;» (без кавычек), а все остальное, что находится после этого и до закрывающего тега «/script» удалить.
Таким образом, если мы проверим страницу в браузере, то увидим, что теперь у нас 2 видео: одно загружается с сервиса youtube, а другое хранится у нас на сайте и загружается при помощи плеера.
Давайте опробуем еще один способ и попробуем загрузить тот же самый ролик, который хранится у нас на сервере, но только при помощи новых возможностей HTML5.
1. Найдите третий заголовок и прямо под ним пропишите следующий код:
Если вы откроете страницу в браузере, то увидите, что Ваше видео добавилось под третьим заголовком. Вот так просто! Всего одной строчкой.
Не забудьте проверить путь к видеофайлу, чтобы он соответствовал тому, где Вы его расположили.
Параметр «controls» добавляет панель управления для видео.
Если Вы хотите, чтобы Ваше видео воспроизводилось сразу после загрузки страницы, то нужно добавить параметр «autoplay».
Этот способ отвечает новым стандартам html5 и, я думаю, заинтересует разработчиков, желающих уже сегодня внедрять стандарты будущего.
Однако, здесь есть свои «подводные камни», например, разная поддержка браузерами разных форматов мультимедиа. Данный пример будет замечательно работать во всех новых браузерах, но не в браузере Опера. Чтобы этот код заработал в Опере мы должны конвертировать видео файл в формат «Ogg Theora» и немного поменять код, чтобы дать браузеру альтернативный выбор.
Теперь пример будет работать и в браузере Опера.
Однако, есть еще одна загвоздка, касающаяся старых браузеров, которые не понимают html5-теги. К сожалению, переход к новым стандартам также требует и умения находить обходные решения.
Если для браузера незнаком какой-то тег, то он его просто игнорирует, но при этом не игнорирует содержимое внутри неизвестного ему элемента. Следовательно, мы можем добавить обходное решение прямо в наш тег для вставки видео. Код при этом может выглядеть вот так:
С таким кодом новые версии браузеров успешно обработают наш элемент «video», а если вдруг пользователь откроет страницу при помощи старого браузера, то незнакомый тег «video» будет проигнорирован, но тег «iframe» будет успешно обработан и видео подгрузится с Youtube.
Пожалуй, на этом буду заканчивать. Напоминаю, что все исходные материалы Вы можете скачать, щелкнув по иконке «Исходники» в начале статьи, а посмотреть работу всех трех примеров можно щелкнув по иконке «Демо» там же.
Оставляйте свои комментарии и делитесь этой статьей с друзьями при помощи кнопок социальных сетей. Буду Вам очень признательна.
Также подписывайтесь на обновления блога. Впереди много всего интересного и полезного по теме создания веб сайтов.
Желаю Вам хорошего настроения и успехов в Вашей работе!