Permalink
Browse files

FLUID-4610: Half-completed transcript UI.

  • Loading branch information...
Cindy Qi Li
Cindy Qi Li committed Feb 17, 2012
1 parent 6375bf9 commit 87ba52e202adfcee382244e3d2ba15422f5559c7
Showing with 358 additions and 45 deletions.
  1. +72 −0 css/VideoPlayer.css
  2. +22 −0 demos/VideoPlayer.html
  3. +9 −8 docs/index.html
  4. +49 −29 html/videoPlayer_template.html
  5. +50 −6 js/VideoPlayer.js
  6. +156 −2 js/VideoPlayer_controllers.js
View
@@ -11,6 +11,14 @@
border: 1px solid red;
}
+/*
+* Video and Controller area
+*/
+
+.fl-videoPlayer-video-controller-area {
+ float: left;
+}
+
/*
* Video area
*/
@@ -134,6 +142,30 @@ ul.fl-videoPlayer-captions-languageList .fl-videoPlayer-caption-selected {
text-align: center;
}
+/*
+ * transcript controls
+ */
+.fl-videoPlayer-theme .fl-videoPlayer-transcripts-button {
+ background: #ffffff url('../images/transcripts-black.png') no-repeat center center;
+}
+.fl-videoPlayer-theme .fl-videoPlayer-transcripts-button:hover {
+ background-color: yellow;
+}
+.fl-videoPlayer-theme .fl-videoPlayer-transcripts-button.fl-videoPlayer-transcript-active {
+ background-color: orange;
+}
+.fl-videoPlayer-theme .fl-videoPlayer-transcripts-button.fl-videoPlayer-transcript-active:hover {
+ background-color: wheat;
+}
+
+ul.fl-videoPlayer-transcripts-languageList,
+ul.fl-videoPlayer-transcripts-languageList li {
+ display: block;
+}
+ul.fl-videoPlayer-transcripts-languageList .fl-videoPlayer-transcript-selected {
+ color: yellow;
+}
+
/*
* Scrub bar controls
*/
@@ -150,6 +182,9 @@ ul.fl-videoPlayer-captions-languageList .fl-videoPlayer-caption-selected {
position: absolute;
}
+.fl-videoPlayer-theme .fl-videoPlayer-transcripts-close-button {
+ background: #ffffff url('../images/close-black.png') no-repeat center center;
+}
/*
* Caption area
@@ -166,6 +201,33 @@ ul.fl-videoPlayer-captions-languageList .fl-videoPlayer-caption-selected {
background-color: black;
opacity: 0.7;
}
+
+/*
+ * Caption area
+ */
+
+.fl-videoPlayer-transcriptArea {
+ float: left;
+ border: 1px solid black;
+ width: 15em;
+}
+
+.fl-videoPlayer-transcripts-language-dropdown {
+ float: left;
+ margin: 1em;
+ width: 75%;
+}
+
+.fl-videoPlayer-transcripts-close-button {
+ float: right;
+ margin: 0.2em;
+}
+
+.fl-videoPlayer-transcript-text {
+ margin-top: 3em;
+ border: 1px solid black;
+}
+
/*
* mods to the coal theme
*/
@@ -302,6 +364,16 @@ ul.fl-videoPlayer-captions-languageList .fl-videoPlayer-caption-selected {
.fl-theme-uio-wb .fl-videoPlayer-captions-button {
background-image: url('../images/captions-white.png');
}
+.fl-theme-uio-bw .fl-videoPlayer-transcripts-button,
+.fl-theme-uio-by .fl-videoPlayer-transcripts-button {
+ background-image: url('../images/transcripts-black.png');
+}
+.fl-theme-uio-yb .fl-videoPlayer-transcripts-button {
+ background-image: url('../images/transcripts-yellow.png');
+}
+.fl-theme-uio-wb .fl-videoPlayer-transcripts-button {
+ background-image: url('../images/transcripts-white.png');
+}
.fl-theme-uio-wb .fl-videoPlayer-caption-captionText,
.fl-theme-uio-yb .fl-videoPlayer-caption-captionText {
View
@@ -112,6 +112,28 @@ <h1>Infusion HTML 5 Video Player</h1>
conversionServiceUrl: "/videoPlayer/conversion_service/index.php",
maxNumber: 3,
track: undefined
+ },
+ transcripts: {
+ sources: {
+ english: {
+ src: "ReorganizeFuture.transcripts.en.json",
+ type: "JSONcc"
+ },
+ francaise: {
+ src: "ReorganizeFuture.transcripts.fr.json",
+ type: "JSONcc"
+ }
+ },
+ currentTrack: "english",
+
+ // The following options (choices, names, selection) shouldn't be necessary.
+ // This is a temporary workaround for FLUID-4585
+ choices: [],
+ names: [],
+ selection: "english",
+
+ show: false,
+ track: undefined
}
}
View
@@ -412,14 +412,15 @@ <h3>Default Controls</h3>
Note: The keyboard control works only if the focus is on the video tag in order not to make it too invasive
</em>
<ul>
- <li>Play/Pause: SHIFT + p or SPACEBAR</li>
- <li>Forward/backward: SHIFT + LEFT/RIGHT</li>
- <li>Volume up/down: SHIFT + UP/DOWN</li>
- <li>Captions On/Off: SHIFT + c</li>
- <li>Fullscreen On/Off: SHIFT + f</li>
- </ul>
- <h3>Modifying the keyboard controls</h3>
- <div>TODO!!!!</div>
+ <li>Play/Pause: SHIFT + p or SPACEBAR</li>
+ <li>Forward/backward: SHIFT + LEFT/RIGHT</li>
+ <li>Volume up/down: SHIFT + UP/DOWN</li>
+ <li>Captions On/Off: SHIFT + c</li>
+ <li>Transcripts On/Off: SHIFT + t</li>
+ <li>Fullscreen On/Off: SHIFT + f</li>
+ </ul>
+ <h3>Modifying the keyboard controls</h3>
+ <div>TODO!!!!</div>
<h2>Note on video format and HTML5</h2>
<p>
In order to be sure to be able to read your video on most browser you'll need to provide more than one source. Here is a list of Browsers and their needed video format. In order to make the player work on IOS (iPhone, iPad) it is necessary to put the mp4 video first.
@@ -1,33 +1,53 @@
-
-<video class="flc-videoPlayer-video fl-videoPlayer-video"></video>
-
-<div class="flc-videoPlayer-captionArea fl-videoPlayer-captionArea"></div>
-
-<div class="flc-videoPlayer-controller fl-videoPlayer-controller">
-
- <div class="flc-videoPlayer-scrubberContainer fl-videoPlayer-scrubberContainer">
- <div class="flc-videoPlayer-current fl-videoPlayer-time fl-videoPlayer-current"></div>
- <div class="flc-videoPlayer-scrubber fl-videoPlayer-scrubber"></div>
- <div class="flc-videoPlayer-total fl-videoPlayer-time fl-videoPlayer-total"></div>
- </div>
-
- <button type="button" class="flc-videoPlayer-play fl-videoPlayer-button fl-videoPlayer-play"></button>
-
- <div class="flc-videoPlayer-volumeContainer fl-videoPlayer-volumeContainer">
- <button type="button" class="flc-videoPlayer-mute fl-videoPlayer-button fl-videoPlayer-mute"></button>
- <div class="flc-videoPlayer-volumeControl"></div>
- </div>
-
- <div class="flc-videoPlayer-captionControls-container">
- <button type="button" class="flc-videoPlayer-captions-button fl-videoPlayer-button fl-videoPlayer-captions-button"></button>
- <ul class="flc-videoPlayer-captions-languageList fl-videoPlayer-captions-languageList">
- <li class="flc-videoPlayer-captions-language">
- <label for="radioid" class="flc-videoPlayer-captions-languageLabel">label</label>
- <input type="radio" id="radioid" class="flc-videoPlayer-captions-languageButton fl-hidden-accessible" />
- </li>
- </ul>
+<div class="flc-videoPlayer-video-controller-area fl-videoPlayer-video-controller-area">
+ <video class="flc-videoPlayer-video"></video>
+
+ <div class="flc-videoPlayer-captionArea fl-videoPlayer-captionArea"></div>
+
+ <div class="flc-videoPlayer-controller fl-videoPlayer-controller">
+
+ <div class="flc-videoPlayer-scrubberContainer fl-videoPlayer-scrubberContainer">
+ <div class="flc-videoPlayer-current fl-videoPlayer-time fl-videoPlayer-current"></div>
+ <div class="flc-videoPlayer-scrubber fl-videoPlayer-scrubber"></div>
+ <div class="flc-videoPlayer-total fl-videoPlayer-time fl-videoPlayer-total"></div>
+ </div>
+
+ <button type="button" class="flc-videoPlayer-play fl-videoPlayer-button fl-videoPlayer-play"></button>
+
+ <div class="flc-videoPlayer-volumeContainer fl-videoPlayer-volumeContainer">
+ <button type="button" class="flc-videoPlayer-mute fl-videoPlayer-button fl-videoPlayer-mute"></button>
+ <div class="flc-videoPlayer-volumeControl"></div>
+ </div>
+
+ <div class="flc-videoPlayer-captionControls-container">
+ <button type="button" class="flc-videoPlayer-captions-button fl-videoPlayer-button fl-videoPlayer-captions-button"></button>
+ <ul class="flc-videoPlayer-captions-languageList fl-videoPlayer-captions-languageList">
+ <li class="flc-videoPlayer-captions-language">
+ <label for="radioid" class="flc-videoPlayer-captions-languageLabel">label</label>
+ <input type="radio" id="radioid" class="flc-videoPlayer-captions-languageButton fl-hidden-accessible" />
+ </li>
+ </ul>
+ </div>
+
+ <div class="flc-videoPlayer-transcriptControls-container">
+ <button type="button" class="flc-videoPlayer-transcripts-button fl-videoPlayer-button fl-videoPlayer-transcripts-button"></button>
+ <ul class="flc-videoPlayer-transcripts-languageList fl-videoPlayer-transcripts-languageList">
+ <li class="flc-videoPlayer-transcripts-language">
+ <label for="radioid" class="flc-videoPlayer-transcripts-languageLabel">label</label>
+ <input type="radio" id="radioid" class="flc-videoPlayer-transcripts-languageButton fl-hidden-accessible" />
+ </li>
+ </ul>
+ </div>
+
+ <button id="fullscreen" type="button" class="flc-videoPlayer-fullscreen fl-videoPlayer-button fl-videoPlayer-fullscreen"></button>
</div>
+</div>
- <button id="fullscreen" type="button" class="flc-videoPlayer-fullscreen fl-videoPlayer-button fl-videoPlayer-fullscreen"></button>
+<div class="flc-videoPlayer-transcriptArea fl-videoPlayer-transcriptArea">
+ <select class="flc-videoPlayer-transcripts-language-dropdown fl-videoPlayer-transcripts-language-dropdown">
+ <option></option>
+ </select>
+ <button type="button" class="flc-videoPlayer-transcripts-close-button fl-videoPlayer-button fl-videoPlayer-transcripts-close-button"></button>
+
+ <div class="flc-videoPlayer-transcript-text fl-videoPlayer-transcript-text"></div>
</div>
View
@@ -65,6 +65,10 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
modifier: $.ui.keyCode.SHIFT,
key: 67
},
+ transcripts: {
+ modifier: $.ui.keyCode.SHIFT,
+ key: 84
+ },
fullscreen: {
modifier: $.ui.keyCode.SHIFT,
key: 70
@@ -206,13 +210,17 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
selectors: {
video: ".flc-videoPlayer-video",
caption: ".flc-videoPlayer-captionArea",
- controllers: ".flc-videoPlayer-controller"
+ controllers: ".flc-videoPlayer-controller",
+ transcripts: ".flc-videoPlayer-transcriptArea",
+ videoControllersContainer: ".flc-videoPlayer-video-controller-area"
},
strings: {
captionsOff: "Captions OFF",
- turnCaptionsOff: "Turn Captions OFF"
+ turnCaptionsOff: "Turn Captions OFF",
+ transcriptsOff: "Transcripts OFF",
+ turnTranscriptsOff: "Turn Transcripts OFF"
},
- selectorsToIgnore: ["caption"],
+ selectorsToIgnore: ["caption", "videoControllersContainer", "transcripts"],
keyBindings: defaultKeys,
produceTree: "fluid.videoPlayer.produceTree",
controls: "custom",
@@ -222,6 +230,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
currentTime: 0,
totalTime: 0,
displayCaptions: true,
+ displayTranscripts: true,
fullscreen: false,
volume: 60,
muted: false,
@@ -238,6 +247,14 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
sources: null,
conversionServiceUrl: "/videoPlayer/conversion_service/index.php",
track: undefined
+ },
+ transcripts: {
+ selection: "none",
+ choices: [],
+ names: [],
+ show: false,
+ sources: null,
+ track: undefined
}
},
templates: {
@@ -272,6 +289,15 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
value: !that.model.states.displayCaptions
});
}
+ }, {
+ modifier: that.options.keyBindings.transcripts.modifier,
+ key: that.options.keyBindings.transcripts.key,
+ activateHandler: function () {
+ that.applier.fireChangeRequest({
+ path: "states.displayTranscripts",
+ value: !that.model.states.displayTranscripts
+ });
+ }
}, {
modifier: that.options.keyBindings.volumePlus.modifier,
key: that.options.keyBindings.volumePlus.key,
@@ -304,8 +330,10 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
that.play();
});
video.bind("loadedmetadata", function () {
+ var videoControllersContainer = that.locate("videoControllersContainer");
//that shouldn't be usefull but the video is too big if it's not used
- that.container.css("width", video[0].videoWidth);
+ videoControllersContainer.css("width", video[0].videoWidth);
+ that.locate("transcripts").css("height", videoControllersContainer.height());
bindKeyboardControl(that);
});
};
@@ -353,21 +381,37 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
that.options.model.captions.choices.push("none");
that.options.model.captions.names.push(that.options.strings.captionsOff);
+ // build the 'choices' from the transcript list provided
+ fluid.each(that.options.model.transcripts.sources, function (value, key) {
+ that.options.model.transcripts.choices.push(key);
+ that.options.model.transcripts.names.push(key);
+ });
+ // add the 'turn transcripts off' option
+ that.options.model.transcripts.choices.push("none");
+ that.options.model.transcripts.names.push(that.options.strings.transcriptsOff);
+
that.fullscreen = function () {
var video = that.locate("video");
+ var videoControllersContainer = that.locate("videoControllersContainer");
if (that.model.states.fullscreen === true) {
- that.container.css({
+ video.css({
// TODO: This doesn't actually do full-screen, it simply tries to maximise
// to the current window size. (FLUID-4570)
width: window.innerWidth + "px",
height: window.innerHeight - 20 + "px"
});
+
+ // Adjust the height of video + controllers area & transcripts area
+ videoControllersContainer.css({width: window.innerWidth + "px"});
} else {
- that.container.css({
+ video.css({
width: video[0].videoWidth,
height: video[0].videoHeight
});
+
+ videoControllersContainer.css({width: video[0].videoWidth});
}
+ that.locate("transcripts").css("height", videoControllersContainer.height());
};
};
Oops, something went wrong.

0 comments on commit 87ba52e

Please sign in to comment.