Использование видео h264/mp4 в качестве фона для веб-сайта

Мой клиент хочет иметь видео в формате mp4 в качестве видеофона для всего сайта. Это уже будет лаваш, чтобы убедиться, что это работает в нашей CMS, потому что они не хотят, чтобы видео перезагружалось при переходе на другую страницу.

Файл, который они мне прислали, имеет разрешение 1080p и прибл. Размер 100 МБ, продолжительность 2 минуты.

Есть ли способ изменить размер/масштаб видео и использовать его в качестве фона видео на веб-сайте html5?

Должен ли я сказать клиенту, что он не будет удобным для пользователя, будет потреблять пропускную способность и, безусловно, увеличит затраты на разработку.

Как правило, мы не создаем Flash-сайты в нашем агентстве, так что это не вариант.


person Simon    schedule 02.01.2013    source источник
comment
Я рекомендую вам бесплатный конвертер видео. Вы можете изменить разрешение и конвертировать видеофайл в другой формат! Я надеюсь, что это поможет вам!   -  person Vukašin Manojlović    schedule 02.01.2013


Ответы (3)


Вы можете использовать тег html5 <video>, чтобы воспроизвести это видео и выполнить остальную часть навигации через AJAX.

Но вам нужно будет предоставить разные форматы видео для браузеров, которые не поддерживают h264, таких как Opera. Я рекомендую webm в качестве альтернативы.

Вам нужно будет уменьшить размер видео, я думаю, как по качеству, так и по разрешению.

Для браузеров эпохи pre-html5 я бы рекомендовал статическое изображение;)

Все-в-всем. Решением, совместимым с разными браузерами, будет PITA. В современных браузерах есть методы, которые позволяют такое решение. Я думаю, это возможно, но вам придется предоставить запасной вариант для ~ 5% пользователей с несовместимыми браузерами или слишком медленными процессорами!

person Nippey    schedule 02.01.2013

Чтобы добиться совместимости с браузером, вам также придется конвертировать видео в Ogg Theora (это уменьшит его размер, но оно будет воспроизводиться только в WebKit/Mozilla). Видео HTML5 поддерживает буферизацию, но по-разному в разных браузерах. WebKit, например, пытается предварительно буферизовать все видео, IE предварительно буферизует фрагмент фиксированного размера за раз и т. д. Таким образом, это будет работать по-разному в разных браузерах.

person Konstantin Dinev    schedule 02.01.2013

Полноэкранное видео для веб-сайта: посмотрите исходный код www.gossdekort.com Вы даже можете добавить меню над видео

person San    schedule 06.01.2013