встраивание тега
Я обнаружил эту проблему с тегом видео HTML5, и она меня очень озадачила. Если я вставлю тег видео в теги абзаца, он перестанет работать должным образом в некоторых браузерах.
Кто-нибудь может пролить свет на это?
Тег видео немного сложен, поэтому проблема требует небольшого пояснения. Чтобы проиллюстрировать это, вот страница HTML5, которую вы можете запустить. Он использует удобное тестовое видео в формате .mp4 с веб-сайта Microsoft:
<!DOCTYPE html>
<html>
<head><title>video with no para</title></head>
<body>
<video controls>
<source src="http://ie.microsoft.com/testdrive/graphics/videoformatsupport/big_buck_bunny_trailer_480p_high.mp4"
type='video/mp4'/>
These words and the button below should not be visible
in an HTML5 browser
<form method='get' action='www.microft.com'>
<input type='submit' value='MS Home'</form>
</video>
</body>
</html>
Видеотег HTML5 может иметь один или несколько исходных тегов, каждый из которых содержит видео в определенном формате. Браузер отобразит одно видео, которое он может обработать. Чтобы справиться с браузерами, которые не понимают HTML5, тег видео может содержать дополнительный материал за пределами исходных тегов. Браузер HTML5 должен игнорировать этот дополнительный материал.Браузер, не поддерживающий HTML5, должен игнорировать любые теги, которые он не понимает (в данном случае видео и источник), поэтому он будет игнорировать видео и отображать только остальное. В реальном мире другие вещи обычно обеспечивают какой-то способ загрузки и воспроизведения видео. В этом примере остальное — это текст и форма, которая отображает кнопку.
Таким образом, разные браузеры будут отображать эту страницу по-разному. Последние версии Chrome и IE понимают HTML5 и умеют отображать исходный файл .mp4, поэтому они должны отображать видео. Они НЕ ДОЛЖНЫ отображать текст или кнопку.
Последняя версия Firefox поддерживает HTML5, но не умеет воспроизводить файлы .mp4. Нужно видео в формате ogg. Он решает эту проблему, отображая черный ящик там, где должно быть видео. Однако, опять же, он не должен отображать текст или кнопку.
Старые версии этих браузеров, не поддерживающие HTML5, должны отображать только текст и кнопку.
HTML-код, показанный выше, работает должным образом. Проблема возникает, если я заключаю раздел видео в абзац:
<!DOCTYPE html>
<html>
<head><title>video with para</title></head>
<body>
<p>
<video controls>
<source src="http://ie.microsoft.com/testdrive/graphics/videoformatsupport/big_buck_bunny_trailer_480p_high.mp4"
type='video/mp4'/>
These words and the button below should not be visible
in an HTML5 browser
<form method='get' action='www.microft.com'>
<input type='submit' value='MS Home'</form>
</video>
</p>
</body>
</html>
IE версии 9 работает правильно — он отображает видео без текста и без кнопки.
Chrome версии 17.0.963.56 m отображает видео, игнорирует текст, как и должно быть, НО отображает кнопку под панелью видео.
Firefox 9.0.1 по-прежнему отображает черный ящик, но также отображает кнопку.
Если бы это произошло только с одним браузером, я бы предположил, что это простая ошибка. Что меня озадачивает, так это то, что и в Chrome, и в Firefox ломаются одинаково.
Конечно, можно возразить, что оборачивать видео в para-теги не имеет смысла, но мне кажется, что это не должно вызывать проблем. Кроме того, мне интересно, какие другие обертки могут его сломать.
