From 0216a0fd35752e0e89989e7afe0f44a06c70eb2f Mon Sep 17 00:00:00 2001 From: Valera Rozuvan Date: Fri, 1 Feb 2013 13:58:46 +0200 Subject: [PATCH] Fixed bugs. Removed unnecessary things from HTML5. Minor improvements. Subtitles now work in HTML5 if specified. --- .../xmodule/js/src/videoalpha/display.coffee | 3 +- .../js/src/videoalpha/display/html5_video.js | 76 ++----------------- .../videoalpha/display/video_player.coffee | 14 ++-- 3 files changed, 16 insertions(+), 77 deletions(-) diff --git a/common/lib/xmodule/xmodule/js/src/videoalpha/display.coffee b/common/lib/xmodule/xmodule/js/src/videoalpha/display.coffee index 7f3645d5d1..4728b2f588 100644 --- a/common/lib/xmodule/xmodule/js/src/videoalpha/display.coffee +++ b/common/lib/xmodule/xmodule/js/src/videoalpha/display.coffee @@ -6,8 +6,7 @@ class @VideoAlpha @end = @el.data('end') @caption_data_dir = @el.data('caption-data-dir') @caption_asset_path = @el.data('caption-asset-path') - @show_captions = @el.data('show-captions') == "true" - window.player = null + @show_captions = @el.data('show-captions').toString() == "true" @el = $("#video_#{@id}") if @parseVideos(@el.data("streams")) is true @videoType = "youtube" diff --git a/common/lib/xmodule/xmodule/js/src/videoalpha/display/html5_video.js b/common/lib/xmodule/xmodule/js/src/videoalpha/display/html5_video.js index 12a5734f13..5ae936776c 100644 --- a/common/lib/xmodule/xmodule/js/src/videoalpha/display/html5_video.js +++ b/common/lib/xmodule/xmodule/js/src/videoalpha/display/html5_video.js @@ -15,9 +15,6 @@ this.HTML5Video = (function () { * follows: * * config = { - * 'width': 640, - * - * 'height': 390, * * 'videoSources': {}, // An object of with properties being video sources. The property name is the * // video format of the source. Supported video formats are: 'mp4', 'webm', and @@ -26,11 +23,7 @@ this.HTML5Video = (function () { * // 'videoSource' option, you can later call loadVideoBySource() method to load * // a video and start playing it. * - * 'playerVars': { // Object's properties identify player parameters. - * - * 'controls': 1, // Possible values: 0, or 1. Value of 1 will enable the default browser video - * // controls. - * + * 'playerVars': { // Object's properties identify player parameters. * * 'start': null, // Possible values: positive integer. Position from which to start playing the * // video. Measured in seconds. If value is null, or 'start' property is not * // specified, the video will start playing from the beginning. @@ -47,8 +40,7 @@ this.HTML5Video = (function () { * // called for that event. * * 'onReady': null, - * 'onStateChange': null, - * 'onPlaybackQualityChange': null + * 'onStateChange': null * } * } */ @@ -172,40 +164,6 @@ this.HTML5Video = (function () { this.videoEl.appendTo(this.el.find('.video-player div')); } - /* - * This function returns the quality of the video. Possible return values are (type String) - * - * highres - * hd1080 - * hd720 - * large - * medium - * small - * - * It returns undefined if there is no current video. - * - * If there is a current video, but it is impossible to determine it's quality, the function will return - * 'medium'. - */ - Player.prototype.getPlayBackQuality = function () { - if (this.config.videoSource === '') { - return undefined; - } - - // TODO: Figure out if we can get the quality of a video from a source (when it is loaded by the browser). - - return 'medium'; - }; - - /* - * The original YouTube API function player.setPlaybackQuality changed (if it was possible) the quality of the - * played video. In our case, this function will not do anything because we can't change the quality of HTML5 - * video since we only get one source of video with one quality. - */ - Player.prototype.setPlaybackQuality = function (value) { - - }; - Player.prototype.pauseVideo = function () { this.video.pause(); }; @@ -216,28 +174,6 @@ this.HTML5Video = (function () { } }; - // YouTube API has player.loadVideoById, but since we are working with a video source, we will rename this - // function accordingly. However, not to cause conflicts, there will also be a loadVideoById function which - // will call this function. - Player.prototype.loadVideoBySource = function (source) { - - }; - - Player.prototype.loadVideoById = function (id) { - this.loadVideoBySource(id); - } - - // YouTube API has player.cueVideoById, but since we are working with a video source, we will rename this - // function accordingly. However, not to cause conflicts, there will also be a cueVideoById function which - // will call this function. - Player.prototype.cueVideoBySource = function (source) { - - }; - - Player.prototype.cueVideoById = function (id) { - this.cueVideoBySource(id); - }; - Player.prototype.setVolume = function (value) { if ((typeof value === 'number') && (value <= 100) && (value >= 0)) { this.video.volume = value * 0.01; @@ -253,7 +189,7 @@ this.HTML5Video = (function () { }; Player.prototype.getPlayerState = function () { - + return this.playerState; }; Player.prototype.getVolume = function () { @@ -272,7 +208,11 @@ this.HTML5Video = (function () { if (isFinite(newSpeed) === true) { this.video.playbackRate = value; } - } + }; + + Player.prototype.getAvailablePlaybackRates = function () { + return [0.75, 1.0, 1.25, 1.5]; + }; return Player; }()); diff --git a/common/lib/xmodule/xmodule/js/src/videoalpha/display/video_player.coffee b/common/lib/xmodule/xmodule/js/src/videoalpha/display/video_player.coffee index 28fa71f0d1..67855bb29b 100644 --- a/common/lib/xmodule/xmodule/js/src/videoalpha/display/video_player.coffee +++ b/common/lib/xmodule/xmodule/js/src/videoalpha/display/video_player.coffee @@ -1,5 +1,8 @@ class @VideoPlayerAlpha extends SubviewAlpha initialize: -> + if (window.OldVideoPlayerAlpha) and (window.OldVideoPlayerAlpha.onPause) + window.OldVideoPlayerAlpha.onPause() + window.OldVideoPlayerAlpha = this if @video.videoType is 'youtube' @PlayerState = YT.PlayerState # Define a missing constant of Youtube API @@ -11,10 +14,10 @@ class @VideoPlayerAlpha extends SubviewAlpha @el = $("#video_#{@video.id}") bind: -> - console.log "show_captions = #{@video.show_captions}" $(@control).bind('play', @play) .bind('pause', @pause) - $(@qualityControl).bind('changeQuality', @handlePlaybackQualityChange) + if @video.videoType is 'youtube' + $(@qualityControl).bind('changeQuality', @handlePlaybackQualityChange) if @video.show_captions is true $(@caption).bind('seek', @onSeek) $(@speedControl).bind('speedChange', @onSpeedChange) @@ -32,7 +35,8 @@ class @VideoPlayerAlpha extends SubviewAlpha render: -> @control = new VideoControlAlpha el: @$('.video-controls') - @qualityControl = new VideoQualityControlAlpha el: @$('.secondary-controls') + if @video.videoType is 'youtube' + @qualityControl = new VideoQualityControlAlpha el: @$('.secondary-controls') if @video.show_captions is true @caption = new VideoCaptionAlpha el: @el @@ -63,7 +67,6 @@ class @VideoPlayerAlpha extends SubviewAlpha events: onReady: @onReady onStateChange: @onStateChange - onPlaybackQualityChange: @onPlaybackQualityChange else if @video.videoType is 'youtube' @player = new YT.Player @video.id, playerVars: @playerVars @@ -110,8 +113,6 @@ class @VideoPlayerAlpha extends SubviewAlpha onPlay: => @video.log 'play_video' - window.player.pauseVideo() if window.player && window.player != @player - window.player = @player unless @player.interval @player.interval = setInterval(@update, 200) if @video.show_captions is true @@ -121,7 +122,6 @@ class @VideoPlayerAlpha extends SubviewAlpha onPause: => @video.log 'pause_video' - window.player = null if window.player == @player clearInterval(@player.interval) @player.interval = null if @video.show_captions is true