Iframe Embed'leri ve YouTube Player API ile Çalışma
Bir Bootstrap carousel'in son slaydında bir videonun otomatik oynatılması için apılacak en iyi şeyin, JavaScript kullanarak oynatıcıyı kontrol etmemizi sağlayan iFrame Player API'sini kullanarak bir YouTube oynatıcısını son slayta yerleştirmek olacaktır .
Video Iframe için YouTube'u Seçme
Videoları başka tarayıcılarda ve platformlarda çalışacak şekilde başka biçimlere dönüştürmek zorunda kalmamak için YouTube'un videolarımızı oynatmasına izin vermeyi seviyoruz. Yeni platformlar ortaya çıktığında bile, oynatmanın düzgün şekilde çalışmaya devam etmesini sağlama görevi YouTube'da.
Kitaplıktaki video gerektiren tüm bileşenler için, videoyu yalnızca görüntülendiğinde oluşturduğumuzdan emin oluyoruz (örneğin, bir kullanıcı bir modal açtığında veya belirli bir dönen slayta geldiğinde). Bunu, ek yüke neden olabilecek gereksiz indirmeleri önlemek için yapıyoruz.
Bootstrap 4 Carousel
Son slaytta otomatik olarak oynatılan videoyu eklemek için bir koşul ayarlamamız gerekiyor: Bunu nasıl yaptığımızı göstermek için, stil kılavuzunda başardıklarımızın kısaltılmış bir versiyonunu göstermek için resmi dokümanlardan aldığımız Bootstrap 4 Carousel örneğini kullanıyoruz . if (lastSlide) {createVideo}
İlk olarak, carouselin videonun oynatılması gereken son slayta ne zaman geçtiğini kontrol etmemiz gerekiyor. Bootstrap 4'te carousel işlevselliği <div class="carousel"> bir çift ortaya çıkarır. "Slayt örneği yöntemi çağrıldığında hemen harekete geçen" slide.bs.carousel'i kullanıyoruz .
Video slaydına geçiş yapıp yapmadığımızı kontrol ettiğimiz ilk kısım şuna benzer:
$('.carousel').on('slide.bs.carousel',function(e){
var prev = $(this).find('.active').index();
var next = $(e.relatedTarget).index();
var video = $('#video-player')[0];
var videoSlide = $('#video-player').closest('.carousel-item').index();
if (next === videoSlide) {
createVideo(video);
}
});
});
Bootstrap 4.0 Bileşenleri hala gerektirdiğinden burada jQuery'yi kullanıyoruz.
Ayrıca, videoSlide ile hangi slaydın #video-player çinde olduğunu kontrol eden bir değişken tanımladık . Bu şekilde, slayt sırası veya slayt sayısı değiştiğinde dinamiklik kazanmış olduk.
YouTube Player API belgelerindeki Başlarken örneğinden 2. Adım ve 3. Adımı içerecek olan videoyu oluşturma işlevini eklemek olacaktır. (createVideo() {})
Bu iki adımı biraz değiştirmemiz gerekiyor. İlk olarak, IFrame Player API kodunu eşzamansız olarak yükleyen kodu , sayfada zaten var olup olmadığını kontrol eden bir koşulda kontrol etmeliyiz .if (youtubeScript === null) {}
Bundan sonra, iframe ve YouTube oynatıcısını oluşturan işlevi ekleyeceğiz, ancak örnekteki gibi bir işlev bildirimi yerine, onu pencere nesnesine ekleyen, global olarak çağrılmasını sağlayan .window.onYouTubeIframeAPIReady = function(){} gibi bir ifade ile eklemek istiyoruz. createVideo() {} Burada olduğu gibi başka bir işlevin içine koymanız önemlidir , aksi takdirde düzgün şekilde tetiklenmez
createVideo() İşlevi aşağıdaki gibi görünmelidir:
var youtubeScriptId = 'youtube-api';
var youtubeScript = document.getElementById(youtubeScriptId);
var videoId = video.getAttribute('data-video-id');
if (youtubeScript === null) {
var tag = document.createElement('script');
var firstScript = document.getElementsByTagName('script')[0];
tag.src = 'https://www.youtube.com/iframe_api';
tag.id = youtubeScriptId;
firstScript.parentNode.insertBefore(tag, firstScript);
}
window.onYouTubeIframeAPIReady = function() {
window.player = new window.YT.Player(video, {
videoId: videoId,
playerVars: {
autoplay: 1,
modestbranding: 1,
rel: 0
}
});
}
}
Video, siz yeni bir slayda geçtikten sonra bile oynatılmaya devam eder ve video artık görüntülenmez, bu da kullanıcıları rahatsız eder. Video slaydından ne zaman ayrıldığımızı kontrol eden koşullar eklememiz gerekiyor. Player API, oynatma kontrolleri ve oynatıcı ayarları için kullanışlı işlevlere sahiptir ve gerektiğinde oynatılmakta olan videoyu duraklatmak için .player.pauseVideo() kullanabiliriz. Kullanıcı tekrar video slaydına geri dönerse, player.playVideo()
Videoyu duraklatmamız gerekip gerekmediğini kontrol etmek için, video slaydına gelip gelmediğimizi kontrol eden if (next === videoSlide) {} ifadeden sonra başka bir şey ekleyebilir ve ardından oynatıcının zaten yüklenip yüklenmediğini kontrol edebiliriz: if (typeof player !== 'undefined') {}. Eğer öyleyse, videoyu duraklatmalıyız.
Ayrıca, iframe zaten yüklendikten sonra kullanıcı video slaydına geri döndüğünde bir video oluşturup oluşturmamamız veya bir video oynatmamız arasında ayrım yapmalıyız. Bunun için şöyle bir şey yapabiliriz:
player.playVideo();
} else {
createVideo(video);
}
Sonuçta , yeni işlev şöyle görünmelidir:Toplamda, yeni işlev şöyle görünmelidir:
$('.carousel').on('slide.bs.carousel',function(e) {
var prev = $(this).find('.active').index();
var next = $(e.relatedTarget).index();
var video = $('#video-player')[0];
var videoSlide = $('#video-player').closest('.carousel-item').index();
if (next === videoSlide) {
if (video.tagName == 'IFRAME') {
player.playVideo();
} else {
createVideo(video);
}
} else {
if (typeof player !== 'undefined') {
player.pauseVideo();
}
}
});
});
See the Pen YouTube iFrame in Bootstrap 4 Carousel - After by Kim Sarabia (@KimSarabia) on CodePen.
Web uygulamalarına video yerleştirme sürecini basitleştirmek için YouTube IFrame Player API'sini seviyoruz. API'nin gönderebileceği çeşitli olay türleri vardır ve belgeler, olay dinleyicilerinin nasıl yazılacağını ve olaylara nasıl yanıt verileceğini gösterecek kadar iyi organize edilmiştir. Farklı JavaScript işlevleri kullanarak video oynatıcıyı kontrol etmenin kolay olduğunu ve onu ihtiyaçlarınıza göre özelleştirmenin zahmetsiz olduğunu gördüm.
Stil kılavuzunda nasıl çalıştığını görmek için burada oluşturduğumuz bileşen kitaplığına göz atabilirsiniz . Bir bileşen kitaplığı oluşturma süreci hakkında daha fazla bilgi edinmek istiyorsanız, ekibimizin başka bir üyesinin harika gönderisine göz atın.
Kaynak