Как скопировать html код видео

Как скопировать html код видео

Личный блог Лапаевой Людмилы

Чтобы вставить видео на сайт, сначала надо получить его HTML код

Самый простой вариант кликаем по нему правой кнопкой мышки и в открывшемся окне находим строчку скопировать HTML код и вставляем код себе на сайт, но иногда это не срабатывает, есть другие варианты:

Рассмотрим три варианта открытых источников

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

нажимаем на него и получаем картинку ниже, где нажимаем "COPY" и HTML код видео копируется в буфер обмена

2.Вариант — видео с You Tube

Нажимаем на экране перейти на You Tube

Переходим на сайт You Tube и видим под роликом слово "поделиться"

Нажимаем на него и появляется новая строчка, находим слово "HTML-код", нажимаем на него

Появляется сам код

Копируем его и вставляем на сайт

Если мы хотим, чтобы показывалось только наше видео и после просмотра не предлагались другие видео, надо нажать на слово "ещё" под кодом

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

убрать галочку в графе "Показать похожие видео после завершения просмотра".

3. Вариант — видео с @mail.ru

Нажимаем на видео кнопочку @mail.ru и переходим на сайт

В новом окне ниже видео есть разные варианты, нас интересует "Опубликовать"

Нажимаем на него , далее в выпадающем окне нажимаем "получить код"

Получить HTML код и вставить его на livebmx.ru очень просто! На многих сайтах он обозначается как EMBED код. Разберём несколько самых популярных сайтов и онлайн видеоплееров. В случае, когда Вы нашли интересное видео на каком-либо сайте с онлайн проигрывателем, для начала наведите курсор мышки на окно с видео, нажмите правую кнопку мыши и откроется дополнительное меню. Выбираете пункт «Watch on …». В зависимости от сайта появится «Watch on vimeo»(отмечено красным цветом на рисунке 1) или «Watch on youtube»(отмечено красным на рисунке 4). Эту же команду в большинстве случаев можно вызвать нажатием левой кнопки мыши на логотип в правом нижнем углу (на рисунке 1 и 4 обведён синим цветом ). Откроется сайт хостера.

Vimeo.com

Далее в случае Vimeo в правом верхнем углу проигрывателя нажимаете иконку «Embed» (отмечена розовым цветом на рисунке 1). Открывается меню (нижняя часть рисунка 2). Вам необходимо проставить правильный размер видео плеера, для этого в меню нажмите «Customize embed options» (отмечен оранжевым цветом на рисунке 2), открывается дополнительное меню. В первом параметре «Size» в окошке левее (ширина) пишем цифру 480 (отмечено фиолетовым цветом на рисунке 3), второе число ставится само автоматически, новый размер вставляется в код тоже автоматически. Потом убираете все галочки ниже (если они проставлены). Затем наводите курсор мыши на окно с «Get the embed code» (отмечено зелёным цветом на рисунке 3) и копируете (правая кнопка мыши->Копировать) содержимое. Код получен.

Youtube.com

В случае s Youtube нажимаем кнопку «Встроить» (находится чуть ниже окна с плеером и отмечена розовым цветом на рисунке 5). Открывается меню. Проставляете правильный размер в окне «Пользователский» (отмечено зелёным цветом на рисунке 5). В параметр «Ширина» вписываем 480, второй размер проставляется сам автоматически и обновляется код. Далее немного выше убираете галочки (если проставлены) и наводите курсор мышки на окно с кодом (выделено розовым цветом на рисунке 5), копируете (правая кнопка мыши->Копировать) содержимое. Код получен.

Rutube.ru

1)Если Вы находитесь на стороннем ресурсе с встроенным проигрывателем Rutube, то наведите курсор мышки на левый верхний угол окна с проигрывателем и появится иконка «Ссылка и код» (отмечена красным цветом на рисунке 6). Нажимаете на неё левой кнопкой мыши и открывается меню с кодом плеера (отмечено синим цветом на рисунке 6). Копируете содержимое окна, код получен. Вставляете на livebmx.ru в соответствующее окно.Для перехода со стороннего сайта на сайт Рутубе – нажмите логотип в правом нижнем углу видеоплеера, как в случае с vimeo или youtube.

Читайте также:  Смарт часы с изогнутым дисплеем

2)Если у Вас открыта непосредственно сама страница Rutube.ru c видеоплеером, то нажимаете вкладку «Ссылка и код» (отмечена жёлтым цветом на рисунке 7), которая находится чуть ниже видеоплеера. Открывается меню. Копируете содержимое пункта «Код плеера» (отмечен салатовым цветом на рисунке 7). Код получен, вставляете на livebmx.ru в соответствующее окно.

Видеоплеер на сайте Vkontakte.ru

1) Вне зависимости от сайта, на котором находится встроенный плеер Вконтакте. Наведите курсор мышки на окно с проигрывателем. Нажмите правую кнопку мыши, откроется вспомогательное меню. Выберите «Копировать код видео» (отмечен красным цветом на рисунке 8), далее вставьте полученный код на livebmx.ru в соответствующее окно. Поменяйте параметр «width» на 480 , код готов.

2) Если Вы находитесь на сайте Вконтакте, нажмите кнопку «Получить код видео» (отмечено синим цветом на рисунке 8), появляется окошко с кодом, копируте и вставляете на livebmx.ru в соответствующее окно. Поменяйте параметр «width» на 480 , код готов.

Видеоплеер на сайте Vitalbmx.com

Наводим курсор мышки на кнопку «Menu» в правом нижнем углу. Выбираем пункт «Embed» (отмечен салатовым цветом на рисунке 9), открывается окно с кодом (отмечено жёлтым цветом на рисунке 9) и размером (отмечено розовым на рисунке 9). Проставляем правильную ширину 480 в мини окошко «Width» и нажимаете кнопку «Copy to clipboard» (это означает «Копировать»). Код получен, вставляете в соответствующее окно.

Если Вы хотите загрузить видео со своего компьютера, сначала загрузите его на один из 5 первых на этой странице видеохостеров. Поначалу может показаться непривычным, но с опытом все эти действия выполняются не дольше чем, за 10 секунд!

Автор статьи: Андреев Максим

Если Вы столкнулись с вопросом добавления видео ролика на страницы Вашего сайта или блога, но не знаете, как это сделать, то этот урок для Вас! В данном уроке мы рассмотрим 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, сразу после подключения таблицы стилей пропишите следующий код:

Читайте также:  Как на windows 8 сделать обычный пуск

Если Вы размещаете файл в другой папке, то обратите внимание, чтобы путь к файлу был прописан правильно.

4. Теперь перейдем в тело нашего файла и разместим сам плеер с проигрываемым файлом. Я размещу его прямо под соответствующим заголовком, предварительно поместив в тег div, который выровняю по центру.

Здесь Вам нужно будет проверить пути до файлов и прописать свои. Делая это будьте внимательны.

Также здесь выставлены настройки, которые не дают видео запускаться автоматически, однако разрешают его загрузку. Если Вы хотите, чтобы видео запускалось автоматически, то после пути к файлу «flowplayer-3.2.2.swf» следует убрать запятую, закрыть круглую скобку и поставить «;» (без кавычек), а все остальное, что находится после этого и до закрывающего тега «/script» удалить.

Таким образом, если мы проверим страницу в браузере, то увидим, что теперь у нас 2 видео: одно загружается с сервиса youtube, а другое хранится у нас на сайте и загружается при помощи плеера.

Имейте в виду, что видео, загружаемое плеером должно иметь формат .mp4 или .flv.

Давайте опробуем еще один способ и попробуем загрузить тот же самый ролик, который хранится у нас на сервере, но только при помощи новых возможностей HTML5.

1. Найдите третий заголовок и прямо под ним пропишите следующий код:

Если вы откроете страницу в браузере, то увидите, что Ваше видео добавилось под третьим заголовком. Вот так просто! Всего одной строчкой.

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

Параметр «controls» добавляет панель управления для видео.

Если Вы хотите, чтобы Ваше видео воспроизводилось сразу после загрузки страницы, то нужно добавить параметр «autoplay».

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

Однако, здесь есть свои «подводные камни», например, разная поддержка браузерами разных форматов мультимедиа. Данный пример будет замечательно работать во всех новых браузерах, но не в браузере Опера. Чтобы этот код заработал в Опере мы должны конвертировать видео файл в формат «Ogg Theora» и немного поменять код, чтобы дать браузеру альтернативный выбор.

Конвертировать файл можно с помощью сервиса online-convert.com/ . После конвертации сохраните полученный файл в папку «video», а код для вставки видео поменяйте на следующий:

Теперь пример будет работать и в браузере Опера.

Однако, есть еще одна загвоздка, касающаяся старых браузеров, которые не понимают html5-теги. К сожалению, переход к новым стандартам также требует и умения находить обходные решения.

Если для браузера незнаком какой-то тег, то он его просто игнорирует, но при этом не игнорирует содержимое внутри неизвестного ему элемента. Следовательно, мы можем добавить обходное решение прямо в наш тег для вставки видео. Код при этом может выглядеть вот так:

С таким кодом новые версии браузеров успешно обработают наш элемент «video», а если вдруг пользователь откроет страницу при помощи старого браузера, то незнакомый тег «video» будет проигнорирован, но тег «iframe» будет успешно обработан и видео подгрузится с Youtube.

Пожалуй, на этом буду заканчивать. Напоминаю, что все исходные материалы Вы можете скачать, щелкнув по иконке «Исходники» в начале статьи, а посмотреть работу всех трех примеров можно щелкнув по иконке «Демо» там же.

Оставляйте свои комментарии и делитесь этой статьей с друзьями при помощи кнопок социальных сетей. Буду Вам очень признательна.

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

Желаю Вам хорошего настроения и успехов в Вашей работе!

Ссылка на основную публикацию
Как сделать смайлики на андроиде
Описание Приветствую вас, дорогие читатели нашего сайта! Сегодня речь пойдёт о «весёлых разноцветных смайликах» - так называемых Emoji на вашем...
Как просматривать инстаграм без регистрации
Поиск в Instagram Поскольку Instagram содержит более миллиарда изображений, а пользуется им более 100 миллионов человек, вопрос работы с поисковой...
Как проследить замужем с помощью телефона
Подробная инструкция по слежке за человеком через телефон с обзором крутых приложений. В разных бытовых ситуациях приходится разбираться в вопросе,...
Как сделать сортировку по дате в excel
Видео: Excel 2007. Фильтрация и сортировка ячеек Есть несколько способов сортировки дат в Excel. Здесь рассмотрим, как сделать сортировку в...
Adblock detector