यूट्यूब वीडियो फ्लेक्सस्लाइडर में नहीं खेल रहे हैं

यूट्यूब वीडियो मेरे flexslider गैलरी में नहीं खेल रहे हैं? क्या कोई ज्ञात मुद्दा है, मैंने बिना किसी जवाब के काफी व्यापक खोज की है। मुझे नहीं लगता कि मुझे अपना कोई भी कोड प्रदान करने की ज़रूरत है, यह छवियों और वीडियो की सूची के साथ एक सीधा आगे स्लाइडर है (vimeo ठीक काम करता है)। मैं यूट्यूब एपीआई का उपयोग नहीं कर रहा हूं, क्या मुझे इसकी ज़रूरत है?

किसी भी मदद के लिए धन्यवाद :)

0

2 उत्तर

बेथ के कोड के लिए धन्यवाद मैंने फ्लेक्सस्लाइडर विकल्प 'वीडियो: सत्य' सेटिंग को देखा।

मैंने वीडियो सेटिंग जोड़ा और अब मेरे यूट्यूब वीडियो चल रहे हैं, मैं वाईटी एपीआई का उपयोग नहीं कर रहा हूं।

0
जोड़ा

मुझे काम करने के लिए यूट्यूब एपीआई का उपयोग करने की आवश्यकता थी। निम्नलिखित कोड ने मुझे flexslider को रोकने, वीडियो चलाने, और खत्म होने पर, flexslider फिर से शुरू करने की अनुमति दी।

var player, firstScriptTag, tag = document.createElement('script');

//async youtube api script reference
tag.src = "https://www.youtube.com/iframe_api";
firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

//called when iframe api loaded
function onYouTubeIframeAPIReady() {
     player = new YT.Player('player', {    
         width: 960,
         height: 540,
         videoId: 'XXXX',
         playerVars: { 'autoplay': 0, 'showinfo': 0, 'loop': 1, 'rel': 0, 'vq': 'hd1080', 'controls': 0 },
         events: {                 
             'onStateChange': function(event) { 
                  controlSlider(event);
             }
         }
      });
}

//manually control video
function toggleVideo(state) {
    if(state == "pause") {
        player.pauseVideo();
    } else {
        player.playVideo();
    }
}

//play or pause flexslider based on youtube event states
function controlSlider(event) {

    var playerstate=event.data;
    console.log(playerstate);
    if(playerstate==1 || playerstate==3){
        $('.flexslider.main').flexslider("pause");
    }
    if(playerstate==2){        
        $('.flexslider.main').flexslider("play");
    }
}

//flexslider load after dom created
$(window).load(function() {
        $('.flexslider.main').flexslider({
            controlNav: true,
            directionNav: false,
            video: true,
            pauseOnHover: false,
            before: function (slider) {
                //get next slide and find the video
                var curSlide = $(".main li").eq(slider.animatingTo),
                    currentFrame = curSlide.find('iframe');

                //if video doesn't exist in slide, pause it
                if (currentFrame.length == 0) {
                    toggleVideo('pause');
                }
                else {
                    toggleVideo('play');
                }
            }
        });
});
0
जोड़ा