scratchpad/widgets/vtt/index.html - wookie - Git at Google

 <!DOCTYPE html>
 <!--
   Licensed to the Apache Software Foundation (ASF) under one or more
   contributor license agreements.  See the NOTICE file distributed with
   this work for additional information regarding copyright ownership.
   The ASF licenses this file to You under the Apache License, Version 2.0
   (the "License"); you may not use this file except in compliance with
   the License.  You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
 -->
 <html>
 	<head>
         <meta http-equiv="pragma" content="no-cache"/>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <script type="text/javascript" src="scripts/controller.js" charset="utf-8"></script>

         <!--

         // Removed for now - we may be able to use Playr to do previewing, but it isn't
         // necessary for creating the web-vtt file
         // See http://www.delphiki.com/html5/playr/

         <script type="text/javascript" src="lib/playr.js" charset="utf-8"></script>
         <link rel="stylesheet" href="lib/playr.css"/>

         -->

         <!--

         // If you aren't using this in Apache Wookie, uncommment this section

         <script type="text/javascript" src="lib/jquery-1.5.min.js"></script>
         <script type="text/javascript" src="lib/jquery.mobile-1.0a4-patched.min.js"></script>
         <link type="text/css" rel="stylesheet" href="lib/jquery.mobile-1.0a4.min.css" />

         -->

 		<title>VTT</title>
 	</head>

 	<body onLoad="Controller.init()">
 		<div data-role="page" id="home">

 		    <div data-role="header">
 				<h4>VTT Caption Creator</h4>
 				<a href="#add" data-rel="dialog" data-transition="pop" data-role="button" data-icon="plus">Video</a>
                 <a href="#output" data-rel="dialog" data-transition="pop" data-role="button" data-icon="grid">VTT</a>
 			</div> <!-- /header -->

 			<div data-role="content" class="ui-content">
                 <div id="video_container">
                     <!-- video is placed here -->
                     <div id="no-video">
                         <p>
                             Welcome to the VTT subtitle track creator. Click the "Video" button to select a video to subtitle.
                         </p>
                     </div>
                 </div>

                 <div>
                     <!-- these are the caption creation tools -->
                     <div id="captionTrigger">
                         <button id="startButton" onclick="Controller.startCaption()">Pause and create caption</button>
                     </div>
                     <div id="captionTools">
                         <div data-role="controlgroup" data-type="horizontal">
                             <input id="captionText"/>
                             <button id="okButton" onclick="Controller.endCaption()">OK</button>
                             <button id="cancelButton" onclick="Controller.cancelCaption()">Cancel</button>
                         </div>
                     </div>
                 </div>
 			</div><!-- /content -->

 		</div><!-- /page -->

         <!--
         This is the dialog box that shows the Web-VTT output you've created.
         --->
         <div data-role="dialog" id="output">
 		    <div data-role="header">
 				<h4>VTT Output</h4>
 			</div> <!-- /header -->
 			<div data-role="content" class="ui-content">
                 <div>
                     <textarea style="width:100%; height:250px; font-family: courier" id="vtt_out"></textarea>
                     <a href="#preview" data-transition="pop" data-role="button" onclick="Controller.preview()">Preview</a>
                     <a href="#home" data-transition="pop" data-direction="reverse" data-role="button">OK</a>
                 </div>
 			</div><!-- /content -->
 		</div><!-- /page -->


         <!--
         This is the dialog box that lets you set the video to show and work on.
         --->
 		<div data-role="dialog" id="add">
 			<div data-role="header">
 				<h4>Select Video to Use</h4>
 			</div> <!-- /header -->
 			<div data-role="content" class="ui-content">
 				<div data-role="fieldcontain">
     				<label for="input-url-mp4">MP4 URL:</label>
     				<input type="text" name="input-url-mp4" id="input-url-mp4" value=""  />
                     <label for="input-url-ogg">Ogg URL:</label>
     				<input type="text" name="input-url-ogg" id="input-url-ogg" value=""  />
 				</div>
 				<button id="submit-button" onclick="Controller.setVideo()">OK</button>
 				<a href="#home" data-transition="pop" data-direction="reverse" data-role="button">Cancel</a>
 			</div><!-- /content -->
 		</div><!-- /page -->

         <!--
         This is the dialog box that shows a preview of the video with the subtitle track
         --->
         <div data-role="page" id="preview">
 		    <div data-role="header">
 				<h4>VTT Preview</h4>
 			</div> <!-- /header -->
 			<div data-role="content" class="ui-content">
                 <div>
                     <p>Unfortunately, Preview doesn't work at the moment - please fix!</p>
                     <div id="video_preview_container">
                     <!-- video is placed here -->
                     </div>
                     <a href="#home" data-transition="pop" data-direction="reverse" data-role="button">OK</a>
                 </div>
 			</div><!-- /content -->
 		</div><!-- /page -->


 	</body>
 </html>
	<!DOCTYPE html>
	<!--
	Licensed to the Apache Software Foundation (ASF) under one or more
	contributor license agreements. See the NOTICE file distributed with
	this work for additional information regarding copyright ownership.
	The ASF licenses this file to You under the Apache License, Version 2.0
	(the "License"); you may not use this file except in compliance with
	the License. You may obtain a copy of the License at

	http://www.apache.org/licenses/LICENSE-2.0

	Unless required by applicable law or agreed to in writing, software
	distributed under the License is distributed on an "AS IS" BASIS,
	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
	See the License for the specific language governing permissions and
	limitations under the License.
	-->
	<html>
	<head>
	<meta http-equiv="pragma" content="no-cache"/>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="scripts/controller.js" charset="utf-8"></script>

	<!--

	// Removed for now - we may be able to use Playr to do previewing, but it isn't
	// necessary for creating the web-vtt file
	// See http://www.delphiki.com/html5/playr/

	<script type="text/javascript" src="lib/playr.js" charset="utf-8"></script>
	<link rel="stylesheet" href="lib/playr.css"/>

	-->

	<!--

	// If you aren't using this in Apache Wookie, uncommment this section

	<script type="text/javascript" src="lib/jquery-1.5.min.js"></script>
	<script type="text/javascript" src="lib/jquery.mobile-1.0a4-patched.min.js"></script>
	<link type="text/css" rel="stylesheet" href="lib/jquery.mobile-1.0a4.min.css" />

	-->

	<title>VTT</title>
	</head>

	<body onLoad="Controller.init()">
	<div data-role="page" id="home">

	<div data-role="header">
	<h4>VTT Caption Creator</h4>
	<a href="#add" data-rel="dialog" data-transition="pop" data-role="button" data-icon="plus">Video</a>
	<a href="#output" data-rel="dialog" data-transition="pop" data-role="button" data-icon="grid">VTT</a>
	</div> <!-- /header -->

	<div data-role="content" class="ui-content">
	<div id="video_container">
	<!-- video is placed here -->
	<div id="no-video">
	<p>
	Welcome to the VTT subtitle track creator. Click the "Video" button to select a video to subtitle.
	</p>
	</div>
	</div>

	<div>
	<!-- these are the caption creation tools -->
	<div id="captionTrigger">
	<button id="startButton" onclick="Controller.startCaption()">Pause and create caption</button>
	</div>
	<div id="captionTools">
	<div data-role="controlgroup" data-type="horizontal">
	<input id="captionText"/>
	<button id="okButton" onclick="Controller.endCaption()">OK</button>
	<button id="cancelButton" onclick="Controller.cancelCaption()">Cancel</button>
	</div>
	</div>
	</div>
	</div><!-- /content -->

	</div><!-- /page -->

	<!--
	This is the dialog box that shows the Web-VTT output you've created.
	--->
	<div data-role="dialog" id="output">
	<div data-role="header">
	<h4>VTT Output</h4>
	</div> <!-- /header -->
	<div data-role="content" class="ui-content">
	<div>
	<textarea style="width:100%; height:250px; font-family: courier" id="vtt_out"></textarea>
	<a href="#preview" data-transition="pop" data-role="button" onclick="Controller.preview()">Preview</a>
	<a href="#home" data-transition="pop" data-direction="reverse" data-role="button">OK</a>
	</div>
	</div><!-- /content -->
	</div><!-- /page -->


	<!--
	This is the dialog box that lets you set the video to show and work on.
	--->
	<div data-role="dialog" id="add">
	<div data-role="header">
	<h4>Select Video to Use</h4>
	</div> <!-- /header -->
	<div data-role="content" class="ui-content">
	<div data-role="fieldcontain">
	<label for="input-url-mp4">MP4 URL:</label>
	<input type="text" name="input-url-mp4" id="input-url-mp4" value="" />
	<label for="input-url-ogg">Ogg URL:</label>
	<input type="text" name="input-url-ogg" id="input-url-ogg" value="" />
	</div>
	<button id="submit-button" onclick="Controller.setVideo()">OK</button>
	<a href="#home" data-transition="pop" data-direction="reverse" data-role="button">Cancel</a>
	</div><!-- /content -->
	</div><!-- /page -->

	<!--
	This is the dialog box that shows a preview of the video with the subtitle track
	--->
	<div data-role="page" id="preview">
	<div data-role="header">
	<h4>VTT Preview</h4>
	</div> <!-- /header -->
	<div data-role="content" class="ui-content">
	<div>
	<p>Unfortunately, Preview doesn't work at the moment - please fix!</p>
	<div id="video_preview_container">
	<!-- video is placed here -->
	</div>
	<a href="#home" data-transition="pop" data-direction="reverse" data-role="button">OK</a>
	</div>
	</div><!-- /content -->
	</div><!-- /page -->



	</body>
	</html>