现在如果要在页面中使用 Видео 标签 需要考虑三种情况 需要考虑三种情况 支持 支持 ogg Theora 或者 Vp8 (如果这玩意儿没出事的话）） 的 (Opera 、 Mozilla 、 Chrome) ， 支持 H.264 的 (Safari 、 IE 9 、 Chrome) не поддерживает (IE6, 7, 8). Что ж, давайте поймем видео HTML 5 с технического уровня, включая использование видеотеги, атрибуты и методы медиа, которые могут использовать видеообъекты, и медиа -события.
Использование видео -лейблаВидеотеги содержат SRC, плакат, предварительную нагрузку, автозапрограмму, петлю, управления, ширину, высоту и другие атрибуты, а также этикетку <SOURD> Используется внутренне. В дополнение к лейблу <Source> видеотегист также может включать контент, возвращаемый, когда указанное видео не может быть воспроизведено.
(1) атрибуты SRC и атрибуты PoserМожете ли вы представить, что делает атрибут SRC. Как и метка <img>, этот атрибут используется для указания адреса видео. Атрибут плаката используется для указания изображения, отображения (диаграмма предварительного просмотра), когда текущие видеоданные являются недействительными. Неверные видеоданные могут заключаться в том, что видео загружается, что может быть ошибкой видеодрес.
<Видео ширина = 658 высота = 444 src = http: //www.youname.com/images/first.mp4 poster = http: //www.youname.com/images/first.png toplay> </video>(2) атрибут предварительной нагрузки
Этот атрибут также можно понять с помощью имени. Есть три дополнительных значения: нет, метаданные, авто. Если этот атрибут не используется, по умолчанию AUTO.
<Видео ширина = 658 высота = 444 src = http: //www.youname.com/images/first.mp4 poster = http: //www.youname.com/images/first.png preload = none> </video >
Нет: нет предварительной загрузки. Использование этого значения атрибута может быть тем, что производители страниц считают, что пользователи не ожидают этого видео или уменьшат HTTP -запросы.
Метаданные: частичная предварительная загрузка. Используя это значение атрибута, производитель страницы считает, что пользователи не ожидают этого видео, но предоставляют пользователям некоторые метаданные (включая размер, первый кадр, список треков, продолжительность и т. Д.).
Авто: все предварительная загрузка.
(3) Атрибут автоматическогоДругой атрибут, который зависит от имени, знает цель. Атрибут Autoplay используется для установки видео, независимо от того, автоматически воспроизводится видео, что является логическим атрибутом. Когда он появляется, это означает, что автоматическое воспроизведение, что означает, что он не играет.
<Видео ширина = 658 высота = 444 src = http: //www.youname.com/images/first.mp4 poster = http: //www.youname.com/images/first.png preload = none> </video >
Обратите внимание, что значение логических атрибутов в HTML не является истинной и неверно. Правильное использование состоит в том, что использование этого атрибута в этикетке указывает на True. );
(4) Атрибут петли<Видео ширина = 658 высота = 444 src = http: //www.youname.com/images/first.mp4 poster = http: //www.youname.com/images/first.png toplay loop = loop> </video >
С первого взгляда ясно, что атрибут петли также используется для указания, циркулируется ли видео, что также является логическим атрибутом.
(5) Атрибут управления<Видео ширина = 658 высота = 444 src = http: //www.youname.com/images/first.mp4 poster = http: //www.youname.com/images/first.png preload = none controls> </Video>
Атрибуты управления используются для указания в браузере, чтобы указать, что производитель страницы не использует сценарий для генерации контроллера воспроизведения, и браузер должен использовать панель управления воспроизведением.
Управляющая строка должна включать в себя управление воспроизведением, управление прогрессом воспроизведения, управление громкостью и т. Д.
Панель управления воспроизведением по умолчанию каждого браузера отличается на интерфейсе. Из -за странных проблем моего браузера, видео -лейбл Firefox и Safari не является нормальным, поэтому эти два могут найти только скриншоты в Интернете.
(6) Атрибуты ширины и атрибуты высотыУниверсальный атрибут принадлежит этикетке, поэтому нет необходимости говорить это.
(7) Источник<Видео ширина = 658 Высота = 444 Poster = http://www.youname.com/images/firs/png autoplay = autoplay preload = none controls> <source s> <source s rc = http: //www.youname. com/images /firtst.ogv/> <source src = http://www.youname.com/images/first.ogg/> </video>
Исходная метка используется для указания нескольких параметров (потому что аудиотежники также могут включать эту метку, поэтому используйте носитель вместо видео) (браузер может выбрать только один в конце) использование только при использовании атрибутов SRC.
Браузер может обнаружить, можно ли воспроизводить видео, указанное на лейбле Source (возможно, формат видео не поддерживается, видео не существует и т. Д.). Этот метод в основном используется для разных браузеров. Сам тег источника не означает какого -либо значения и не может появиться в одиночку.
Эта ярлыка включает в себя три атрибута: SRC, тип и медиа.
Атрибуты SRC: используется для указания адреса медиа, так же, как видео -лейбл.
Атрибут типа: он используется для объяснения типа указанного носителя атрибута SRC, помогая браузеру определить, поддерживать ли такой формат медиа перед получением носителя.
Атрибуты носителя: он используется для объяснения того, где среда используется в среде, а значение по умолчанию - все это, когда он не установлен, что означает поддержку всех средств. Вы думаете о атрибуте медиа -лейбла <style>? Одинаковый.
(8) Полный пример<Видео ширина = 658 Высота = 444 Poster = http://www.youname.com/images/firs/png autoplay = autoplay preload = none controls> <source s> <source s rc = http: //www.youname. com/images /firtst.ogv/> <source src = http://www.youname.com/images/first.ogg/> </video>
Этот код определяет видео на странице. пиксели, высота сущности 240 пикселей
Первый выберите видео -адрес первой метки источника, значения атрибута SRC, категория видео - видео OGG, декодер для видео - Theora, аоудорист - это Vorbis, среда воспроизведения - это дисплей; Адрес больше не не является видеореалом больше не устал. Если вы должны быть совместимы с IE, вы можете добавить набор метки флэш -плеера после последней метки источника или использовать небольшой код JavaScript.
СуммироватьПриведенное выше - это краткое изложение метода вставки видео в веб -странице HTML, представленную Сяобином. Большое спасибо за вашу поддержку на веб -сайте Vevb Wulin!