R598551293139
Урок №10: добавление видео в HTML
Некоторых мучает вопрос, как добавить на свой сайт видео-ролики, клипы, фильмы. Сделать это не так уж сложно, как может показаться на первый взгляд. На этом уроке мы рассмотрим способы добавления видео в HTML код.
Тег <video> к сожалению работает только в HTML5. Служит для добавления, воспроизведения и управления настройками видеоролика на странице. Путь к видео файлу задается через параметр src или тег <source>. К сожалению нет браузера который поддерживает одновременно все кодеки, однако лидером в этом деле является Google Chrome. Чтобы видео воспроизводилось во всех браузерах, его необходимо кодировать с помощью различных кодеков и одновременно добавлять файлы различных форматов.
Тег <video> имеет следующие параметры:
- autoplay - видео автоматически начинает проигрываться после загрузки веб-страницы.
- controls - создает панель управления к вставленному видеоролику.
- width - задает ширину области для воспроизведения видеоролика
- height - задает высоту области для воспроизведения видеоролика
- loop - после завершения видеоролика, проигрывает его сначала.
- post - задает адрес изображения, которое будет отображаться, если видео недоступно или не может быть проиграно.
- preload - задается для загрузки видеоролика вместе с загрузкой страницы.
- src - указывает путь к файлу воспроизводимого видеоролика.
Пример вставки видео с различными кодеками в код HTML:
| <html> <head> <title>video</title> </head> <body> <video width="400" height="300" controls="controls" poster="video.jpg"> <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="video.webm" type='video/webm; codecs="vp8, vorbis"'> </video> </body> </html> |
Еще один способ добавить видео на страничку, с помощью тега <img> и параметра dynsrc. Синтаксис: Однако, самый популярный и в тоже время простой способ вставить видео в ваш HTML код, это загрузить его на Youtube.com, если это видеоролик или клип или в Vk.com, если это объемное видео или фильм.
Появится небольшое окно, где будет воспроизводится ваше видео:
<img dynsrc="C:\ваш файл.avi" width="30%" height="30%"> или
<img dynsrc="http://Video/file.avi" width="30%" height="30%">
Добавление видео с YoTube и Vk
В случае с Youtube.com, загрузите видео на ваш канал или выберете уже готовое, кем-то закачанное, видео (авторское право при этом не нарушается). За тем под плеером нажмите вкладку "Поделиться" и "HTML-код". В результате появится код вроде этого:
<iframe width="560" height="315" src="//www.youtube.com/embed/8sbKVdHhz6U" frameborder="0" allowfullscreen></iframe>
Его можно отредактировать под ваш сайт, главное не изменять ссылку и вставлять в HTML код страницы. Выглядеть он будет так:
С vk.com все аналогично, под видео с правой стороны находится надпись - "Поделиться" за тем, жмете "Эскорт видеозаписи" и получаете код для вставки. Вид в браузере:
Коды видеороликов, как правило окружают парным тегом <center>, для того, чтобы окно плеера находилось по центру. Для более детальной настройки таких окон используется CSS. Параметры тега <iframe> будут рассмотрены тут - Iframe в HTML
