Я хочу, чтобы ленивый загружать видео youtube с помощью iframe API. то есть. загружайте только изображение плаката в начале и, когда пользователь нажимает на него, загружает только фактическое изображение и его содержимое.Lazy Загрузка видео youtube из iframe API
Наконец он работал, ниже код в angularJS.
HTML
<div data-ng-repeat="video in videoIds track by $index">
<div id="uniQueId" ng-click="playVideo(video, 'player' + $index)">
<div class="video-play-button"></div>
</div>
</div>
JS
$scope.playVideo = function(videoId, id) {
$scope.players[id] = new YT.Player(id, {
videoId: videoId,
width: '400',
height: '300',
playerVars: { 'autoplay': 1 },
events: {
'onStateChange': $scope.onPlayerStateChange
}
});
};
он дает 'YT не определен' errot – lakshay
Большая часть взятого из этого раздела взята из раздела youtube page.
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>Этот пример загружает видео, когда он будет готов.
Итак, мы немного изменили его, чтобы добавить в изображение заполнителя и щелкнуть скрыть изображение и воспроизвести видео.
Wrap тег (этап 2) в функции
function loadYT() {
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
Добавить изображение Проверьте this question для получения более подробной информации о размерах.
<div id="placeholder">
<img src="http://img.youtube.com/vi/M7lc1UVf-VE/sddefault.jpg" />
</div>
Затем по щелчку скрыть замещающее изображение и загрузить проигрыватель
document.getElementById("placeholder").addEventListener("click", function(){
this.style.display = 'none';
loadYT()
});
Окончательный результат можно увидеть ниже.
<div id="placeholder">
<img src="http://img.youtube.com/vi/M7lc1UVf-VE/sddefault.jpg" />
</div>
</div>
<div id="player"></div>
<script>
document.getElementById("placeholder").addEventListener("click", function(){
this.style.display = 'none';
loadYT()
});
// 2. This code loads the IFrame Player API code asynchronously.
function loadYT() {
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>Как насчет этого?
HTML
<div class="wrapper">
<ul>
<li><a title="video 1" data-video="http://www.youtube.com/embed/X0DeIqJm4vM">Motherlover</a></li>
<li><a title="video 2" data-video="http://www.youtube.com/embed/GI6CfKcMhjY">Jack Sparrow</a></li>
<li><a title="video 3" data-video="http://www.youtube.com/embed/TcK0MYgnHjo">Ras trent</a></li>
<li><a title="video 4" data-video="http://www.youtube.com/embed/8yvEYKRF5IA">Boombox</a></li>
<li><a title="video 5" data-video="http://www.youtube.com/embed/6_W_xLWtNa0">Shy Ronnie 2</a></li>
</ul>
<iframe id="videoArea" width="350" height="250" src="http://www.youtube.com/embed/X0DeIqJm4vM" frameborder="0" allowfullscreen></iframe>
</div>
JS
var initVideos = function() {
var videoArea = $("#videoArea"),
divs = $("ul li a"); // or some other data format
// bind your hover event to the divs
divs.click(function(ev) {
ev.preventDefault();
videoArea.prop("src", $(this).data('video'));
divs.removeClass("active");
$(this).addClass("active");
});
};
// once the DOM is ready
$(function() {
initVideos();
});
Почему загрузить видео на клик, а не только тогда, когда пользователь видит их? Используйте jQuery.Lazy, и вам больше нечего делать.:)
Добавьте плагин на страницу: (вам необходимо JQuery или зепто, а)
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.lazy/1.7.1/jquery.lazy.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.lazy/1.7.1/plugins/jquery.lazy.youtube.min.js"></script>
Готовьте IFrames: (Примечание data-loader и data-src атрибуты)
<iframe data-loader="youtube" data-src="1AYGnw6MwFM" width="560" height="315"></iframe>
И начните использовать Lazy:
$(function() {
$("iframe[data-src]").Lazy();
});
Вот и все! IFrames будет загружаться всякий раз, когда пользователь достигает их путем прокрутки. Дополнительные сведения here.
Прямо сейчас я хочу немного еды, но сначала я должен ее выследить. , например. предоставить некоторый код вещей, которые вы пробовали. –
Вы имеете в виду что-то вроде этого? http://www.newmediacampaigns.com/blog/lazyytjs-a-jquery-plugin-to-lazy-load-youtube-videos – Atticweb
Я смог получить его рабочий ответ в разделе комментариев. – madhuhc