Как сделать кроссбраузерным тег video на html5

Question

[Сергей Шилов]

Дорогие друзья. Недавно решил использовать именно эту технологию внедрения видео на сайт, но столкнулся с проблемой кроссбраузерности. Многие источники говорят, что запись должна иметь примерно следующий вид:

<video  preload autoplay loop>
		<source src="video.mp4" type="video/mp4" />
		<source src="video.webm" type="video/webm" />
		<source src="video.ogv" type="video/ogg" />
		<object style="width: 100% !important; height: auto !important;" type="application/x-shockwave-flash" data="fallback.swf">
			<param name="movie" value="fallback.swf" />
			<param name="flashvars" value="autostart=true&amp;file=video.flv" />
		</object>
	</video>

Этот код, вроде как(!), должен отображаться везде, mp4 должен идти первым в связи с багами 2010-го года на ipad, ipod и иже с ними. Но тем не менее сафари на любом устройстве дает мне вот такую штуку:

(верхний правый угол "живой", а фон(который и задумывался как видео) стоит картинкой.
Та же проблема и с андроидами(там просто картинка), хотя вроде делал фикс флешовый, как видно в коде.

Подскажите, как всю эту хурму сделать кроссбраузерной, кто уже это делал, в общем, поделитесь опытом.

Answer 1

[Андрей Чернышев]

Попробуйте кодеки прописать:

<video autoplay="autoplay" loop="loop" width="2560" height="1440" poster="video/01.png" class="back-img">
        <source src="video/01.webm" type="video/webm; codecs=&quot;vp8, vorbis&quot;">
        <source src="video/01.mp4" type=" video/mp4; codecs=&quot;theora, vorbis&quot;">
        <source src="video/01.ogv" type="video/ogg; codecs=&quot;theora, vorbis&quot;">
        <source src="video/01.mp4" type=" video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2, vorbis&quot;">
      </video>

Comments

[Сергей Шилов]

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

[Сергей Шилов]

Да и пробовал я, в общем-то, так делать, на забугорных ресурсах говорят, что это в принципе даже не обязательно, в смысле кодеки

Answer 2

[YuraCollins]

Если кто-то нашел ответ на этот вопрос, поделитесь пожалуйста!