Open main menu

CDOT Wiki β

Difference between revisions of "BBB"

(Created page with '== NFB HTML 5 Video Player == Sample Project -- This is a template only! == Project Description == Description should be no longer than a paragraph. Include links to any rele…')
 
(→‎Releases)
 
(65 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
== NFB HTML 5 Video Player ==
+
== HTML 5 Open Video Player ==
  
−
Sample Project -- This is a template only!
+
The BBB is seeking to create an online video player using HTML5 and JavaScript.
  
 
== Project Description ==
 
== Project Description ==
  
−
Description should be no longer than a paragraph. Include links to any relevant on-line resources.  For example, http://google.com or [http://developer.mozilla.org MDC].
+
Inspired by [[PopcornOpenVideoAPI|Popcorn.js]] the BBB is looking to develop a video player using HTML5 and JavaScript. Extending on the basic video capabilities of play/pause/stop/volume, this player will be skinnable for consistent viewing across web browsers, and a large focus will be placed on accessibility in the form of subtitles and screen reader compatibility as well as social networking interaction. Complete information can be seen at the BBB's [http://developer.nfb.ca/trac/web/wiki/NFBHTML5videoplayer developer centre].
  
 
== Project Leader(s) ==
 
== Project Leader(s) ==
−
 
+
* [[User:Kclascon|Kevin Lasconia]]
−
Name(s) of primary people working on the project.  If you want to join a project as leader, discuss with other leaders first.  Include links to personal pages within wiki
+
* [[User:Sweerdenburg|Steven Weerdenburg]]
  
 
== Project Contributor(s) ==
 
== Project Contributor(s) ==
  
 +
TBA
 +
<!--
 
Name(s) of people casually working on the project, or who have contributed significant help.  Include links to personal pages within wiki
 
Name(s) of people casually working on the project, or who have contributed significant help.  Include links to personal pages within wiki
  
−
NOTE: only Project Leader(s) should add names here.  You '''can’t''' add your own name to the Contributor list.
+
NOTE: only Project Leader(s) should add names here.  You '''can’t''' add your own name to the Contributor list. -->
  
 
== Project Details ==
 
== Project Details ==
  
−
Provides more depth than the Project Description. This is the place for technical discussions, project specs, or other details. If this gets very long, you might consider breaking this part into multiple pages and linking to them.
+
Below is a listing of project details.
 +
 
 +
===Core Fuctionality===
 +
* Play/Pause/Stop
 +
* Variable Volume/Mute
 +
* Seeking, visible time codes, total duration
 +
* Flash fallback if HTML5 is not fully supported
 +
* Player resizing, ability for fullscreen
 +
* Multiple codec support (mp4/h264, vp6), browser dependant?
 +
* Completely customizable visuals through CSS
 +
* Accessibility (Keyboard-only, screen-reader support)
 +
* Internationalization (driven from config file)
 +
 
 +
===Extensible Required Features===
 +
* Ratings (mature content, violence, sexuality)
 +
* Support multiple streaming methods (rtmp, rtmpt, rtsp, http)
 +
* Support multiple streaming speeds (low, medium, high)
 +
* Subtitles support in TTXT
 +
* Audio description playback – detect the MP4 audio track specific to Audio description
 +
* Statistics : IP, onLoad, start, reached 25%, 50%, 75%, 90%, 100%, CC_ON, CC_OFF, AD_ON, AD_OFF (must be sent to NFB server)
 +
* JSON, AMF support to interact with the NFB video management environment.
 +
* Watermark overlay on the video.
 +
* Source hiding : Provide the user with an ObjectID in order to hide the real address of the film in order to prevent downloads.
 +
* Like feature. Within the player, users should have the ability to “like” a film. If the user is log in to the site, this features should populate his profile. If the user is not logged in, then it’s a simple add to build “most liked” film lists.
 +
 
 +
===Optional Features===
 +
* Message overlay on load, pause/stop, end
 +
* Message overlay at specific in and out point
 +
* Recommendation at 90% of the film: once the film reaches the 90% mark, related films should be suggested with thumbnails, titles and duration. This needs to appear as a layer over the video
 +
* Follow feature: The follow features means the user will be notified every time there is a comment on the film. This should be linked to the user profile, hence the user must be authenticated.
 +
* Google translation: Give users the ability to get the machine translation from Google based on the subtitles of the film.
 +
 
 +
===Page & Player Interaction===
 +
* Visual bookmarking
 +
* Video chaptering
 +
* Video assembly from multiple chapters of multiple videos
 +
 
 +
== Releases ==
 +
* 0.1
 +
** Video chapter creation
 +
** Video chapter playback
 +
** Sequential video chapter playback
 +
** JSON Serialization and Deserialization for Bookmark objects
 +
** Dynamic DOM creation (Bookmark objects)
 +
** [http://matrix.senecac.on.ca/~kclascon/DPS909/BBB/Demos/demo.html Working demo]
 +
 
 +
* 0.2
 +
** TTXT-formatted subtitle support
 +
** Text suite framework
 +
** Remote retrieval of JSON-formatted chapter data
 +
** Simpler library interface
 +
** Watermark overlay
 +
** Statistics
 +
** Recommendations
 +
** HTML5 local storage support (experimental)
 +
* 0.3
 +
** Subtitle toggling
 +
** Time In/Out Buttons for setting bookmark times
 +
** Popcorn-formatted metadata generation
 +
** Drag and drop re-ordering of bookmarks
 +
** HTML5 Local storage
 +
** Re-factored watermark overlay
 +
** Fixed sequential bookmark play bug
 +
 
 +
 
 +
{| class="standard-table" border="1"
 +
|-
 +
|'''Functionality'''
 +
|'''Assigned To'''
 +
|'''GitHub Branch'''
 +
|'''Last Updated'''
 +
|'''Blog'''
 +
|'''Demo'''
 +
|-
 +
| TTXT Subtitle Parsing and Loading
 +
| Steven
 +
| [https://github.com/stevenaw/BBB/tree/TTXTSubs TTXTSubs]
 +
| November 10, 2010
 +
| [http://sweerdenburg.wordpress.com/2010/11/10/ttxt-subtitling-for-bbb-video-player/ Blog]
 +
| [http://matrix.senecac.on.ca/~sweerdenburg/Projects/DPS909/BBB/Demos/demoTTXT.html TTXT Demo]
 +
|-
 +
| Fix Event Overriding so that Video.js and BBB.js can respond to the same event
 +
| Steven
 +
| Seems to have resolved.
 +
| November 10, 2010
 +
| -
 +
| [http://matrix.senecac.on.ca/~sweerdenburg/Projects/DPS909/BBB/Demos/demo.html Subtitling and Chapter Control both use timeupdate]
 +
|-
 +
| Reactor Library for JS Best Practices
 +
| Steven
 +
| [https://github.com/stevenaw/BBB/tree/RefactorToJSON RefactorToJSON]
 +
| November 10, 2010
 +
| [http://sweerdenburg.wordpress.com/2010/11/07/javascript-the-nitty-gritty/ Blog]
 +
| -
 +
|-
 +
| Test Suite Framework
 +
| Steven
 +
| [https://github.com/stevenaw/BBB/tree/testSuite testSuite]
 +
| November 10, 2010
 +
| [http://sweerdenburg.wordpress.com/2010/11/10/bbbtest-framework-skeleton/ Blog]
 +
| [http://matrix.senecac.on.ca/~sweerdenburg/Projects/DPS909/BBB/Tests/test.html Test Demos]
 +
|-
 +
| Remote Querying of Chapter Information (JSON formatted array)
 +
| Steven
 +
| [https://github.com/stevenaw/BBB/tree/remoteQuery remoteQuery]
 +
| November 13, 2010
 +
| [http://sweerdenburg.wordpress.com/2010/11/15/bbb-remote-bookmarks/ Blog]
 +
| [http://matrix.senecac.on.ca/~sweerdenburg/Projects/DPS909/BBB/Demos/demo.html Demo]
 +
|-
 +
| Add HTML5 local storage to BBB.js to simulate storage environment
 +
| Kevin
 +
| [https://github.com/klasconia/BBB/tree/html5Storage HTML5 storage]
 +
| November 14, 2010
 +
| WIP - will refactor later
 +
| -
 +
|-
 +
| Watermark overlay
 +
| Kevin
 +
| [https://github.com/klasconia/BBB/tree/rec Watermark overlay]
 +
| November 18, 2010
 +
| -
 +
| [http://matrix.senecac.on.ca/~kclascon/DPS909/demos/0.2/Demos/recDemo.html Demo]
 +
|-
 +
| Like Feature
 +
| Kevin
 +
| -
 +
| -
 +
| -
 +
| -
 +
|-
 +
| Statistics
 +
| Kevin
 +
| [https://github.com/klasconia/BBB/tree/rec Statistics]
 +
| November 18, 2010
 +
| -
 +
| [http://matrix.senecac.on.ca/~kclascon/DPS909/demos/0.2/Demos/recDemo.html Demo]
 +
|-
 +
| Video recommendation
 +
| Kevin
 +
| [https://github.com/klasconia/BBB/tree/rec Video recommendation]
 +
| November 18, 2010
 +
| -
 +
| [http://matrix.senecac.on.ca/~kclascon/DPS909/demos/0.2/Demos/recDemo.html Demo]
 +
|-
 +
| [https://github.com/stevenaw/BBB/issues/issue/3 Fix: Need to distinguish subtitles by movie]
 +
| Steven
 +
| -
 +
| -
 +
| -
 +
| -
 +
|-
 +
| Internationalization/Settings File
 +
| Steven
 +
| -
 +
| -
 +
| -
 +
| -
 +
|-
 +
| Add/remove chapters hooked up to remote data source
 +
| Steven
 +
| -
 +
| -
 +
| -
 +
| -
 +
|-
 +
| Toggleable Subtitles (functionality and stats)
 +
| Steven
 +
| -
 +
| -
 +
| -
 +
| -
 +
|-
 +
| Keyboard Accessibility
 +
| Steven
 +
| -
 +
| -
 +
| -
 +
| -
 +
|-
 +
| Re-factor 0.2 code
 +
| Kevin
 +
| -
 +
| -
 +
| -
 +
| -
 +
|-
 +
| Source Hiding
 +
| Kevin
 +
| -
 +
| -
 +
| -
 +
| -
 +
|-
 +
| HTML5 Local Storage (integration with storage module)
 +
| Kevin
 +
| [https://github.com/klasconia/BBB/tree/0.3B HTML5 Local Storage integration]
 +
| December 09, 2010
 +
| -
 +
|
 +
|-
 +
| Fix sequential order bug
 +
| Kevin
 +
| [https://github.com/klasconia/BBB/tree/0.3B Sequential Order Bug Resolved]
 +
| December 10, 2010
 +
| -
 +
| [http://matrix.senecac.on.ca/~kclascon/DPS909/demos/0.3B/BBB/Demos/fixedDemo.html Demo]
 +
|-
 +
| Re-factor watermark overlay
 +
| Kevin
 +
| [https://github.com/klasconia/BBB/tree/0.3B Watermark Overlay (Re-factored)]
 +
| December 13, 2010
 +
| -
 +
| [http://matrix.senecac.on.ca/~kclascon/DPS909/demos/0.3B/BBB/Demos/fixedDemo.html Demo]
 +
|-
 +
| Re-factor Drag and Drop Bookmark Ordering
 +
| Kevin
 +
| [https://github.com/klasconia/BBB/tree/0.3B Drag and Drop Bookmark Ordering (Re-factored)]
 +
| December 13, 2010
 +
| -
 +
| [http://matrix.senecac.on.ca/~kclascon/DPS909/demos/0.3B/BBB/Demos/orderDemo.html Demo]
 +
|}
 +
 
 +
== Source Code ==
 +
* [http://github.com/klasconia/BBB GitHub] - Kevin
 +
* [http://github.com/stevenaw/BBB GitHub] - Steven
 +
 
 +
== Lighthouse Account ==
 +
* [https://webmademovies.lighthouseapp.com/projects/64427-bbb/overview BBB]
  
 
== Project News ==
 
== Project News ==
  
−
This is where your regular updates will go. In these you should discuss the status or your work, your interactions with other members of the community (e.g., Seneca and Mozilla), problems you have encountered, etc.
+
* '''10/22/10''' - Release 0.1
−
 
+
* '''11/16/10''' - Release 0.2
−
Put detailed technical information into the Project Details page (i.e., update it as you go), and save this section for news about participation in the project.
+
* '''12/08/10 & 12/15/10''' - Release 0.3
 +
<!-- Put detailed technical information into the Project Details page (i.e., update it as you go), and save this section for news about participation in the project. -->

Latest revision as of 18:25, 15 December 2010

HTML 5 Open Video Player

The BBB is seeking to create an online video player using HTML5 and JavaScript.

Project Description

Inspired by Popcorn.js the BBB is looking to develop a video player using HTML5 and JavaScript. Extending on the basic video capabilities of play/pause/stop/volume, this player will be skinnable for consistent viewing across web browsers, and a large focus will be placed on accessibility in the form of subtitles and screen reader compatibility as well as social networking interaction. Complete information can be seen at the BBB's developer centre.

Project Leader(s)

Project Contributor(s)

TBA

Project Details

Below is a listing of project details.

Core Fuctionality

  • Play/Pause/Stop
  • Variable Volume/Mute
  • Seeking, visible time codes, total duration
  • Flash fallback if HTML5 is not fully supported
  • Player resizing, ability for fullscreen
  • Multiple codec support (mp4/h264, vp6), browser dependant?
  • Completely customizable visuals through CSS
  • Accessibility (Keyboard-only, screen-reader support)
  • Internationalization (driven from config file)

Extensible Required Features

  • Ratings (mature content, violence, sexuality)
  • Support multiple streaming methods (rtmp, rtmpt, rtsp, http)
  • Support multiple streaming speeds (low, medium, high)
  • Subtitles support in TTXT
  • Audio description playback – detect the MP4 audio track specific to Audio description
  • Statistics : IP, onLoad, start, reached 25%, 50%, 75%, 90%, 100%, CC_ON, CC_OFF, AD_ON, AD_OFF (must be sent to NFB server)
  • JSON, AMF support to interact with the NFB video management environment.
  • Watermark overlay on the video.
  • Source hiding : Provide the user with an ObjectID in order to hide the real address of the film in order to prevent downloads.
  • Like feature. Within the player, users should have the ability to “like” a film. If the user is log in to the site, this features should populate his profile. If the user is not logged in, then it’s a simple add to build “most liked” film lists.

Optional Features

  • Message overlay on load, pause/stop, end
  • Message overlay at specific in and out point
  • Recommendation at 90% of the film: once the film reaches the 90% mark, related films should be suggested with thumbnails, titles and duration. This needs to appear as a layer over the video
  • Follow feature: The follow features means the user will be notified every time there is a comment on the film. This should be linked to the user profile, hence the user must be authenticated.
  • Google translation: Give users the ability to get the machine translation from Google based on the subtitles of the film.

Page & Player Interaction

  • Visual bookmarking
  • Video chaptering
  • Video assembly from multiple chapters of multiple videos

Releases

  • 0.1
    • Video chapter creation
    • Video chapter playback
    • Sequential video chapter playback
    • JSON Serialization and Deserialization for Bookmark objects
    • Dynamic DOM creation (Bookmark objects)
    • Working demo
  • 0.2
    • TTXT-formatted subtitle support
    • Text suite framework
    • Remote retrieval of JSON-formatted chapter data
    • Simpler library interface
    • Watermark overlay
    • Statistics
    • Recommendations
    • HTML5 local storage support (experimental)
  • 0.3
    • Subtitle toggling
    • Time In/Out Buttons for setting bookmark times
    • Popcorn-formatted metadata generation
    • Drag and drop re-ordering of bookmarks
    • HTML5 Local storage
    • Re-factored watermark overlay
    • Fixed sequential bookmark play bug


Functionality Assigned To GitHub Branch Last Updated Blog Demo
TTXT Subtitle Parsing and Loading Steven TTXTSubs November 10, 2010 Blog TTXT Demo
Fix Event Overriding so that Video.js and BBB.js can respond to the same event Steven Seems to have resolved. November 10, 2010 - Subtitling and Chapter Control both use timeupdate
Reactor Library for JS Best Practices Steven RefactorToJSON November 10, 2010 Blog -
Test Suite Framework Steven testSuite November 10, 2010 Blog Test Demos
Remote Querying of Chapter Information (JSON formatted array) Steven remoteQuery November 13, 2010 Blog Demo
Add HTML5 local storage to BBB.js to simulate storage environment Kevin HTML5 storage November 14, 2010 WIP - will refactor later -
Watermark overlay Kevin Watermark overlay November 18, 2010 - Demo
Like Feature Kevin - - - -
Statistics Kevin Statistics November 18, 2010 - Demo
Video recommendation Kevin Video recommendation November 18, 2010 - Demo
Fix: Need to distinguish subtitles by movie Steven - - - -
Internationalization/Settings File Steven - - - -
Add/remove chapters hooked up to remote data source Steven - - - -
Toggleable Subtitles (functionality and stats) Steven - - - -
Keyboard Accessibility Steven - - - -
Re-factor 0.2 code Kevin - - - -
Source Hiding Kevin - - - -
HTML5 Local Storage (integration with storage module) Kevin HTML5 Local Storage integration December 09, 2010 -
Fix sequential order bug Kevin Sequential Order Bug Resolved December 10, 2010 - Demo
Re-factor watermark overlay Kevin Watermark Overlay (Re-factored) December 13, 2010 - Demo
Re-factor Drag and Drop Bookmark Ordering Kevin Drag and Drop Bookmark Ordering (Re-factored) December 13, 2010 - Demo

Source Code

Lighthouse Account

Project News

  • 10/22/10 - Release 0.1
  • 11/16/10 - Release 0.2
  • 12/08/10 & 12/15/10 - Release 0.3
Retrieved from "https://wiki.cdot.senecapolytechnic.ca/w/index.php?title=BBB&oldid=52874"