googlevideo.js 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
  1. // Copyright 2011 The Closure Library Authors. All Rights Reserved.
  2. //
  3. // Licensed under the Apache License, Version 2.0 (the "License");
  4. // you may not use this file except in compliance with the License.
  5. // You may obtain a copy of the License at
  6. //
  7. // http://www.apache.org/licenses/LICENSE-2.0
  8. //
  9. // Unless required by applicable law or agreed to in writing, software
  10. // distributed under the License is distributed on an "AS-IS" BASIS,
  11. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12. // See the License for the specific language governing permissions and
  13. // limitations under the License.
  14. /**
  15. * @fileoverview provides a reusable GoogleVideo UI component given a public
  16. * GoogleVideo video URL.
  17. *
  18. * goog.ui.media.GoogleVideo is actually a {@link goog.ui.ControlRenderer}, a
  19. * stateless class - that could/should be used as a Singleton with the static
  20. * method {@code goog.ui.media.GoogleVideo.getInstance} -, that knows how to
  21. * render GoogleVideo videos. It is designed to be used with a
  22. * {@link goog.ui.Control}, which will actually control the media renderer and
  23. * provide the {@link goog.ui.Component} base. This design guarantees that all
  24. * different types of medias will behave alike but will look different.
  25. *
  26. * goog.ui.media.GoogleVideo expects {@code goog.ui.media.GoogleVideoModel} on
  27. * {@code goog.ui.Control.getModel} as data models, and renders a flash object
  28. * that will show the contents of that video.
  29. *
  30. * Example of usage:
  31. *
  32. * <pre>
  33. * var video = goog.ui.media.GoogleVideoModel.newInstance(
  34. * 'http://video.google.com/videoplay?docid=6698933542780842398');
  35. * goog.ui.media.GoogleVideo.newControl(video).render();
  36. * </pre>
  37. *
  38. * GoogleVideo medias currently support the following states:
  39. *
  40. * <ul>
  41. * <li> {@link goog.ui.Component.State.DISABLED}: shows 'flash not available'
  42. * <li> {@link goog.ui.Component.State.HOVER}: mouse cursor is over the video
  43. * <li> {@link goog.ui.Component.State.SELECTED}: flash video is shown
  44. * </ul>
  45. *
  46. * Which can be accessed by
  47. * <pre>
  48. * video.setEnabled(true);
  49. * video.setHighlighted(true);
  50. * video.setSelected(true);
  51. * </pre>
  52. *
  53. *
  54. * @supported IE6+, FF2+, Chrome, Safari. Requires flash to actually work.
  55. */
  56. goog.provide('goog.ui.media.GoogleVideo');
  57. goog.provide('goog.ui.media.GoogleVideoModel');
  58. goog.require('goog.html.uncheckedconversions');
  59. goog.require('goog.string');
  60. goog.require('goog.ui.media.FlashObject');
  61. goog.require('goog.ui.media.Media');
  62. goog.require('goog.ui.media.MediaModel');
  63. goog.require('goog.ui.media.MediaRenderer');
  64. /**
  65. * Subclasses a goog.ui.media.MediaRenderer to provide a GoogleVideo specific
  66. * media renderer.
  67. *
  68. * This class knows how to parse GoogleVideo URLs, and render the DOM structure
  69. * of GoogleVideo video players. This class is meant to be used as a singleton
  70. * static stateless class, that takes {@code goog.ui.media.Media} instances and
  71. * renders it. It expects {@code goog.ui.media.Media.getModel} to return a well
  72. * formed, previously constructed, GoogleVideo video id, which is the data model
  73. * this renderer will use to construct the DOM structure.
  74. * {@see goog.ui.media.GoogleVideo.newControl} for a example of constructing a
  75. * control with this renderer.
  76. *
  77. * This design is patterned after http://go/closure_control_subclassing
  78. *
  79. * It uses {@link goog.ui.media.FlashObject} to embed the flash object.
  80. *
  81. * @constructor
  82. * @extends {goog.ui.media.MediaRenderer}
  83. * @final
  84. */
  85. goog.ui.media.GoogleVideo = function() {
  86. goog.ui.media.MediaRenderer.call(this);
  87. };
  88. goog.inherits(goog.ui.media.GoogleVideo, goog.ui.media.MediaRenderer);
  89. goog.addSingletonGetter(goog.ui.media.GoogleVideo);
  90. /**
  91. * A static convenient method to construct a goog.ui.media.Media control out of
  92. * a GoogleVideo model. It sets it as the data model goog.ui.media.GoogleVideo
  93. * renderer uses, sets the states supported by the renderer, and returns a
  94. * Control that binds everything together. This is what you should be using for
  95. * constructing GoogleVideo videos, except if you need finer control over the
  96. * configuration.
  97. *
  98. * @param {goog.ui.media.GoogleVideoModel} dataModel The GoogleVideo data model.
  99. * @param {goog.dom.DomHelper=} opt_domHelper Optional DOM helper, used for
  100. * document interaction.
  101. * @return {!goog.ui.media.Media} A Control binded to the GoogleVideo renderer.
  102. */
  103. goog.ui.media.GoogleVideo.newControl = function(dataModel, opt_domHelper) {
  104. var control = new goog.ui.media.Media(
  105. dataModel, goog.ui.media.GoogleVideo.getInstance(), opt_domHelper);
  106. // GoogleVideo videos don't have any thumbnail for now, so we show the
  107. // "selected" version of the UI at the start, which is the flash player.
  108. control.setSelected(true);
  109. return control;
  110. };
  111. /**
  112. * Default CSS class to be applied to the root element of components rendered
  113. * by this renderer.
  114. *
  115. * @type {string}
  116. */
  117. goog.ui.media.GoogleVideo.CSS_CLASS =
  118. goog.getCssName('goog-ui-media-googlevideo');
  119. /**
  120. * Creates the initial DOM structure of the GoogleVideo video, which is
  121. * basically a the flash object pointing to a GoogleVideo video player.
  122. *
  123. * @param {goog.ui.Control} c The media control.
  124. * @return {!Element} The DOM structure that represents this control.
  125. * @override
  126. */
  127. goog.ui.media.GoogleVideo.prototype.createDom = function(c) {
  128. var control = /** @type {goog.ui.media.Media} */ (c);
  129. var div = goog.ui.media.GoogleVideo.base(this, 'createDom', control);
  130. var dataModel =
  131. /** @type {goog.ui.media.GoogleVideoModel} */ (control.getDataModel());
  132. var flash = new goog.ui.media.FlashObject(
  133. dataModel.getPlayer().getTrustedResourceUrl(), control.getDomHelper());
  134. flash.render(div);
  135. return div;
  136. };
  137. /**
  138. * Returns the CSS class to be applied to the root element of components
  139. * rendered using this renderer.
  140. *
  141. * @return {string} Renderer-specific CSS class.
  142. * @override
  143. */
  144. goog.ui.media.GoogleVideo.prototype.getCssClass = function() {
  145. return goog.ui.media.GoogleVideo.CSS_CLASS;
  146. };
  147. /**
  148. * The {@code goog.ui.media.GoogleVideo} media data model. It stores a required
  149. * {@code videoId} field, sets the GoogleVideo URL, and allows a few optional
  150. * parameters.
  151. *
  152. * @param {string} videoId The GoogleVideo video id.
  153. * @param {string=} opt_caption An optional caption of the GoogleVideo video.
  154. * @param {string=} opt_description An optional description of the GoogleVideo
  155. * video.
  156. * @param {boolean=} opt_autoplay Whether to autoplay video.
  157. * @constructor
  158. * @extends {goog.ui.media.MediaModel}
  159. * @final
  160. */
  161. goog.ui.media.GoogleVideoModel = function(
  162. videoId, opt_caption, opt_description, opt_autoplay) {
  163. goog.ui.media.MediaModel.call(
  164. this, goog.ui.media.GoogleVideoModel.buildUrl(videoId), opt_caption,
  165. opt_description, goog.ui.media.MediaModel.MimeType.FLASH);
  166. /**
  167. * The GoogleVideo video id.
  168. * @type {string}
  169. * @private
  170. */
  171. this.videoId_ = videoId;
  172. this.setPlayer(
  173. new goog.ui.media.MediaModel.Player(
  174. goog.ui.media.GoogleVideoModel.buildFlashUrl(videoId, opt_autoplay)));
  175. };
  176. goog.inherits(goog.ui.media.GoogleVideoModel, goog.ui.media.MediaModel);
  177. /**
  178. * Regular expression used to extract the GoogleVideo video id (docid) out of
  179. * GoogleVideo URLs.
  180. *
  181. * @type {RegExp}
  182. * @private
  183. * @const
  184. */
  185. goog.ui.media.GoogleVideoModel.MATCHER_ =
  186. /^http:\/\/(?:www\.)?video\.google\.com\/videoplay.*[\?#]docid=(-?[0-9]+)#?$/i;
  187. /**
  188. * A auxiliary static method that parses a GoogleVideo URL, extracting the ID of
  189. * the video, and builds a GoogleVideoModel.
  190. *
  191. * @param {string} googleVideoUrl A GoogleVideo video URL.
  192. * @param {string=} opt_caption An optional caption of the GoogleVideo video.
  193. * @param {string=} opt_description An optional description of the GoogleVideo
  194. * video.
  195. * @param {boolean=} opt_autoplay Whether to autoplay video.
  196. * @return {!goog.ui.media.GoogleVideoModel} The data model that represents the
  197. * GoogleVideo URL.
  198. * @see goog.ui.media.GoogleVideoModel.getVideoId()
  199. * @throws Error in case the parsing fails.
  200. */
  201. goog.ui.media.GoogleVideoModel.newInstance = function(
  202. googleVideoUrl, opt_caption, opt_description, opt_autoplay) {
  203. if (goog.ui.media.GoogleVideoModel.MATCHER_.test(googleVideoUrl)) {
  204. var data = goog.ui.media.GoogleVideoModel.MATCHER_.exec(googleVideoUrl);
  205. return new goog.ui.media.GoogleVideoModel(
  206. data[1], opt_caption, opt_description, opt_autoplay);
  207. }
  208. throw Error(
  209. 'failed to parse video id from GoogleVideo url: ' + googleVideoUrl);
  210. };
  211. /**
  212. * The opposite of {@code goog.ui.media.GoogleVideo.newInstance}: it takes a
  213. * videoId and returns a GoogleVideo URL.
  214. *
  215. * @param {string} videoId The GoogleVideo video ID.
  216. * @return {string} The GoogleVideo URL.
  217. */
  218. goog.ui.media.GoogleVideoModel.buildUrl = function(videoId) {
  219. return 'http://video.google.com/videoplay?docid=' +
  220. goog.string.urlEncode(videoId);
  221. };
  222. /**
  223. * An auxiliary method that builds URL of the flash movie to be embedded,
  224. * out of the GoogleVideo video id.
  225. *
  226. * @param {string} videoId The GoogleVideo video ID.
  227. * @param {boolean=} opt_autoplay Whether the flash movie should start playing
  228. * as soon as it is shown, or if it should show a 'play' button.
  229. * @return {!goog.html.TrustedResourceUrl} The flash URL to be embedded on the
  230. * page.
  231. */
  232. goog.ui.media.GoogleVideoModel.buildFlashUrl = function(videoId, opt_autoplay) {
  233. var autoplay = opt_autoplay ? '&autoplay=1' : '';
  234. return goog.html.uncheckedconversions.
  235. trustedResourceUrlFromStringKnownToSatisfyTypeContract(
  236. goog.string.Const.from('Fixed domain, encoded path.'),
  237. 'http://video.google.com/googleplayer.swf?docid=' +
  238. goog.string.urlEncode(videoId) + '&hl=en&fs=true' + autoplay);
  239. };
  240. /**
  241. * Gets the GoogleVideo video id.
  242. * @return {string} The GoogleVideo video id.
  243. */
  244. goog.ui.media.GoogleVideoModel.prototype.getVideoId = function() {
  245. return this.videoId_;
  246. };