Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
  • 9 commits
  • 7 files changed
  • 1 commit comment
  • 3 contributors
Commits on Oct 31, 2012
heidi heidiv FLUID-4829: Fixed width and position of volume slider to align with v…
…olume button
008c08c
heidi heidiv FLUID-4829: Fixed width and position of volume slider to align with v…
…olume button
4826499
Commits on Nov 28, 2012
Michelle FLUID-4839: Removing the specialized youtube markup so that media ele…
…ment can take care of youtube videos for us.
2a38f6e
Michelle FLUID-4839: Fixed an error being thrown in the mammals demo. Styling …
…tweaks.
bf52850
Commits on Dec 04, 2012
Michelle FLUID-4839: Minor changes based on code review - uncommenting some co…
…mmented out lines and putting in a comment.
4a0fee3
heidi heidiv FLUID-4829: Adapts to text-size increase. ab52ce6
Commits on Dec 05, 2012
Michelle FLUID-4839: Reducing string concatenation for the aria label containi…
…ng the video title.
b3307c9
Commits on Dec 06, 2012
Justin Obara jobara Merge remote-tracking branch 'michelle/FLUID-4839'
* michelle/FLUID-4839:
  FLUID-4839: Reducing string concatenation for the aria label containing the video title.
  FLUID-4839: Minor changes based on code review - uncommenting some commented out lines and putting in a comment.
  FLUID-4839: Fixed an error being thrown in the mammals demo. Styling tweaks.
  FLUID-4839: Removing the specialized youtube markup so that media element can take care of youtube videos for us.
e815de5
Justin Obara jobara Merge remote-tracking branch 'heidi/FLUID-4829'
* heidi/FLUID-4829:
  FLUID-4829: Adapts to text-size increase.
  FLUID-4829: Fixed width and position of volume slider to align with volume button
  FLUID-4829: Fixed width and position of volume slider to align with volume button
4539572
16 css/VideoPlayer.css
View
@@ -1,5 +1,6 @@
.fl-videoPlayer {
font-family: sans-serif;
+ height: 22.5em;
}
/*
@@ -9,6 +10,7 @@
.fl-videoPlayer-main {
position: relative;
display: inline-block;
+ height: inherit;
}
/*
@@ -17,14 +19,16 @@
.fl-videoPlayer-video {
float: left;
+ height: inherit;
}
.fl-videoPlayer-video-element {
top: 0;
left: 0;
- width: 100%;
- height: 100%;
+ height: inherit;
+ width: 29.75em;
}
+
.fl-videoPlayer-video-element:focus,
.fl-videoPlayer-transcript-element-selected {
outline: solid 3px #3195C7;
@@ -270,13 +274,12 @@ a.fl-videoPlayer-button-wrapper {
.fl-videoPlayer-volumeControl {
display: none;
z-index: 1000;
- border-width: 5px 11px;
+ border-width: 5px 0.55em;
border-style: solid;
border-color: #c2c2c2;
position: absolute;
bottom: 1.8em;
- left: 20%;
- width: 25%;
+ left: 0;
height: 6em;
background: none;
background-color: #F2F2F2;
@@ -331,7 +334,6 @@ a.fl-videoPlayer-button-wrapper {
}
.fl-videoPlayer-volumeControl .ui-slider-handle {
height: 10%;
- left: -75%;
margin-bottom: 0;
}
@@ -554,7 +556,7 @@ ul.fl-videoPlayer-transcripts-languageList li {
.fl-videoPlayer-overlay {
bottom: 0em;
position: absolute;
- width: 100%;
+ width: 29.75em;
pointer-events: none;
}
.fl-theme-uio-yb .fl-videoPlayer-overlay, .fl-theme-uio-yb .fl-videoPlayer-captionArea, .fl-theme-uio-yb .captionator-cue-canvas,
6 demos/Mammals.css
View
@@ -188,6 +188,7 @@ footer a {
margin-bottom: 1em;
text-align: center;
max-width: 100%;
+ height: 31.25em;
}
@@ -196,7 +197,6 @@ footer a {
background-color: #808080;
}
-.fl-videoPlayer-video {
- width: 500px;
- height: 500px;
+.fl-videoPlayer-video-element, .fl-videoPlayer-overlay {
+ width: 31.25em;
}
8 demos/Mammals.js
View
@@ -62,7 +62,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
},
{
src: "http://www.youtube.com/v/0jw74pfWfxA",
- type: "youtube"
+ type: "video/youtube"
}
],
captions: [
@@ -111,7 +111,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
},
{
src: "http://www.youtube.com/v/h_oHNP50FGM",
- type: "youtube"
+ type: "video/youtube"
}
],
captions: [
@@ -155,14 +155,14 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
{
src: "videos/PolarMammalAdaptations/PolarMammalAdaptations.mp4",
type: "video/mp4"
- },
+ },
{
src: "videos/PolarMammalAdaptations/PolarMammalAdaptations.webm",
type: "video/webm"
},
{
src: "http://www.youtube.com/v/3_3p2ylZDAE",
- type: "youtube"
+ type: "video/youtube"
}
],
captions: [
4 demos/VideoPlayer.html
View
@@ -90,8 +90,8 @@
type: "video/webm"
},
{
- src: "http://www.youtube.com/v/_VxQEPw1x9E&hl=en&fs=1",
- type: "youtube"
+ src: "http://www.youtube.com/v/_VxQEPw1x9E",
+ type: "video/youtube"
}
],
captions: [
45 js/VideoPlayer.js
View
@@ -250,12 +250,6 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
args: ["{arguments}.captions.1"]
}
},
- invokers: {
- resize: {
- funcName: "fluid.videoPlayer.resize",
- args: "{videoPlayer}"
- }
- },
selectors: {
videoPlayer: ".flc-videoPlayer-main",
video: ".flc-videoPlayer-video",
@@ -270,7 +264,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
turnCaptionsOff: "Turn Captions OFF",
transcriptsOff: "Transcripts OFF",
turnTranscriptsOff: "Turn Transcripts OFF",
- videoTitlePreface: "Video"
+ videoTitlePreface: "Video: "
},
selectorsToIgnore: ["overlay", "caption", "videoPlayer", "transcript", "video", "videoContainer"],
keyBindings: fluid.videoPlayer.defaultKeys,
@@ -410,8 +404,6 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
});
that.events.onLoadedMetadata.addListener(function () {
- that.resize();
-
bindKeyboardControl(that);
});
};
@@ -548,7 +540,12 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
} else if (key === "videoPlayer") {
that.container.append(res[key].resourceText);
that.refreshView();
- that.locate("video").attr("aria-label", that.options.strings.videoTitlePreface + ": " + that.options.videoTitle);
+ var video = that.locate("video");
+ video.attr("aria-label", that.options.strings.videoTitlePreface + that.options.videoTitle);
+ // Setting the width and height attributes to respect the CSS API for setting the size of the video
+ // This is required for cross browser sizing of the video
+ video.attr("width", video.css("width"));
+ video.attr("height", video.css("height"));
bindVideoPlayerDOMEvents(that);
//create all the listeners to the model
@@ -599,33 +596,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
}
return ret + min + ":" + sec;
};
-
- // Function which modifies containers and their sizes
- fluid.videoPlayer.resize = function (that) {
- var video = that.locate("video");
- var videoPlayer = that.locate("videoPlayer");
- var overlay = that.locate("overlay");
-
- // Get the video sizes first
- // ToDo: A video wrapper container is used for video scaling. The video width/height are determined by the wrapper container
- // rather then the video itself. This solution needs a re-consideration once we decide on scaling the video through css or
- // API.
-// var videoWidth = video[0].videoWidth;
-// var videoHeight = video[0].videoHeight;
- var videoWidth = video.width();
- var videoHeight = video.height();
-
- // Set height on the controller area. To make overlay to show up exactly at the bottom of the video regardless to UIO settings
- videoPlayer.css({height: videoHeight});
-
- // Set the width of the overlay to be the width of the video, otherwise, the controller bar spreads into transcript area
- overlay.css({width: videoWidth});
-
- // Save the video width/height in the model so they are accessible by the sub-components
- that.model.videoWidth = videoWidth;
- that.model.videoHeight = videoHeight;
- };
-
+
/*********************************************************************************
* Event Binder: *
* Shared by all video player component whenever an event binder component is *
9 js/VideoPlayer_media.js
View
@@ -52,7 +52,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
"video/webm": "fluid.videoPlayer.media.createSourceMarkup.html5SourceTag",
"video/ogg": "fluid.videoPlayer.media.createSourceMarkup.html5SourceTag",
"video/ogv": "fluid.videoPlayer.media.createSourceMarkup.html5SourceTag",
- "youtube": "fluid.videoPlayer.media.createSourceMarkup.youTubePlayer"
+ "video/youtube": "fluid.videoPlayer.media.createSourceMarkup.html5SourceTag"
},
sources: []
});
@@ -63,13 +63,6 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
sourceTag.attr(mediaSource);
videoPlayer.container.append(sourceTag);
return sourceTag;
- },
- youTubePlayer: function (videoPlayer, mediaSource) {
- var placeholder = $("<div/>"),
- id = fluid.allocateSimpleId(placeholder);
- videoPlayer.container.append(placeholder);
- swfobject.embedSWF(mediaSource.src, id, "425", "356", "8");
- return placeholder;
}
};
2  tests/js/VideoPlayerTests.js
View
@@ -135,7 +135,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
var testVideoLabel = function (vp, expectedLabel) {
jqUnit.expect(1);
- jqUnit.assertEquals("aria-label should be set properly", vp.options.strings.videoTitlePreface + ": " + expectedLabel, vp.locate("video").attr("aria-label"));
+ jqUnit.assertEquals("aria-label should be set properly", vp.options.strings.videoTitlePreface + expectedLabel, vp.locate("video").attr("aria-label"));
};
videoPlayerTests.asyncTest("Video label: default", function () {

Showing you all comments on commits in this comparison.

Justin Obara

Thanks for uncommenting the code, but I think you were going to flip the youtube video for this instance up to the top.

Something went wrong with that request. Please try again.