Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
12/04/2017

Displaying YouTube Videos with the YouTube iFrame API

Page of 168

The YouTube iFrame Player APIs give you more granular control over YouTube video playback within your Sencha Touch application. Use this API to configure basic settings, drive the player interface, and build your own player controls.

The following example class packages the major features of the YouTube iFrame API as a Sencha Touch component, thereby making it easy to instantiate a viewer and programatically start, stop, pause and load other videos into a single player instance.

Ext.define('MyApp.view.YouTubePlayer', {
 extend: 'Ext.Component',
 alias: 'widget.YouTubePlayer',

 config: {
  url: 'http://www.youtube.com/v/',
  videoId: 'qsvpvqvApKo',
  vWidth: 420,
  vHeight: 315,
  autoPlay: 1,
  autoHide: 1,
  loop: 0,
  modestBranding: 1,
  start: 0
 },

 onPlayerApiChange: function() {
  this.fireEvent('playerapichange',this,arguments);
 },

 onPlayerError: function() {
  this.fireEvent('playererror',this,arguments);
 },

 onPlayerPlaybackQualityChange: function() {
  this.fireEvent('playbackqualitychange',this,arguments);
 },

 onPlayerReady: function() {
  this.fireEvent('playerready',this,arguments);
 },

 onPlayerStateChange: function() {
  this.fireEvent('statechange',this,arguments);
 },

 initialize: function() {
  this.callParent(arguments);

  var me = this;

  window.onYouTubeIframeAPIReady = function() {
   me.player = new YT.Player(me.element.id, {
    height: me.getVHeight(),
    width:  me.getVWidth(),
    videoId: me.getVideoId(),
    playerVars: {
     autohide: me.getAutoHide(),
     autoplay: me.getAutoPlay(),
     loop: me.getLoop(),
     modestbranding: me.getModestBranding(),
     start: me.getStart()
    },
    events: {
     onApiChange : Ext.Function.bind(me.onPlayerApiChange,me),
     onError: Ext.Function.bind(me.onPlayerError, me),
     onPlaybackQualityChange: Ext.Function.bind(me.onPlayerPlaybackQualityChange,me),
     onReady: Ext.Function.bind(me.onPlayerReady,me),
     onStateChange: Ext.Function.bind(me.onPlayerStateChange, me)
    }
   });
   me.fireEvent('youtubeiframeapiready',arguments);
  }

  // load api if necessary
  if (typeof YT == 'undefined'){ 
   var tag = document.createElement('script');
   tag.src = "//www.youtube.com/iframe_api";
   var firstScriptTag = document.getElementsByTagName('script')[0];
   firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }
 },

 stop: function() {
  this.player.stopVideo();
 },

 play: function() {
  this.player.playVideo();
 },

 pause: function() {
  this.player.pauseVideo();
 },

 loadVideoById: function(videoId, startSeconds, endSeconds, suggestedQuality) {
  this.player.loadVideoById({
    videoId: videoId,
    startSeconds: startSeconds,
    endSeconds: endSeconds,
    suggestedQuality: suggestedQuality
   });
  }
});
Page of 168
comments powered by Disqus