English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Основной учебник HTML

Медиа HTML

Руководство по HTML

Базовый учебник HTML5

API HTML5

Медиа HTML5

Просмотр видео HTML

Существует множество способов воспроизведения видео в HTML.

Воспроизведение видео HTML

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Основной курс (oldtoolbag.com)</title>　
</head>
<body>
<video width="320" height="240" controls autoplay>
　　<source src="movie.ogg" type="video/ogg">
　　<source src="movie.mp4" type="video/mp4">
　　<source src="movie.webm" type="video/webm">
　　<object data="movie.mp4" width="320" height="240">
　　　　<embed width="320" height="240" src="movie.swf">
　　</object>
</video>
</body>
</html>
Тестирование <‹/›>

Вопросы и методы их решения

Воспроизведение видео в HTML не так просто!

Вам нужно быть знакомым с множеством навыков, чтобы обеспечить возможность воспроизведения ваших видео файлов во всех браузерах (Internet Explorer, Chrome, Firefox, Safari, Opera) и на всех устройствах (PC, Mac, iPad, iPhone).

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

Использование этикетки <embed>

Этикетка <embed> используется для внедрения мультимедийных элементов на веб-страницу HTML.

Ниже приведен HTML-код для вставки Flash-видео на веб-страницу:

Онлайн пример

　 　 <embed src="bookmark.swf" height="200" width="200">

Проблема

  • HTML4 не может распознать тег <embed>. Ваша страница не может быть проверена.

  • Если браузер не поддерживает Flash, видео не будет воспроизводиться

  • iPad и iPhone не могут отображать видео Flash.

  • Если вы преобразуете видео в другой формат, оно все равно не будет воспроизводиться во всех браузерах.

Использование тега <object>

Тег <object> используется для внедрения многоформатных элементов в веб-страницу.

Ниже приведен фрагмент HTML, который будет отображать видео Flash, встроенное в веб-страницу:

Пример

<object data="bookmark.swf" height="200" width="200"></object>

Проблема:

  • Если браузер не поддерживает Flash, видео не будет воспроизводиться.

  • iPad и iPhone не могут отображать видео Flash.

  • Если вы преобразуете видео в другой формат, оно все равно не будет воспроизводиться во всех браузерах.

Использование тега HTML5 <video>

Тег <video> HTML5 определяет видео или фильм.

Элемент <video> поддерживается во всех современных браузерах.

Ниже приведен фрагмент HTML, который будет отображать видео в формате ogg, mp4 или webm, встроенное в веб-страницу:

Онлайн пример

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Основной курс (oldtoolbag.com)</title>　
</head>
<body>
<video width="320" height="240" controls autoplay>
　　<source src="movie.mp4" type="video/mp4">
　　<source src="movie.ogg" type="video/ogg">
　　<source src="movie.webm" type="video/webm">
　　Ваш браузер не поддерживает атрибут video.
</video>
</body>
</html>
Тестирование <‹/›>

Проблема:

  • Вам нужно преобразовать видео во множество различных форматов.

  • Элемент <video> не работает в старых браузерах.

Лучшее решение HTML

В данном примере используются 4 различных формата видео. Элемент <video> HTML5 пытается воспроизвести видео в формате mp4, ogg или webm. Если все попытки失败, то используется элемент <embed>.

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Основной курс (oldtoolbag.com)</title>　
</head>
<body>
<video width="320" height="240" controls autoplay>
　　<source src="movie.ogg" type="video/ogg">
　　<source src="movie.mp4" type="video/mp4">
　　<source src="movie.webm" type="video/webm">
　　<object data="movie.mp4" width="320" height="240">
　　　　<embed width="320" height="240" src="movie.swf">
　　</object>
</video>
</body>
</html>
Тестирование <‹/›>

Проблема:

  • Вам нужно будет конвертировать видео в множество различных форматов

Решение Youku

Самый простой способ показать видео в HTML - использовать такие платформы, как Youku.

Если вы хотите воспроизвести видео на веб-странице, вы можете загрузить видео на такие платформы, как Youku, и затем вставить HTML-код на свою страницу, чтобы воспроизвести видео.

Вы можете найти внедренный HTML-код на страницах разделов обмена на различных видеоплатформах.

<embed src='https://player.youku.com/player.php/sid/XNDQ0MTI1NzE1Mg==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>
Тестирование <‹/›>

Использование гиперссылок

Если веб-страница содержит ссылки на медиафайлы, большинство браузеров будут использовать "дополнительное приложение" для воспроизведения файлов.

Следующий фрагмент кода показывает ссылку на файл AVI. Если пользователь нажмет на эту ссылку, браузер запустит "дополнительное приложение", например Windows Media Player, чтобы воспроизвести этот файл AVI:

Онлайн пример

<a href="bookmark.swf">Play a video file</a>

Описание инлайновых видео

Когда видео включено в веб-страницу, его называют инлайновым видео.

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

Кроме того, учтите, что пользователи могут уже отключить опцию инлайновых видео в браузере.

Наши лучшие советы - включать их только в тех местах, где пользователи хотят видеть инлайновые видео. Пример: если пользователи хотят увидеть видео и кликнуть по ссылке, страница откроется, и видео начнет играть.

HTML-теги для мультимедиа

ТегОписание
<embed>Определяет внедренный объект. В HTML4 не рекомендуется, но разрешено в HTML5.
<object>Определяет внедренный объект. В HTML4 не рекомендуется, но разрешено в HTML5.
<param>Определяет параметры объекта
<audio>HTML5Определяет аудиоконтент
<video>HTML5Определяет видео или фильм
<source>HTML5Определяет multimedia ресурсы элемента media (<video> и <audio>)
<track>HTML5Указать файл субтитров или другой файл, содержащий текст, для элемента media (<video> и <audio>)
Полный список примеров HTMLАудио HTML