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

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

<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 и иже с ними. Но тем не менее сафари на любом устройстве дает мне вот такую штуку:
QgmJSHeODYg.jpg
(верхний правый угол "живой", а фон(который и задумывался как видео) стоит картинкой.
Та же проблема и с андроидами(там просто картинка), хотя вроде делал фикс флешовый, как видно в коде.

Подскажите, как всю эту хурму сделать кроссбраузерной, кто уже это делал, в общем, поделитесь опытом.
  • Вопрос задан
  • 4953 просмотра
Пригласить эксперта
Ответы на вопрос 1
delch
@delch
Frontend developer
Попробуйте кодеки прописать:

<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>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы