html5 видео запасной совет (без вспышки)

Question

Я ищу творческий способ заменить видео HTML5 изображением при некоторых обстоятельствах.Не хочу иметь дело со вспышкой или чем-то подобным, чтобы заставить видео работать ... лучше дать им изображение.

Дайте им изображение, если:

1. Если настольный браузер не поддерживает видео HTML5

2. Если пользователь мобильный

Кажется простым ... особенно с помощью Modernizr дляcss помечает display:none;, если видео не поддерживается ... так вот предостережение: видео HTML5 от края до края и центрировано на экране с помощью JavaScript, и я хотел бы, чтобы изображение имело такое же поведение.

Моя первоначальная мысль была простой: атрибут плаката.Работает на iPad и iPhone 3 / 3gs, но воспроизводится на iPhone 4. Кроме того, не работает на IE, который, по-видимому, говорит: «Я не знаю, что это такое» и даже не беспокоится о постере..

У меня есть тест, настроенный на http://kzmnt.com/test/

Ждем ваших советов!

Answer 1

Вы можете проверить, поддерживает ли HTML5-видео следующее:

function supports_h264_baseline_video() {
 if (!supports_video()) { return false; }
 var v = document.createElement("video");
 return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}

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

Код выше http://diveintohtml5.ep.io/detect.html#video-formats.

Answer 2

Использовал медиа-запрос после 1100 пикселей и заменял его изображением, используя размер фона CSS, установленный для покрытия!