2013-02-27 28 views
14

का उपयोग कर यूट्यूब वीडियो पूर्ण स्क्रीन बनाने मैं छिपा नियंत्रण के साथ एक एम्बेडेड यूट्यूब वीडियो है:आइफ्रेम और जावास्क्रिप्ट एपीआई

<iframe id="ytplayer" type="text/html" width="400" height="225" 
src="http://www.youtube.com/embed/dMH0bHeiRNg?rel=0&controls=0&showinfo=0 
&loop=1&hd=1&modestbranding=1&enablejsapi=1&playerapiid=ytplayer" 
frameborder="0" allowfullscreen></iframe> 

मैं इसे यूट्यूब JavaScript API के साथ नियंत्रित कर सकते हैं।

var tag = document.createElement('script'); 

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

var player; 
function onYouTubeIframeAPIReady() { 
player = new YT.Player('ytplayer', { 
    events: { 
    'onReady': onPlayerReady, 
    'onStateChange': onPlayerStateChange 
    } 
}); 
} 

player.playVideo() जैसी चीजें और पूरी तरह से काम पर। अब मैं एक जावास्क्रिप्ट कॉल के साथ वीडियो को पूर्णस्क्रीन मोड में चलाने का एक तरीका ढूंढ रहा हूं लेकिन मुझे एपीआई में कोई विधि नहीं मिल सका।

क्या यह भी संभव है (नियंत्रण के बिना) और यदि ऐसा है - कैसे?

+0

"सही" पूर्ण स्क्रीन AFAIK फ्लैश (या चीजों की है कि _sort _) के साथ किया जाता है ... –

+2

@ एड्रियनो फ्लैश आवश्यक नहीं है, एक पूर्णस्क्रीन एपीआई पहले से मौजूद है, और आईई (10) को छोड़कर सभी आधुनिक ब्राउज़रों द्वारा कार्यान्वित किया गया है: http://caniuse.com/#feat=fullscreen –

+0

@RobW अच्छा, मैंने नहीं किया पता है। तो दुख है कि इसका उपयोग करना लगभग असंभव है अगर यह आईई (यहां तक ​​कि 10) द्वारा समर्थित नहीं है ... :( –

उत्तर

0

शायद इसी तरह के प्रश्न पर एक नज़र डालें। ऐसा लगता है जैसे यह हालांकि (यूट्यूब एपीआई के बजाय जावास्क्रिप्ट पूर्णस्क्रीन API का उपयोग) आप के लिए काम कर सकते हैं:

Full Screen Option in Chromeless player using Javascript?

-5

आप जावास्क्रिप्ट के माध्यम से खिड़की आयाम करने के लिए iframe आयाम स्थापित करने की कोशिश कर सकते हैं।

कुछ इस तरह (jQuery का उपयोग):

$('ytplayer').attr('width', $(window).width()); 
$('ytplayer').attr('height', $(window).height()); 

मुझे आशा है कि यह आप कर सकते हैं।

+4

मुझे लगता है कि पोस्टर का अर्थ वास्तव में पूर्ण स्क्रीन है, यानी खिड़की से बड़ा। – mikemaccana

4

मैंने Auto-Full Screen for a Youtube embed पर अपने उत्तर में पूर्णस्क्रीन (वास्तविक पूर्ण स्क्रीन, पूर्ण विंडो) करने के लिए कोड जोड़ा है।

यूट्यूब अपने एपीआई में पूर्णस्क्रीन का पर्दाफाश नहीं करता है, लेकिन आप YouTube ब्राउज़र से प्लेयरस्टेट चेंज() ईवेंट से मूल ब्राउज़र अनुरोध FullScreen() फ़ंक्शन को कॉल कर सकते हैं या मेरे जैसे कस्टम प्ले बटन बना सकते हैं।

3

आप एचटीएमएल 5 पूर्ण स्क्रीन API का उपयोग कर सकते हैं:

node.requestFullScreen(); 
document.cancelFullScreen(); 
document.fullScreen; // bool 

लेकिन ध्यान दें कि:

  • mozRequestFullScreen() की तरह यह आम तौर पर की आवश्यकता है विक्रेता विशिष्ट उपसर्ग या webkitRequestFullScreen
  • requestFullScreen उपयोगकर्ता घटनाओं पर बुलाया जाना है (ऑनक्लिक की तरह)
  • फ़ायरफ़ॉक्स में पूर्णस्क्रीन काला हो जाएगा जब तक "अनुमति" उपयोगकर्ता द्वारा क्लिक नहीं किया जाता
1

iframe खिलाड़ी के लिए API संदर्भ को देखते हुए, मैं इसे यह (अकेले iframe एपीआई के साथ) पूर्णस्क्रीन पर स्थापित करने के लिए संभव है नहीं लगता है - ctrl f फुलस्क्रीन नहीं मिला है, तो या तो वह एक गुप्त प्रक्रिया गुप्त रखी है एपीआई के अंदर या यह अस्तित्व में नहीं है। हालांकि, जैसा कि आप शायद जानते हैं, आप प्लेयर player.setSize(width:Number, height:Number):Object का आकार सेट कर सकते हैं, फिर window fullscreen बनाएं।

3

यह मेरे मामले में सही काम करता है। आप इस लिंक पर और अधिक जानकारी प्राप्त कर सकते हैं: demo on CodePen

var player, iframe; 
var $ = document.querySelector.bind(document); 

// init player 
function onYouTubeIframeAPIReady() { 
    player = new YT.Player('player', { 
    height: '200', 
    width: '300', 
    videoId: 'dQw4w9WgXcQ', 
    events: { 
     'onReady': onPlayerReady 
    } 
    }); 
} 

// when ready, wait for clicks 
function onPlayerReady(event) { 
    var player = event.target; 
    iframe = $('#player'); 
    setupListener(); 
} 

function setupListener(){ 
$('button').addEventListener('click', playFullscreen); 
} 

function playFullscreen(){ 
    player.playVideo();//won't work on mobile 

    var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen; 
    if (requestFullScreen) { 
    requestFullScreen.bind(iframe)(); 
    } 
} 
संबंधित मुद्दे