<p>Яндекс только при регистрации дает в своем облачном хранилище &laquo;Яндекс Диск&raquo; бесплатные 10 Гб под файлы, при этом есть возможность просматривать видео онлайн, не загружая его на компьютер, в готовом плеере. Вот я и задумался: а нельзя ли этот «облачный» плеер Яндекса вставить на сайт или в пост блога?..<br />
Вставить получилось, а будет ли этот «псевдострим» видео из Яндекс Диска работать постоянно, а не только какое-то время, проверим. Как вставил видео, загруженное в облачное хранилище Яндекса, с плеером от самого Яндекса, написано ниже.<br />
<span id="more-1032"></span></p>
<h3><strong>Вставка на сайт видеоплеера из Яндекс Диска</strong></h3>
<p>Для примера взял видеоклип “Roar” в исполнении Кэти Перри, «американской певицы, композитора, автора песен, актрисы, а также посол доброй воли ООН…» (Википедия).</p>
<p><img class="alignnone size-full wp-image-1034" src="http://oleksite.ru/wp-content/uploads/2013/06/96095d3faef18417f85755bf39764152.jpg" alt="Вставка на сайт видеоплеера из Яндекс Диска" width="560" height="334" title="Вставка на сайт видеоплеера из Яндекс Диска" /></p>
<p>Видео в формате mp4 из Youtube скачал, как обычно делаю, в браузере Opera с помощью ссылки &laquo;скачать&raquo;, которую вставляет на страницу скрипт сервиса savefrom.net. Получилось многовато для примера&nbsp;&mdash; более 90 Мб, но… красота требует жертв.</p>
<p>После загрузки видео в хранилище Яндекс Диска (есть отдельная страница и ссылка на &laquo;Диск&raquo; прямо из почты), выбираем нужный файл в списке.</p>
<p><img class="alignnone size-full wp-image-1035" src="http://oleksite.ru/wp-content/uploads/2013/06/f59a6d1663ca415e90eb70470576b2db.jpg" alt="Вставка на сайт видеоплеера из Яндекс Диска" width="560" height="302" title="Вставка на сайт видеоплеера из Яндекс Диска" /></p>
<p>После выбора файла справа на странице появляется превью видео и возможность &laquo;Поделиться ссылкой&raquo;&nbsp;&mdash; надо скопировать эту ссылку и перейти по ней.</p>
<p><img class="alignnone size-full wp-image-1036" src="http://oleksite.ru/wp-content/uploads/2013/06/82d7544f6a2c9054e73dd173d9e65246.jpg" alt="Вставка на сайт видеоплеера из Яндекс Диска" width="560" height="374" title="Вставка на сайт видеоплеера из Яндекс Диска" /></p>
<p>По ссылке для &laquo;расшаривания&raquo; видео на Яндекс Диске откроется такая страница с плеером:</p>
<p><img class="alignnone size-full wp-image-1037" src="http://oleksite.ru/wp-content/uploads/2013/06/a75f857ff8685b2626ed5b90aed009da.jpg" alt="Вставка на сайт видеоплеера из Яндекс Диска" width="560" height="280" title="Вставка на сайт видеоплеера из Яндекс Диска" /></p>
<p>Для копирования кода использую браузер Google Chrome: какая ирония&nbsp;&mdash; Яндекс делится с Гуглом. Нажимаю возле видеоплеера правой кнопкой мыши и выбираю &laquo;Просмотр кода элемента&raquo;.</p>
<p><img class="alignnone size-full wp-image-1038" src="http://oleksite.ru/wp-content/uploads/2013/06/c72d8dbb9c0676d88fc9ff6a6c2f3cfb.jpg" alt="Вставка на сайт видеоплеера из Яндекс Диска" width="302" height="35" title="Вставка на сайт видеоплеера из Яндекс Диска" /></p>
<p>Теперь нужно скопировать код самого видеоплеера для файла mp4, загруженного на Диск, облачное хранилище Яндекса. Код находится в контейнере (div), отмеченном классами &laquo;content&raquo; и &laquo;content_file&raquo;.</p>
<p><img class="alignnone size-full wp-image-1039" src="http://oleksite.ru/wp-content/uploads/2013/06/b8a0e51e532be603c6ac862e74d717c6.jpg" alt="Вставка на сайт видеоплеера из Яндекс Диска" width="560" height="212" title="Вставка на сайт видеоплеера из Яндекс Диска" /></p>
<p>Сам код видео на Диске Яндекса находится между тегами object. Нужно выбрать этот участок кода и нажать правой кнопкой мыши, чтобы указать &laquo;Copy as HTML&raquo; (&laquo;Копировать как HTML&raquo;).</p>
<p><img class="alignnone size-full wp-image-1040" src="http://oleksite.ru/wp-content/uploads/2013/06/8aa2b498b45a71a40fde223a86315391.jpg" alt="Вставка на сайт видеоплеера из Яндекс Диска" width="185" height="70" title="Вставка на сайт видеоплеера из Яндекс Диска" /></p>
<p>Скопированный код можно смело вставлять на сайт. Но надо иметь в виду, что в нем указаны размеры 100% ширины и столько же высоты видеоплеера. Конечно, это не подходит. Поэтому нужно либо заключить код в контейнер (блок) &laquo;правильного&raquo; размера, либо указать подходящие для сайта или блога размеры самостоятельно.</p>
<p><img class="alignnone size-full wp-image-1041" src="http://oleksite.ru/wp-content/uploads/2013/06/2507b6d4bc5bf9238ca25ba5d05cb1c0.jpg" alt="Вставка на сайт видеоплеера из Яндекс Диска" width="245" height="81" title="Вставка на сайт видеоплеера из Яндекс Диска" /></p>
<p>Плеер с видео, хранящегося на Яндекс Диске, после вставки в блог выглядит примерно так:</p>
<p><strong>Katy Perry&nbsp;&mdash; Roar</strong></p>
<p><object id="AHFKw-2u-x1_-kZtroAMint5Bzyr8sKghyg1xh1FRoqGyp_odxrKhupE-Z6l_Ux6ZERCeL9_2dB-O2_Cur4nofxdlCl4wQYyXf6uYcEWocBbteOKt2bcNIQpeHX-AMfxncCIHTe3wG2wV2sM8-G8VXynvlanUkY29h6IQiHhmDIK35mZ5_eGpD1JeNeusr__byM6U3fz5QrgSQt4XUuARqXWN90lYx_EcQH_tqJL5u4Vm7z9BO5Pv3QiQHo_-Pm9T3vk8l2vcR1en1Ejuu-vi7jJJ9X6QXG2jDGyBk7x5yWV0fA0_uFfmXxiHmfQKCSEHvmTuEFmhzjsmKaNgtLb3ouiDL55p0znDe_VWIkdzzgSOpYyHE9d_DdJpWowYZ_I_CXnnA5hKIzvv5Upugl38GG9hO0aKVVP9sqKTZxplw-L9B3DUdbuNx7GBpJi5jGCxTEMeWfJkUywnXPOgU1qOZ-vs48blDFBwgNVygn70hlaZUAutkrwS8Idx8MztmQoMPy5ovPx87l35ydhxR0XEsOPZN5rP8Pv5HV2nPSMrnjszn6wSAFJCncUE6HPH7iaMgoBPjGa2DA1Fuh-4lBNdVQDWipFeyUXTobtVmGpyLKnlum--bE0j2GT_ior6GfFomv8knmgpsp-XeHVskyzG2VQ7CgcbnRaTHlBT9Ae-_icwDfUsafhY3TSvIUT0w8TKVaf4hHnpZKzMW8bcLB3HgvbQmXnwjvVUOrOjLFnp5epM2HmEDqZxQIHfyOZLDSaa4lSKwltr5gFAMwJt_eN4EF0YIRFj8JJEg-ZR_HSohHCHYsNrd1lEJWfDmyaGc-WniAmDerlDM5h0m8qbzd4ovp-W5-jbIgmVYNrGEzks0xvGh0kgEWmhEgQMsi_BZ0IPiRa7RZLDM234yhyUfLcPookCf8JkWw1lhc8d7m1YEUi4jEM2rABM_MeV0Vj3QXULh0DYzgghW7HQoW7N0bb9vtyIbPauFf4oCMtats4S_ZN6_ClDJoe6e2ufyZvrqs60hAluQlLXTR-JoKJ3156VrQtGgzFpv3cqaY-B6ciH6DnZ3PzK_ELiwf6-F4riuG9kIe13vrIB-NEgJg6WcSanciWFef5UgjV4g" style="visibility: visible;" width="560" height="314" type="application/x-shockwave-flash" class="sheet__video__embed" data="https://yastatic.net/swf/diskvideoplayer/13_101/v-13.101-96/disk-videoplayer.swf"><param name="allowScriptAccess" value="always"/><param name="allowfullscreen" value="true"/><param name="hasPriority" value="true"/><param name="wmode" value="opaque"/><param name="flashvars" value="stream-slb-url-prefix=https%3A%2F%2Fvideo.disk.yandex.net&amp;stream-id=AHFKw-2u-x1_-kZtroAMint5Bzyr8sKghyg1xh1FRoqGyp_odxrKhupE-Z6l_Ux6ZERCeL9_2dB-O2_Cur4nofxdlCl4wQYyXf6uYcEWocBbteOKt2bcNIQpeHX-AMfxncCIHTe3wG2wV2sM8-G8VXynvlanUkY29h6IQiHhmDIK35mZ5_eGpD1JeNeusr__byM6U3fz5QrgSQt4XUuARqXWN90lYx_EcQH_tqJL5u4Vm7z9BO5Pv3QiQHo_-Pm9T3vk8l2vcR1en1Ejuu-vi7jJJ9X6QXG2jDGyBk7x5yWV0fA0_uFfmXxiHmfQKCSEHvmTuEFmhzjsmKaNgtLb3ouiDL55p0znDe_VWIkdzzgSOpYyHE9d_DdJpWowYZ_I_CXnnA5hKIzvv5Upugl38GG9hO0aKVVP9sqKTZxplw-L9B3DUdbuNx7GBpJi5jGCxTEMeWfJkUywnXPOgU1qOZ-vs48blDFBwgNVygn70hlaZUAutkrwS8Idx8MztmQoMPy5ovPx87l35ydhxR0XEsOPZN5rP8Pv5HV2nPSMrnjszn6wSAFJCncUE6HPH7iaMgoBPjGa2DA1Fuh-4lBNdVQDWipFeyUXTobtVmGpyLKnlum--bE0j2GT_ior6GfFomv8knmgpsp-XeHVskyzG2VQ7CgcbnRaTHlBT9Ae-_icwDfUsafhY3TSvIUT0w8TKVaf4hHnpZKzMW8bcLB3HgvbQmXnwjvVUOrOjLFnp5epM2HmEDqZxQIHfyOZLDSaa4lSKwltr5gFAMwJt_eN4EF0YIRFj8JJEg-ZR_HSohHCHYsNrd1lEJWfDmyaGc-WniAmDerlDM5h0m8qbzd4ovp-W5-jbIgmVYNrGEzks0xvGh0kgEWmhEgQMsi_BZ0IPiRa7RZLDM234yhyUfLcPookCf8JkWw1lhc8d7m1YEUi4jEM2rABM_MeV0Vj3QXULh0DYzgghW7HQoW7N0bb9vtyIbPauFf4oCMtats4S_ZN6_ClDJoe6e2ufyZvrqs60hAluQlLXTR-JoKJ3156VrQtGgzFpv3cqaY-B6ciH6DnZ3PzK_ELiwf6-F4riuG9kIe13vrIB-NEgJg6WcSanciWFef5UgjV4g&amp;lang=ru&amp;preview-url=https%3A%2F%2Fdownloader.disk.yandex.ru%2Fpreview%2Ff9b36ba5c9d417574ef3b5fd3907b422%2Fmpfs%2FwugERlF5aVTVEPDaV7DO-4u3hEjb8W1gBJWU9WDWPOh5Nm1V80hK51vW9oPDx96v4-Kaov98rxEUPDB8y_I1_A%253D%253D%3Fuid%3D0%26filename%3DKatyPerryRoarOfficialmp4%26disposition%3Dinline%26hash%3D%26limit%3D0%26content_type%3Dimage%252Fjpeg%26size%3DL%26crop%3D0"/></object></p>
" data-medium-file="" data-large-file="" class="alignnone size-full wp-image-1784" src="http://oleksite.ru/wp-content/uploads/2013/06/bfa5874dc0a1e59f7b4c1ef77e935880.jpg" alt="Простая фотогалерея (CSS) без использования java скриптов" width="560" height="315" srcset="http://oleksite.ru/wp-content/uploads/2013/06/bfa5874dc0a1e59f7b4c1ef77e935880.jpg 560w, http://blogmann.ru/wp-content/uploads/2014/11/Prostaya-galereya-fotografiy-bez-Java-skriptov-50x28.jpg 50w" sizes="(max-width: 560px) 100vw, 560px" title="Простая фотогалерея (CSS) без использования java скриптов" />

Это интересно:  Установка максимальной ширины картинки на сайте uCoz

Интересное решение для простой фотогалереи, в которой не используются java-скрипты – всё работает на простых трюках со стилями блоков (CSS).

Простая галерея фотографий без Java-скриптов

В основе работы такой галереи лежит принцип замены изображения, которое показано в определенной части страницы. Здесь применяется небольшой трюк с анкором («якорем») в свойствах тега ссылки <a>.

Собственно галерея состоит из двух блоков: слева эскизы все картинок галереи, справа – изображение, которые «активно» в данный момент и показано в полном размере.

Пример, который описывается в этом посте, можно посмотреть по ссылке. Также там в исходном коде всё прописано понятно и без чего-то лишнего.

Фотогалерея без использования java-скрипта будет работать, когда прописаны уникальные имена <name> для каждого якоря, который указывает на определенную картинку (типа, <pic1>, <pic2> и так далее).

Создание галереи фотографий на CSS

Нам надо подготовить эскизы (preview) для каждой фотографии, которая будет размещена в галереи без java-cкриптов. Собственно HTML-код блоков с картинками выглядит примерно так:

Названия блоков: gallery – галерея, nav – навигация, images – полноразмерные фото, остальные атрибуты уникальны для каждой картинки и ее эскизу (картинки – image1…5.jpg, эскизы – preview1…5.jpg).

Это интересно:  Google Chrome вырвался вперед. Самый популярный браузер в мире

Чтобы галерея фотографий без java-скриптов работала, нужны правильные параметры каскадных стилей (CSS). Для нашего примера это выглядит примерно так.

Правый блок с большими картинками должен иметь ширину самой большой картинки, понятное дело. Для него устанавливаются атрибут overflow:hidden. Фотографии-ссылки находятся внутри этого блока (см. выше).

Маленькие картинки являются ссылками на соответствующие им большие фотографии.

При нажатии на эскиз нужная картинка появится в правом блоке. Собственно говоря, происходит смещение фона блока на соответствующую якорю позицию.

CSS-код для фотогалереи

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Самое интересное в блоге

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

3 × четыре =