Есть область для встроенного видео. При загрузке страницы видео на страницу не должно загружаться, вместо этого стоит заглушка, по клику на заглушку, вместо нее появляется внедренное на страницу видео (YouTube). Каким образом реализовать?
Оборачивай урл видео в скрипт, который вставит плеер по клику.
<div id="videoPlaceholder">
<img src="/img/placeholder.jpg" />
</div>
<script>
$('#videoPlaceholder').onclick(function (event) {
var videoSrc = 'https://www.youtube.com/embed/_OzWxKSm1rU';
event.preventDefault();
$(this).html('<iframe width="560" height="315" src="' + videoSrc + '" frameborder="0" allowfullscreen></iframe>')
})
</script>
UPD. Мне не нравится мой пример кода. Обновленная версия выглядит так:
<div>
<img id="videoPlaceholder" src="/img/placeholder.jpg" />
</div>
<script>
$('#videoPlaceholder').onclick(function (event) {
var videoSrc = 'https://www.youtube.com/embed/_OzWxKSm1rU';
$(this).reaplceWith('<iframe width="560" height="315" src="' + videoSrc + '" frameborder="0" allowfullscreen></iframe>')
})
В этом случае обработчик событий не будет мешать работе работе с плеером, + более корректно заменяю элемент с помощью метода replaceWith. Метод replaceWith должен корректно убрать обработчик клика, высвободив память (совсем небольшое количество, тем не менее этот хороший профилактический ход).
1 лайк
Что-то не хочет появляться на странице видео, сам айфрейм появляется в доме, а вот содержимого нет.
Решил проблему так:
<a href="https://www.youtube.com/watch?v=lW4uzJp6uIg" class="video__a">
<img src="img/video.jpg" height="460" width="818" alt="" class="video__img">
<iframe width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>
</a>
$('.video__a').on('click', function(e) {
e.preventDefault();
var self = $(this);
var videoSrc = self.attr('href');
var videoId = videoSrc.substr(videoSrc.length - 11) + '?rel=0&autoplay=1';
self.find('img').css('z-index', '0');
self.find('iframe').attr('src', 'https://www.youtube.com/embed/' + videoId);
});
По клику на ссылку с заглушкой, заглушка убирается и сразу начинается воспроизведение. У заглушки изначально стоит z-index: 2, чтобы айфрейм не перекрывал изображение.
А теперь странный баг в иешечке, причем в 11-ой тоже.
Кликаю по заглушке, и в айфрейм благополучно вставляется ссылка на видео и видео начинает проигрываться, потом, если я просто перезагружу браузер без очистки кэша, то через определенное время, секунд 10, видео в айфрейме начинает самопроизвольно воспроизводиться. Если перезагрузить страницу с очисткой кэша, такого естественно не происходит. Чудеса :)
Прикольная история. Я бы попробовал добавлять уникальный параметр к урлу видео, возможно это заставит браузер не кешировать видео из ифрейма. Или альтернативно попробовал бы поискать другие пути вставки видео (не через ифрейм).
добавлением уникального параметра сразу после параметра для автовоспроизведения ?rel=0&autoplay=1&rand=0.0808613826520741 для ие не срабатывает. Он то кэширует до события клика. Т.е. любой урл, который закэшировался с параметром автоплея, будет после перезагрузки страницы воспроизводиться до следующего клика по заглушке.
После загрузки страницы, перед событием клика тупо просто делаю src пустым для всех и работает.
$('.video__a').find('iframe').attr('src', '');
Тут еще один странный бак всплыл в ие))
Почему-то по клику на плеере срабатывает дефолтное событие по ссылке (у меня в href ссылки хранится url на ютуб-видео, чтобы если какие-то проблемы c js, перенаправить пользователя на ютуб с этим видео). То есть event.preventDefault(); не срабатывает в ие второй раз, когда айфрейм показался и видео начало проигрываться.
Если выставить в url autoplay=0, то youtube и не будет грузить само видео, только превью. Видео потянется только после нажатия play.
мне ну нужно ничего грузить с ютуба, даже картинки, чтобы не нагружать первоначальную загрузку страницы. Только по клику на ссылку с картинкой-заглушкой, нужно начинать грузить видео и воспроизводить. Поэтому и такое решение.
Лучше навешивай обработчик подмены плейсхолдера ифремом на элемент плейсхолдера (чтобы избежать повторного срабатывания обработчика). Я так сделал в поправленной версии примера в первом комменте.
Так у меня же заглушка в ссылку обернута и айфрейм в ссылку обернутым получается, тогда в ие по клику на плеер в попытке остановить или прокрутить видео, будет срабатывать стандартный href и перекидывать на страницу ютуба с этим видео, у меня ведь адрес на видео в href хранится, или я недопонял комментарий?
Ты все верно описываешь. Я хотел сказать что ту ситуацию, что ты описываешь надо предусмотреть. Я предусмотрел ее в своем примере с помощью навешивания обработчика только на тот элемент, который заменяется на видео. И следовательно автоматически разруливается проблема с последующими кликами.
Привет! Я решил для своих задач благодаря данной статье http://www.sitehere.ru/uskorit-zagruzku-stranic-sajta все удачно.
Исходник по теме здесь: https://www.sitepoint.com/faster-youtube-embeds-javascript/
Проблема решения предложенной здесь была у меня в том, что подгружались все видео и капец как долго. Классы стилей:
<style>
.ytube {
width: 90%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('arrow.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
.youtube {
background-position: center;
background-repeat: no-repeat;
position: relative;
display: inline-block;
overflow: hidden;
transition: all 200ms ease-out;
cursor: pointer;
}
</style>
Оформление ссылки я сделал в таком формате:
<div class="ytube"> <!--в css в этом стиле задаем оформление блока-->
<div class="youtube" id="VKgEOuCOdLw" data-params="autoplay=1&autohide=1&rel=0&start=726&end=1250"> <!--здесь задаем параметры для воспроизведения-->
<a style="font-weight: bold; font-size: 18px;">Каков временной лаг для разворота общества и страны в жизнеспособное русло с новыми ценностями?</a> <!--а здесь текст в теге а что бы кликабельно было-->
</div></div>
В самом коде JS я убрал подмену изображения с исходника, и поставил фиксированный размер подгружаемого видео:
<script>
'use strict';
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
r(function(){
if (!document.getElementsByClassName) {
// Поддержка IE8
var getElementsByClassName = function(node, classname) {
var a = [];
var re = new RegExp('(^| )'+classname+'( |$)');
var els = node.getElementsByTagName("*");
for(var i=0,j=els.length; i<j; i++)
if(re.test(els[i].className))a.push(els[i]);
return a;
}
var videos = getElementsByClassName(document.body,"youtube");
} else {
var videos = document.getElementsByClassName("youtube");
}
var nb_videos = videos.length;
for (var i=0; i<nb_videos; i++) {
videos[i].onclick = function() {
// Создаем iFrame и сразу начинаем проигрывать видео, т.е. атрибут autoplay у видео в значении 1
var iframe = document.createElement("iframe");
var iframe_url = "https://www.youtube.com/embed/" + this.id + "?autoplay=1&autohide=1";
if (this.getAttribute("data-params")) iframe_url+='&'+this.getAttribute("data-params");
iframe.setAttribute("src",iframe_url);
iframe.setAttribute("frameborder",'0');
// Высота и ширина iFrame будет как у элемента-родителя
iframe.style.width = "550px";
iframe.style.height = "281px";
// Заменяем начальный текст на iFrame
this.parentNode.replaceChild(iframe, this);
}
}
});
</script>
Что классно, можно все разместить в одном html файле и не надо подгружать дополнительно никаких библиотек=)
2 лайка