Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
  • 2 commits
  • 2 files changed
  • 0 commit comments
  • 2 contributors
Commits on May 03, 2013
@jobara VP-311: removed docs directory.
The documentation will be maintained on the wiki.
be8fb2f
@michelled michelled Merge remote-tracking branch 'jobara/VP-311'
* jobara/VP-311:
  VP-311: removed docs directory.
9ce10c1
Showing with 0 additions and 484 deletions.
  1. BIN  docs/img/model_videoplayer.png
  2. +0 −484 docs/index.html
View
BIN  docs/img/model_videoplayer.png
Deleted file not rendered
View
484 docs/index.html
@@ -1,484 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-<html>
-<head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>VideoPlayer API - Fluid Project Wiki</title>
-</head>
-<body>
- <h1>VideoPlayer API</h1>
- <h2>VideoPlayer Overview</h2>
- <div>
- <p>
- The VideoPlayer will render a fully working videoPlayer with controllers
- and captions. <br/>
- The player is fully compatible with FF5 and later Chrome 12,
- Safari 4 and later, and IE9.
- On non html 5 compatible browsers (IE versions older than 9) it will fallback to a flashplayer.
- The player is compatible with many different formats* of captions if you use the server side
- conversion service. If you don't wish to use it JSONcc format is the only caption format not
- working.
- <p>* DFXP, DvdStl, JSONcc, MicroDvd, MPlayer, QTSMIL, QTtext, RealText, Sami, Scc, SubRipSrt, SubViewer</p>
- </p>
- </div>
- <h2>Creator</h2>
- <div>
- <p>Calling the creator function is quite easy: </p>
- <pre>
- fluid.videoPlayer(container [,options]);
- </pre>
- <p>
- Such a simple call will not get you anywhere so here are some
- basic options if you don't to go through the whole documentation.<br/>
- The whole video player is based on a shared model, to make the videoPlayer work
- you'll need at least to give links to your video to it. Here is how to do so:
- </p>
- <pre>
- fluid.videoPlayer(container, {
- model: {
- video: {
- sources:[
- /* here we had any source we want
- (if you are not familiar with HTML5 video please read "Note on video format and HTML5")*/
- {
- src: "my video link",
- type: "choose between: video/mp4, video/webm, video/ogg, video/ogv, youtube (link to the youtube video)"
- },
- /*You can add as many different video link the browser will choose the one to actually parse*/
- ]
- }
- }
- });
- </pre>
- <p>
- The next thing you may want to do is to add captions to the video, to do that had a caption object in the model:
- </p>
- <pre>
- captions: {
- sources: {
- "the name of your caption track (eg english)": {
- src: "a link to find it",
- type: "it's format "
- }
- /*add as many captions as wanted there*/
- },
- currentTrack: "the track that will be automatically loaded when the player is loaded"
- }
- </pre>
- <p>
- These 2 basic options will enable you to have a basic player with captions and video
- </p>
- </div>
- <h2>Options</h2>
- <h3>Model</h3>
- <p>
- The model is the main configurable element. It contains all the data that is needed by the videoPlayer to work.
- However be careful because all the elements of the model are not configurable as they are not in control of the user.
- </p>
- <p>
- Here is a tree representation of the model.
- <ul>
- <li>The red branches are those that should be never modified as they are
- generated by the videoplayer itself. </li>
- <li>The green branches are those opened to be modified by the user.</li>
- </ul>
- Please Note that the type of each node is put in parenthesis next to the their name.
- </p>
- <img src="img/model_videoplayer.png" alt="a tree representation of videoplayer's model"/>
- <p>Here is a quick explanation of each node and its default value</p>
- <table>
- <tbody>
- <tr>
- <th>Name</th>
- <th>Default</th>
- <th>Type</th>
- <th>Modifiable</th>
- <th>Description</th>
- </tr>
- <td>states.play</td>
- <td>false</td>
- <td>Boolean</td>
- <td>Yes</td>
- <td>This indicates if the video plays or not (put it to true in the options if you want on autoplay)</td>
- <tr>
- <td>states.currentTime</td>
- <td>0</td>
- <td>Integer</td>
- <td>No</td>
- <td>The currentTime of the video in milliseconds</td>
- </tr>
- <tr>
- <td>states.totalTime</td>
- <td>0</td>
- <td>Integer</td>
- <td>No</td>
- <td>The totalTime of the video in milliseconds equivalent to the HTML video's duration </td>
- </tr>
- <tr>
- <td>states.displayCaptions</td>
- <td>true</td>
- <td>Boolean</td>
- <td>Yes</td>
- <td>Wether or not you can see the captions</td>
- </tr>
- <tr>
- <td>states.fullscreen</td>
- <td>false</td>
- <td>Boolean</td>
- <td>Yes</td>
- <td>Choose if the videoPlayer is fullscreen or not</td>
- </tr>
- <tr>
- <td>video.sources</td>
- <td>null</td>
- <td>Js Object</td>
- <td>Yes</td>
- <td>Contains the links to the different versions of the video (see creator)</td>
- </tr>
- <tr>
- <td>captions.sources</td>
- <td>null</td>
- <td>Js Object</td>
- <td>Yes</td>
- <td>Contains the links to the different caption tracks (see creator)</td>
- </tr>
- <tr>
- <td>video.maxNumber</td>
- <td>3</td>
- <td>Integer</td>
- <td>Yes</td>
- <td>For captions format that allow more than one caption at a time, this is the
- maximum number of simultaneous captions</td>
- </tr>
- <tr>
- <td>video.currentTrack</td>
- <td>undefined</td>
- <td>String</td>
- <td>Yes</td>
- <td>The current track to be displayed(Has to be a key to the captions.sources)</td>
- </tr>
- <tr>
- <td>video.conversionServiceUrl</td>
- <td>"/videoPlayer/conversion_service/index.php"</td>
- <td>String (URI)</td>
- <td>Yes</td>
- <td>the link to the conversion service page (to be changed only if you moved your conversion service)</td>
- </tr>
- <tr>
- <td>video.currentCaptions</td>
- <td>undefined</td>
- <td>array</td>
- <td>No</td>
- <td>an array of the captions currently displayed on screen</td>
- </tr>
- <tr>
- <td>video.track</td>
- <td>undefined</td>
- <td>array</td>
- <td>No</td>
- <td>contains the whole current caption track</td>
- </tr>
- <tr>
- <td>video.currentIndex</td>
- <td>undefined</td>
- <td>Integer</td>
- <td>No</td>
- <td>The last index of the captions.track array (this points to the last captions displayed on screen)</td>
- </tr>
- </tbody>
- </table>
- <h2>Supported Events</h2>
- <table>
- <tr>
- <th>Event</th>
- <th>Type</th>
- <th>Description</th>
- <th>Parameters</th>
- <th>Parameter Description</th>
- </tr>
- <tr>
- <td>onMediaReady</td>
- <td>Default</td>
- <td>Notice that the videoPlayer.media subcomponent is created and can be used</td>
- <td></td>
- <td></td>
- </tr>
- <tr>
- <td>onControllersReady</td>
- <td>Default</td>
- <td>Notice that the videoPlayer.controllers subcomponent is created and can be used</td>
- <td></td>
- <td></td>
- </tr>
- <tr>
- <td>onCaptionnerReady</td>
- <td>Default</td>
- <td>Notice that the videoPlayer.captionner subcomponent is created and can be used</td>
- <td></td>
- <td></td>
- </tr>
- <tr>
- <td>onViewReady</td>
- <td>Default</td>
- <td>Notice that everything is rendered and the video loaded</td>
- <td></td>
- <td></td>
- </tr>
- <tr>
- <td>onTemplateReady</td>
- <td>Default</td>
- <td>Notice that all the templates have been successfully loaded. Note that if any one template fails to load, this event will not fire, and onTemplateLoadError will fire instead.</td>
- <td></td>
- <td></td>
- </tr>
- <tr>
- <td>onTemplateLoadError</td>
- <td>Default</td>
- <td>Fires for any template that doesn't load.</td>
- <td>key, href</td>
- <td>key: the key related to the failed template<br />
- href: the URL of the failed template
- </td>
- </tr>
- <tr>
- <td>onReadyToLoadCaptions</td>
- <td>Default</td>
- <td>Notice that all components needed to load a caption track has been successfully instantiated</td>
- <td></td>
- <td></td>
- </tr>
- <tr>
- <td>onCaptionsLoaded</td>
- <td>Default</td>
- <td>Notice that the caption has been successfully loaded and that it is ready to parse</td>
- <td>track</td>
- <td>track: the caption file that has just been loaded</td>
- </tr>
- <tr>
- <td>onOldBrowerDetected</td>
- <td>Default</td>
- <td>Notice if non HTML5 browser has been detected</td>
- <td>browser</td>
- <td>browser: the jQuery browser object </td>
- </tr>
- <tr>
- <td>onVolumeChange</td>
- <td>Default</td>
- <td>Event raised to change the volume</td>
- <td>volume</td>
- <td>volume: the new volume value (float between 0 and 1)</td>
- </tr>
- <tr>
- <td>onTimeChange</td>
- <td>Default</td>
- <td>Event raised to change the time</td>
- <td>time</td>
- <td>time: the new time value in milliseconds</td>
- </tr>
- <tr>
- <td>onStartTimeChange</td>
- <td>Default</td>
- <td>Event raised when the time of the scrubber is modified</td>
- <td></td>
- <td></td>
- </tr>
- <tr>
- <td>afterTimeChange</td>
- <td>Default</td>
- <td>Event raised when the time has changed</td>
- <td></td>
- <td></td>
- </tr>
- </table>
- <h3>Other options</h3>
- <b>TODO!!!!</b>
- <h2>Selectors</h2>
- <p>
- Here is a list of all the components and their selectors.
- You can see and modify the default layout in the template
- (by default in "html/videoPlayer_template.html"). However,
- it is recommended not to modify the selectors.
- It is indicated when they are not uniquely present in the component.
- </p>
- <h3>VideoPlayer</h3>
- <ul>
- <li>video: "flc-videoPlayer-video"</li>
- <li>controllers: "flc-videoPlayer-controllers"</li>
- <li>captionner: "flc-videoPlayer-captionner"</li>
- </ul>
- <h3>Controllers</h3>
- <ul>
- <li>play: "flc-videoPlayer-play"</li>
- <li>displayCaptions: "flc-videoPlayer-caption"</li>
- <li>fullscreen: "flc-videoPlayer-fullscreen"</li>
- <li>scrubberContainer: "flc-videoPlayer-scrubberContainer"</li>
- <li>volumeContainer: "flc-videoPlayer-volumeContainer"</li>
- <li>menuContainer: "flc-videoPlayer-menuContainer"</li>
- </ul>
- <h3>Scrubber</h3>
- <ul>
- <li>totalTime: "flc-videoPlayer-total"</li>
- <li>currentTime: "flc-videoPlayer-current"</li>
- <li>scrubber: "flc-videoPlayer-scrubber"</li>
- </ul>
- <h3>Volume control</h3>
- <ul>
- <li>volume: "flc-videoPlayer-volume"</li>
- <li>volumeControl: "flc-videoPlayer-volumeControl"</li>
- </ul>
- <h3>Menu</h3>
- <ul>
- <li>menuButton: "flc-videoPlayer-menu-button"</li>
- <li>menu: "flc-videoPlayer-menu-container"</li>
- <li>captions: ".flc-videoPlayer-menu-captions"</li>
- <li>title: ".flc-videoPlayer-menu-title"</li>
- <li>input: ".flc-videoPlayer-menu-input" (repeated)</li>
- <li>element: ".flc-videoPlayer-menu-element" (repeated)</li>
- <li>label: ".flc-videoPlayer-menu-label" (repeated)</li>
- <li>helpButton: "flc-videoPlayer-menu-helpButton"</li>
- <li>help: "flc-videoPlayer-menu-help"</li>
- </ul>
- <h3>Captionner</h3>
- <ul>
- <li>caption: "flc-videoPlayer-caption-captionText" (repeated)</li>
- </ul>
- <h2>CSS Classes</h2>
- Here are the names of the classes used by a videoPlayer you can obviously
- modify them either through the options or directly through the template
- (by default in "html/videoPlayer_template.html").<br/>
- Please notice that everything in the controller that is not a container is part of <a href="http://jqueryui.com/">jQuery UI</a>
- <h3>VideoPlayer</h3>
- <ul>
- <li>fl-videoPlayer-video: The video tag that will contain the video
- (can be a div when the browser don't support video tags)</li>
- <li>fl-videoPlayer-captionArea: The container of all the captions</li>
- <li>fl-videoPlayer-controller: The container of the controller</li>
- </ul>
- <h3>Captionner</h3>
- <ul>
- <li>fl-videoPlayer-caption-captionText: the container of a caption</li>
- </ul>
- <h3>Controllers</h3>
- <ul>
- <li>fl-videoPlayer-scrubberContainer: the container
- of the scrubber and the times </li>
- <li>fl-videoPlayer-playButton: the play button</li>
- <li>fl-videoPlayer-volumeContainer: the container of the volumeButton and its control slider</li>
- <li>fl-videoPlayer-captionButton: the caption button</li>
- <li>fl-videoPlayer-fullscreenButton: the fullscreen button</li>
- <li>fl-videoPlayer-menuContainer: the container of the menu and its button</li>
- <li>fl-videoPlayer-state-play: on the play button when the video is playing</li>
- <li>fl-videoPlayer-state-pause: on the play button when the video is paused</li>
- <li>fl-videoPlayer-state-captionOn: on the caption button when the captions are displayed</li>
- <li>fl-videoPlayer-state-captionOff: on the caption button when the captions are hidden</li>
- <li>fl-videoPlayer-state-fullscreenOn: on the fullscreen button when the video is fullscreen</li>
- <li>fl-videoPlayer-state-fullscreenOff: on the fullscreen button when the video is not on fullscreen</li>
- <li>ui-icon-pause: play/pause button's icon when the video is playing</li>
- <li>ui-icon-play: play/pause button's icon when the video is paused</li>
- <li>ui-icon-extlink: the icon on the fullscreen button </li>
- <li>ui-icon-comment: the icon on the caption button</li>
- </ul>
- <h3>Scrubber</h3>
- <ul>
- <li>fl-videoPlayer-time: class shared by the current and total time</li>
- <li>fl-videoPlayer-current: the current time container</li>
- <li>fl-videoPlayer-total: the total time container</li>
- <li>fl-videoPlayer-scrubber: the scrubber slider</li>
- </ul>
- <h3>Volume control</h3>
- <ul>
- <li>fl-videoPlayer-volume: the volume button</li>
- <li>fl-videoPlayer-volumeControl: the volume slider</li>
- </ul>
- <h3>Menu</h3>
- <ul>
- <li>fl-videoPlayer-menu-button: the menu button</li>
- <li>fl-videoPlayer-menu-captions: the subMenu for the captions</li>
- <li>fl-videoPlayer-menu-title: submenu title</li>
- <li>flc-videoPlayer-menu-container: the container of a menu list</li>
- <li>fl-videoPlayer-menu-element: the container of an element of the menu</li>
- </ul>
- <p>
- Note: You can obviously modify any class easier by modifying them in
- the template (for those who are not dynamic) or through the options of each component.
- </p>
- <h2>Keyboard controls</h2>
- <h3>Default Controls</h3>
- <p>
- The videoplayer comes with some default keyboard control that are describe here.
- you can modify them with the "keyBindings" option as described in the "option" section.
- Also every element is accessible with the "tab" key and activable with arrows or return or space bar.
- </p>
- <em>
- 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>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.
- </p>
- <ul>
- <li>mp4 H264: Google Chrome and Apple Safari (video/mp4)</li>
- <li>Ogg Theora: Firefox, Opera and Google Chrome (video/ogg, video/ogv)</li>
- <li>WebM: Firefox 4,Opera 10.6, Chrome, IE9 (codec needed) (video/webm)</li>
- <li>YouTube link: old browsers (youtube)</li>
- </ul>
- <h2>Dependances</h2>
- <div>The video player depends on Fluid Infusion but also a few elements outside from it (they are in the folder utils)</div>
- <ul>
- <li>jQuery UI buttons</li>
- <li>jQuery escapeSelector plugin</li>
- <li>HTML5-backcompat</li>
- </ul>
- <div>These are the necessary Infusion elements:</div>
- <ul>
- <li> lib/jquery/core/js/jquery.js</li>
- <li> lib/jquery/ui/js/jquery.ui.core.js</li>
- <li> lib/jquery/ui/js/jquery.ui.widget.js</li>
- <li> lib/jquery/ui/js/jquery.ui.mouse.js</li>
- <li> lib/jquery/ui/js/jquery.ui.slider.js</li>
- <li> lib/jquery/ui/js/jquery.ui.draggable.js</li>
- <li> lib/jquery/ui/js/jquery.ui.position.js</li>
- <li> lib/jquery/ui/js/jquery.ui.dialog.js</li>
- <li> framework/core/js/jquery.keyboard-a11y.js</li>
- <li> lib/jquery/plugins/scrollTo/js/jquery.scrollTo.js</li>
- <li> lib/swfobject/js/swfobject.js</li>
- <li> lib/swfupload/js/swfupload.js</li>
- <li> framework/core/js/Fluid.js</li>
- <li> framework/core/js/FluidDocument.js</li>
- <li> framework/core/js/FluidDebugging.js</li>
- <li> framework/core/js/FluidDOMUtilities.js</li>
- <li> framework/core/js/FluidView.js</li>
- <li> framework/core/js/FluidRequests.js</li>
- <li> framework/core/js/DataBinding.js</li>
- <li> framework/core/js/FluidIoC.js</li>
- <li> framework/core/js/ModelTransformations.js</li>
- <li> framework/enhancement/js/ProgressiveEnhancement.js</li>
- <li> framework/renderer/js/fluidParser.js</li>
- <li> framework/renderer/js/fluidRenderer.js</li>
- <li> framework/renderer/js/RendererUtilities.js</li>
- <li> lib/fastXmlPull/js/fastXmlPull.js</li>
- </ul>
- <h2>Brief architecture</h2>
- <p>
- TODO!!!!!
- </p>
- <h2>Components</h2>
- <p>
- TODO!!!!!
- </p>
- <h2>Modify the layout</h2>
- <p>
- TODO!!!!!
- </p>
-</body>
-</html>
-

No commit comments for this range

Something went wrong with that request. Please try again.