Полноэкранный видеоролик - <video> vs YouTube/Vimeo- <iframe>?

Question

Я создаю веб-сайт с полноэкранным фоном видео для секции заголовка. Я бы хотел, чтобы сайт загружался и выполнялся как можно быстрее и плавно, поэтому я не знаю, может ли быть проблема, что на домашней странице загружается 50-100 МБ видео до запуска (хотя, вероятно, это будет поток видео , поскольку он загружается, но я ничего не знаю о том, как это работает).

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

Вторая часть этого вопроса заключается в том, какой способ лучше всего реализовать этот видеоролик на моем сайте клиентов? Использовать тег HTML5 <video>? (Находится в этом link):

<video style="width: 1776px; height: 1009px; margin-left: -98px; 
margin-top: 0px;" id="videobcg" class="fill" width="1580" height="898" 
preload="auto" autoplay="true" loop="loop" muted="muted" volume="0" 
poster="url-to-poster-picture.jpg"> 
    <source src="sites/default/files/videos/basic_home.mp4" type="video/mp4"> 
    <source src="sites/default/files/videos/basic_home.webm" type="video/webm"> 
    Sorry, your browser does not support HTML5 video. 
</video> 

... или это использовать YouTube или Vimeo, вставив его в качестве ? Я предполагаю, что реальный вопрос: если моя хостинговая компания (One.com) предложит мне больше пропускной способности, чем YouTube или Vimeo? Или, если есть рекомендуемый способ сделать это?

И если можно сделать комментарий о том, что лучше для SEO-целей, тогда это тоже будет оценено.

Answer 1

Вы определенно должны загрузить видео на Youtube и использовать плагин для отображения на ваш сайт (трубчатый.JS, например), по следующим причинам:

1) YouTube оленьей кожи нужен браузер, чтобы загрузить видео в полном объеме, это кэширование мелких деталей, что делает его доступным почти сразу

2) YouTube масштабирует разрешение видео в вашей полосе пропускания (если у вас низкая пропускная способность, видео будет отображаться в низком качестве, но время ожидания для начала воспроизведения видео будет оптимальным)

Я настоятельно рекомендую использовать плагин, такой как трубчатый (http://www.seanmccambridge.com/tubular/))

Я пробовал многие из них, bigvideo, masterslider, и т. д., но для меня трубчатый - самый простой для интеграции, не глючит, и самое важное, на мой взгляд, вы можете добавить слои текста/элементов/ссылок поверх видео.

Вы можете посмотреть на следующем веб-сайте, который я сделал для клиента, используя трубчатую: www.avocats-huertas.com

Answer 2

Если это нормально для вас, чтобы использовать JQuery вы можете попробовать http://dfcb.github.io/BigVideo.js/ или http://vodkabears.github.io/vide/

О других вопросах вопрос:

• это не является хорошей идеей, чтобы стрелять 50-100MB видео в лицом плохого пользователя, особенно если он находится на мобильном подключении к данным
• YouTube и Vimeo определенно имеют лучшую пропускную способность, чем ваша хостинговая компания
• , даже если вы не используете плагин jquery, используя if отросток на фоне видео не будет работать хорошо (если вообще)
• Я не настоящий эксперт, но я не могу получить точку SEO для фонового видео

Answer 3

Вот чистым CSS и HTML-решением, которое я рекомендую, поскольку iframes занимают немного больше времени для загрузки, а google хотят, чтобы страницы загружались быстро (влияет на SEO!).

<video id="bgvid" autoplay loop poster="vid.jpg"> 
    <source src="vid.webm" type="video/webm"> 
    <source src="vid.mp4" type="video/mp4"> 
</video> 

CSS:

video#bgvid { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -100; 
    -webkit-transform: translateX(-50%) translateY(-50%); 
    transform: translateX(-50%) translateY(-50%); 
    background: url(vid.jpg) no-repeat; 
    background-size: cover; 
} 

Здесь также медиа-запрос для мобильных устройств:

@media screen and (max-device-width: 800px) { 
    html { 
     background: url(vid.jpg) #000 no-repeat center center fixed; 
    } 
    #bgvid { 
     display: none; 
    } 
}