Я нашел эту проблему с тегом видео 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 м отображает видео, игнорирует текст, как и положено, НО отображает кнопку под видеопанелью.
Firefox 9.0.1 отображает черный ящик, как и раньше, но также отображает кнопку.
Если бы это случилось только с одним браузером, я бы просто предположил, что это простая ошибка. Что меня удивляет, так это то, что и в Chrome, и в Firefox ломаются одинаково.
Конечно, вы можете утверждать, что перенос видео в пара-теги не имеет смысла, но мне кажется, что это не должно вызывать проблем. Кроме того, мне интересно, что другие обертки могут сломать его.
