/** * Embed a video player with video from an extern provider. * * The Widget inserts a video player from YouTube, MyVideo, Dailymotion, vimeo, wideo or metacafe including a video id into the target element on which the widget is executed on. * * ### Examples * The Widget is executed on a pageelement and is called with passing optional parameters. In this example a youtube video player with size 320:180 is implemented and contains a video from ePages. * * JavaScript: * * * jQuery.ready({ * plugin: [ 'de_epages.externalcontent.ui.externalvideo' ], * DOM: true * }, function($){ * var widget = de_epages('<div>').externalcontentUiExternalvideo({ * provider : "youtube", * id : "UGhd7eZfrDA", * width : 320, * height: 180 * }); * }); * * The Widget is executed on a pageelement and is called with passing optional parameters. In this example a metacafe video player with size 560:315 (default) is implemented and contains a user-defined video. * * JavaScript: * * * jQuery.ready({ * plugin: [ 'de_epages.externalcontent.ui.externalvideo' ], * DOM: true * }, function($){ * var widget = de_epages('<div>').externalcontentUiExternalvideo({ * provider : "metacafe", * id : ""yt-2B1QxOmbMZ0/alf_tries_to_eat_the_cat" * }); * }); * * * @class jQuery.ui.externalcontentUiExternalvideo * @extends jQuery.widget * * @uses de_epages * @uses jQuery.ui.widget * @uses jQuery.tmpl * @uses de_epages.externalcontent.ui.externalvideo * @since 6.15.0 */ /** * @cfg {Required, String} provider Specifies the provider whose video player will be used. */ /** * @cfg {Required, String} id A reference to the embedded video that is liked to be shown. */ /** * @cfg {String} [width] Defines the width of the embedded video player. Values: 'large', 'medium', 'small' */ /** * @cfg {String} [height] Defines the height of the embedded video player. Values: 'large', 'medium', 'small' */ /** * See `jQuery.ui.externalcontentUiExternalvideo` for details. * * @param {Object} [options] A map of additional options to pass to the method. * @param {Required, String} provider Specifies the provider whose video player will be used. * @param {Required, String} id A reference to the embedded video that is liked to be shown. * @param {String} [width] Defines the width of the embedded video player. Values: 'large', 'medium', 'small' * @param {String} [height] Defines the height of the embedded video player. Values: 'large', 'medium', 'small' * * @method externalcontentUiExternalvideo * @member jQuery * * @since 6.15.0 */ /* * @copyright © Copyright 2006-2012, epages GmbH, All Rights Reserved. * * @module de_epages.externalcontent.gadget.externalvideo * * @revision $$ */ /*jslint nomen: true*/ /*global define, location*/ define('de_epages/externalcontent/ui/externalvideo', [ 'jquery/ui/widget', 'de_epages', 'de_epages/externalcontent/gadgetdialog/constants', 'jquery/tmpl' ], function ($, de_epages, CONSTANTS) { 'use strict'; var gClassNames = '', embedIframe = '<iframe width="${width}" height="${height}" src="//${url}${id}" frameborder="0"></iframe>', embedObject = '<object name="${id}" id="${id}" type="application/x-shockwave-flash" data="http://sa.kewego.com/swf/p3/epix.swf" width="${width}" height="${height}">' + '<param name="flashVars" value="language_code=fr&playerKey=0df9b773a15b&skinKey=7109c4112f57&sig=${id}&autostart=false&advertise=1" />' + '<param name="movie" value="http://sa.kewego.com/swf/p3/epix.swf" /><param name="allowFullScreen" value="true" />' + '<param name="allowscriptaccess" value="always" /></object>', embedEmbed = '<embed flashVars="playerVars=autoPlay=no" src="http://www.metacafe.com/fplayer/${id}.swf"' + 'width="${width}" height="${height}"' + 'wmode="transparent" allowFullScreen="true" allowScriptAccess="always" name="Metacafe"' + 'pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>'; $.widget('ui.externalcontentUiExternalvideo', { options: { provider: '', // String. Specifying the provider of the embedded video. id: '', // String. Specifying a site or id, that consists the video to embed. width: 560, // Integer. Specifying the width of the video frame. height: 315 // Integer. Specifying the height of the video frame. }, _create: function () { var o = this.options, url, template = null; if (!o.id || !o.provider) { return this.destroy(); } switch (o.provider) { case 'youtube': url = CONSTANTS.gExternalVideoUrl['youtube']; break; case 'myvideo': url = CONSTANTS.gExternalVideoUrl['myvideo']; break; case 'vimeo': url = CONSTANTS.gExternalVideoUrl['vimeo']; break; case 'dailymotion': url = CONSTANTS.gExternalVideoUrl['dailymotion']; break; case 'wideofr': template = location.protocol === 'http:' ? $.template('de_epages.externalcontent.ui.wideofr', embedObject) : ''; break; case 'metacafe': template = location.protocol === 'http:' ? $.template('de_epages.externalcontent.ui.metacafe', embedEmbed) : ''; break; } if (template === null) { template = $.template('de_epages.externalcontent.ui.externalvideo', embedIframe); } this.placeholder = $.tmpl(template, { url: url, id: o.id, width: o.width, height: o.height }).appendTo(this.element.addClass(gClassNames)); }, /** * This method removes the container on which the Google-Plus button has been appended to. * * @method destroy * @member jQuery.ui.externalcontentUiExternalvideo * * @since 6.15.0 */ destroy: function () { this.element.removeClass(gClassNames); if (this.placeholder) { this.placeholder.remove(); } this._superApply(arguments); } }); return de_epages; });