Permalink
Browse files

FLUID-3103: First commit of a new drafty Infusion component for playi…

…ng HTML 5 videos and synchronizing captions to them. We'll use this for the final report Web site to show screencasts of Infusion components. Needs FSS-ization, which Jacob has kindly offered to help with.

svn path=/incubator/videoPlayer/; revision=7877
  • Loading branch information...
0 parents commit fcdc187667d70ea63ab6b5969b4ed343f072169d @colinbdclark colinbdclark committed Sep 4, 2009
Showing with 418 additions and 0 deletions.
  1. +11 −0 .project
  2. +33 −0 html/Captions.json
  3. +44 −0 html/VideoPlayer.html
  4. +330 −0 js/VideoPlayer.js
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+ <name>fluid-videoPlayer</name>
+ <comment></comment>
+ <projects>
+ </projects>
+ <buildSpec>
+ </buildSpec>
+ <natures>
+ </natures>
+</projectDescription>
@@ -0,0 +1,33 @@
+[
+ {
+ "inTime": "00:00:02.678",
+ "inTimeMilli": 2678,
+ "outTime": "00:00:07.342",
+ "outTimeMilli": 7342,
+ "name": "Clip 1",
+ "durationMilli": 4664,
+ "duration": "00:00:04.664",
+ "caption_text": "first clip caption text"
+ },
+ {
+ "inTime": "00:00:09.635",
+ "inTimeMilli": 9635,
+ "outTime": "00:00:13.992",
+ "outTimeMilli": 13992,
+ "name": "Clip 2",
+ "durationMilli": 4357,
+ "duration": "00:00:04.357",
+ "caption_text": "second clip"
+ },
+ {
+ "inTime": "00:00:15.562",
+ "inTimeMilli": 15562,
+ "outTime": "00:00:19.663",
+ "outTimeMilli": 19663,
+ "name": "Clip 3",
+ "durationMilli": 4101,
+ "duration": "00:00:04.101",
+ "caption_text": "third clip"
+ }
+]
+
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+ <title>Video Player Demo</title>
+
+ <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
+
+ <script type="text/javascript" src="../../infusion/src/webapp/lib/jquery/core/js/jquery.js"></script>
+ <script type="text/javascript" src="../../infusion/src/webapp/lib/jquery/ui/js/ui.core.js"></script>
+ <script type="text/javascript" src="../../infusion/src/webapp/lib/jquery/ui/js/ui.slider.js"></script>
+ <script type="text/javascript" src="../../infusion/src/webapp/lib/json/js/json2.js"></script>
+ <script type="text/javascript" src="../../infusion/src/webapp/framework/core/js/Fluid.js"></script>
+ <script type="text/javascript" src="../../infusion/src/webapp/framework/core/js/jquery.keyboard-a11y.js"></script>
+ <script type="text/javascript" src="../js/VideoPlayer.js"></script>
+ </head>
+ <body>
+ <h1>Infusion HTML 5 Video Player Demo</h1>
+
+ <div class="videoPlayer">
+ <video class="flc-videoPlayer-video" alt="A video demonstrating the Infusion video player">
+ Anything you want to show if the user doesn't have an HTML 5-compatible browser goes here.
+ </video>
+ </div>
+
+
+ <script type="text/javascript">
+ var vp = fluid.videoPlayer(".videoPlayer", {
+ sources: [
+ {
+ src: "../media/Cursor.mov",
+ type: "video/mp4"
+ },
+ {
+ src: "../media/Cursor.ogg",
+ type: "video/ogg"
+ }
+ ],
+
+ captions: "Captions.json"
+ });
+ </script>
+ </body>
+</html>
Oops, something went wrong.

0 comments on commit fcdc187

Please sign in to comment.