Заставляем встроенное видео с YouTube проигрываться в HD

demosourse

У Vimeo есть хорошая поддержка HD видео в режиме встраивания, тогда как YouTube этим похвастаться не может - у него нет расширенной поддержки проигрывания своего встроенного HD видео в режиме 720p, 1080p и более. По крайней мере, об этом ничего не говорится в официальной документации. Но как бы то ни было - есть способ вывести HD контент YouTube на страницу, и сохранить адаптивность видео.

Для начала, скопируйте код для встраивания видео при помощи правого клика на нем. Полученный код будет для версии со стандартным разрешением. Ничего страшного, продолжаем, и вставляем код видео на страницу:

<iframe width="640" height="360" src="//youtube.com/embed/HiN6Ag5-DrU"frameborder="0" allowfullscreen></iframe>

Заметьте, что я упростил ссылку на видео для ясности, предполагая, что просматриваемый HTML будет находиться на сервере. Если вы оставите ваш код нетронутым - ничего страшного.

Если видео доступно в высоком разрешении, надо оставить для него достаточно пространства. Для этого можно удвоить предложенную высоту и ширину (для разрешения 1080p)

<iframe width="1280" height="720" src="//youtube.com/embed/HiN6Ag5-DrU" frameborder="0" allowfullscreen></iframe>

Даже если вы будете изменять размеры посредством CSS, атрибуты width и height удалять нельзя - YouTube опирается на эти размеры, и по ним выдает видео соответствующего разрешения. Если вы уберете эти атрибуты, то видео будет отображено в стандартном разрешении.

Добавьте параметр VQ в конец URL с нужным вам значением:

<iframe width="1280" height="720" src="//youtube.com/embed/HiN6Ag5-DrU?VQ=HD720" frameborder="0" allowfullscreen></iframe>

VQ задает качество видео (Video Quality). HD720 - разрешение, которого мы хотим добиться (для Full HD надо использовать значение HD1080). Если в URL уже присутствуют какие-то параметры, надо использовать символ & в качестве разделителя между параметрами:

?feature=player_detailpage&VQ=HD720

Теперь надо обернуть видео в контейнер. Я для этого использую div:

<div class="responsive-container">
<iframe width="1280" height="720" src="//youtube.com/embed/HiN6Ag5-DrU?VQ=HD720" frameborder="0" allowfullscreen></iframe>
</div>

Наконец, нужно сделать контейнер и видео в нем адаптивными. Это как раз самая хитрая часть, так как YouTube автоматически снизит разрешение видеопотока, так как он видит, что видео занимает меньший размер, чем должно:

.responsive-container {
position: relative;
padding-bottom: 53.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.responsive-container, .responsive-container iframe {
max-width:1280px;
max-height: 720px;
}
.responsive-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Вот и все: попробуйте проиграть видео на странице. Когда вы включите проигрывание заметьте, что Google делает кое-что особенно примечательное: YouTube сам адаптирует размер видеопотока под контейнер. Если вы уменьшите размер окна браузера и перезагрузите страницу, YouTube отдаст версию видео, чей размер будет вписываться в доступное пространство.

Подведем итоги:

  • если окно браузера или контейнер видео будут малого размера, YouTube автоматически отдаст видео в стандартном разрешении, но видео все же будет адаптивным при изменении размеров. Кроме Firefox качество видео не будет изменяться при уменьшении или увеличении размеров окна. Для большинства браузеров это имеет смысл, так как YouTube считает, что это полный размер окна устройства, на котором просматривается видео, и отдает наиболее подходящую для него версию видео.
  • Если изначально окно браузера имеет достаточные размеры, чтобы вместить HD версию видео, оно продолжит проигрываться в высоком разрешении при любых изменениях размера окна. Опять же, исключение составляет браузер Firefox - он переподключается к серверам и отображает видео в меньшем разрешении, если размеры окна становятся меньше размеров HD.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://demosthenes.info/blog/717/Force-Embedded-YouTube-Videos-To-Play-In-HD
Перевел: Станислав Протасевич
Урок создан: 28 Февраля 2014
Просмотров: 33139
Правила перепечатки


5 последних уроков рубрики "HTML и DHTML"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 1 Марта 2014 13:04
    shaddad2
    Не получилось, ребят. В демо уже не так.
    • 29 Августа 2014 10:22
      renics
      Не получилось и не получится, потому как дело в самом кадре. Кадрам снятым в низком разрешении для воспроизведения в высоком разрешении не хватает пикселей в изображении, то есть деталей и видео в результате будет размытым и в квадратиках. Для этого нужно соответствующее оборудование и программное обеспечение для искусственного добавления этих подробностей. Как в телевизорах 4К.
  • 2 Марта 2014 00:30
    Ygreec
    Надо исправить, добавить http
    • 15 Марта 2014 09:15
      golovore
      я 2 часа убил чтоб понять почему видео вообще не работает, а оказывается ютуб ссылку без протокола дает
^ Наверх ^