diff --git a/etemplate/js/et2_widget_video.js b/etemplate/js/et2_widget_video.js new file mode 100644 index 0000000000..b9be1a71f0 --- /dev/null +++ b/etemplate/js/et2_widget_video.js @@ -0,0 +1,191 @@ +/** + * EGroupware eTemplate2 - JS Description object + * + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @package etemplate + * @subpackage api + * @link http://www.egroupware.org + * @author Hadi Nategh + * @copyright Stylite AG + * @version $Id:$ + */ + +"use strict"; + +/*egw:uses + jquery.jquery; + et2_core_interfaces; + et2_core_baseWidget; +*/ + +/** + * This widget represents the HTML5 video tag with all its optional attributes + * + * The widget can be created in the following ways: + * + * var videoTag = et2_createWidget("video", { + * video_src: "../../test.mp4", + * src_type: "video/mp4", + * muted: true, + * autoplay: true, + * controls: true, + * poster: "../../poster.jpg", + * loop: true, + * height: 100, + * width: 200, + * }); + * + * Or by adding XET-tag in your template (.xet) file: + * + * + */ + +/** + * Class which implements the "video" XET-Tag + * + * @augments et2_baseWidget + */ +var et2_video = et2_baseWidget.extend(et2_IDOMNode, +{ + attributes: { + "video_src": { + "name": "Video", + "type": "string", + "description": "Source of video to display" + }, + "src_type": { + "name": "Source type", + "type": "string", + "description": "Defines the type the stream source provided" + }, + "muted": { + "name": "Audio control", + "type": "boolean", + "default": false, + "description": "Defines that the audio output of the video should be muted" + }, + "autoplay": { + "name": "Autoply", + "type": "boolean", + "default": false, + "description": "Defines if Video will start playing as soon as it is ready" + }, + "controls": { + "name": "Control buttons", + "type": "boolean", + "default": false, + "description": "Defines if Video controls, play/pause buttons should be displayed" + }, + "poster": { + "name": "Video Poster", + "type": "string", + "default": "", + "description": "Specifies an image to be shown while video is loading or before user play it" + }, + loop: { + "name": "Video loop", + "type": "boolean", + "default": false, + "description": "Defines if the video should be played repeatedly" + } + }, + + + /** + * Constructor + * + * @memberOf et2_video + */ + init: function() { + this._super.apply(this, arguments); + + //Create Video tag + this.video = jQuery(document.createElement("video")); + if (this.options.controls) + { + this.video.attr("controls",true); + } + if (this.options.autoplay) + { + this.video.attr("autoplay",true); + } + if (this.options.muted) + { + this.video.attr("muted",true); + } + if (this.options.video_src) + { + this.set_src(this.options.video_src); + } + if (this.options.loop) + { + this.video.attr("loop",true); + } + this.setDOMNode(this.video[0]); + }, + + /** + * Set video src + * + * @param {string} _value url + */ + set_src: function(_value) { + + if (_value) + { + var source = jQuery(document.createElement('source')) + .attr('src',_value) + .appendTo(this.video); + + if (this.options.src_type) + { + source.attr('type',this.options.src_type); + } + } + }, + + /** + * Set autoplay option for video + * -If autoplay is set, video would be played automatically after the page is loaded + * + * @param {string} _value true set the autoplay and false not to set + */ + set_autoplay: function (_value) + { + if (_value) + { + this.video.attr("autoplay",_value); + } + }, + + /** + * Set controls option for video + * + * @param {string} _value true set the autoplay and false not to set + */ + set_controls: function (_value) + { + if (_value) + { + this.video.attr("controls",_value); + } + }, + + /** + * Set poster attribute in order to specify + * an image to be shown while video is loading or before user play it + * + * @param {type} _url + */ + set_poster: function (_url) + { + if (_url) + { + this.video.attr("poster", _url); + } + } + +}); + +et2_register_widget(et2_video, ["video"]); diff --git a/etemplate/js/etemplate2.js b/etemplate/js/etemplate2.js index 2c8268c4c3..8118edca81 100644 --- a/etemplate/js/etemplate2.js +++ b/etemplate/js/etemplate2.js @@ -51,6 +51,7 @@ et2_widget_selectAccount; et2_widget_ajaxSelect; et2_widget_vfs; + et2_widget_video; et2_widget_itempicker; et2_extension_nextmatch;