Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
stable tracks; have left position issue
- Loading branch information
Showing
4 changed files
with
531 additions
and
261 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,252 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | ||
|
|
||
| <!-- | ||
| BBBBBBBBBBBBBBBBB tttt tttt | ||
| B::::::::::::::::B ttt:::t ttt:::t | ||
| B::::::BBBBBB:::::B t:::::t t:::::t | ||
| BB:::::B B:::::B t:::::t t:::::t | ||
| B::::B B:::::Buuuuuu uuuuuuttttttt:::::tttttttttttttt:::::ttttttt eeeeeeeeeeee rrrrr rrrrrrrrr | ||
| B::::B B:::::Bu::::u u::::ut:::::::::::::::::tt:::::::::::::::::t ee::::::::::::ee r::::rrr:::::::::r | ||
| B::::BBBBBB:::::B u::::u u::::ut:::::::::::::::::tt:::::::::::::::::t e::::::eeeee:::::eer:::::::::::::::::r | ||
| B:::::::::::::BB u::::u u::::utttttt:::::::tttttttttttt:::::::tttttt e::::::e e:::::err::::::rrrrr::::::r | ||
| B::::BBBBBB:::::B u::::u u::::u t:::::t t:::::t e:::::::eeeee::::::e r:::::r r:::::r | ||
| B::::B B:::::Bu::::u u::::u t:::::t t:::::t e:::::::::::::::::e r:::::r rrrrrrr | ||
| B::::B B:::::Bu::::u u::::u t:::::t t:::::t e::::::eeeeeeeeeee r:::::r | ||
| B::::B B:::::Bu:::::uuuu:::::u t:::::t tttttt t:::::t tttttte:::::::e r:::::r | ||
| BB:::::BBBBBB::::::Bu:::::::::::::::uu t::::::tttt:::::t t::::::tttt:::::te::::::::e r:::::r | ||
| B:::::::::::::::::B u:::::::::::::::u tt::::::::::::::t tt::::::::::::::t e::::::::eeeeeeee r:::::r | ||
| B::::::::::::::::B uu::::::::uu:::u tt:::::::::::tt tt:::::::::::tt ee:::::::::::::e r:::::r | ||
| BBBBBBBBBBBBBBBBB uuuuuuuu uuuu ttttttttttt ttttttttttt eeeeeeeeeeeeee rrrrrrr | ||
| An authoring tool for Popcorn.js | ||
| Version 0.1.1 | ||
| Developed by Bocoup on behalf of the Mozilla Foundation | ||
| Authors: Rick Waldron, Alistair McDonald, Boaz Sender | ||
| --> | ||
|
|
||
| <title>Butter</title> | ||
| <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" /> | ||
|
|
||
| <!-- Styles --> | ||
| <link href="css/screen.css" rel="stylesheet" type="text/css" media="screen, projection"> | ||
| <link href="css/print.css" rel="stylesheet" type="text/css" media="print"> | ||
| <link href="css/Aristo/jquery-ui-1.8.5.custom.css" rel="stylesheet" type="text/css"> | ||
| <link href="css/butter.application.css" rel="stylesheet" type="text/css" media="screen, projection"> | ||
|
|
||
| <!-- Fave Libs and extensions--> | ||
| <script src="js/underscore.min.js"></script> | ||
| <script src="js/jquery.js"></script> | ||
| <script src="js/jquery-ui.min.js"></script> | ||
| <script src="js/jquery.ui.butter.min.js"></script> | ||
| <script src="js/jquery.scrolling-events.js"></script> | ||
|
|
||
|
|
||
| <!-- Initially at bottom of document, however causes FOUC --> | ||
|
|
||
| <!-- Popcorn plugins --> | ||
| <script src="popcorn-js/popcorn.js"></script> | ||
| <script src="popcorn-js/plugins/googlemap/popcorn.googlemap.js"></script> | ||
| <script src="popcorn-js/plugins/footnote/popcorn.footnote.js"></script> | ||
| <script src="popcorn-js/plugins/webpage/popcorn.webpage.js"></script> | ||
| <script src="popcorn-js/plugins/flickr/popcorn.flickr.js"></script> | ||
| <script src="popcorn-js/plugins/image/popcorn.image.js"></script> | ||
| <script src="popcorn-js/plugins/wikipedia/popcorn.wikipedia.js"></script> | ||
| <script src="popcorn-js/plugins/twitter/popcorn.twitter.js"></script> | ||
|
|
||
| <!-- The juice--> | ||
| <script src="js/butter.application.js"></script> | ||
|
|
||
| </head> | ||
| <body> | ||
| <!-- Overlay Scenes --> | ||
| <div id="ui-loading-html" class="ui-load-ready hide"> | ||
| <img src="img/loading.gif"> | ||
| <p>This may take a moment if your video is loading over the internet</p> | ||
| </div> | ||
| <div id="ui-loading-over" class="ui-widget-overlay ui-load-ready"></div> | ||
|
|
||
| <!-- Main Scene --> | ||
| <div class="container"> | ||
| <header> | ||
| <div class="span-26 last"> | ||
| <img class="logo" src="img/video.png" title="Butter" alt="Butter Logo"> | ||
| <input placeholder="Video Url" type="text" id="io-video-url" name="io-video-url" class="text ui-menu-entity" value="http://popcornjs.org/tryme.ogv"> | ||
|
|
||
| <!-- http://popcornjs.org/tryme.ogv --> | ||
|
|
||
| <button class="ui-menu-controls marginleft" data-control="load" >Create New Movie</button> | ||
|
|
||
| <button class="ui-menuset" data-control="">My Movies</button> | ||
| <ul id="ui-user-videos" class="select-ul is-menu"> | ||
| </ul> | ||
|
|
||
| <button class="ui-menuset">Layout</button> | ||
| <!-- start out with a default layout in data-layout --> | ||
| <ul id="ui-layout" class="select-ul is-menu" data-layout="wide"> | ||
| </ul> | ||
|
|
||
| <button class="ui-menuset">Theme</button> | ||
| <!-- start out with a default theme in data-theme --> | ||
| <ul id="ui-theme" class="select-ul is-menu" data-theme="clean"> | ||
| </ul> | ||
|
|
||
| <button class="ui-menuset">Export Movie</button> | ||
| <ul id="ui-export-to" class="select-ul is-menu"> | ||
| </ul> | ||
| </div> | ||
| </header> | ||
|
|
||
| <hr class="space" > | ||
|
|
||
| <div id="ui-video-editor" class="span-26"> | ||
| <!-- left pane --> | ||
| <div id="ui-panel-video" class="span-9" data-export="true"> | ||
| <video id="video" preload="auto" autobuffer> | ||
| <p>Your user agent does not support the HTML5 Video element.</p> | ||
| </video> | ||
|
|
||
| <div id="ui-video-controls" class="span-10 last"> | ||
| <button> | ||
| <span data-control="play" class="ui-icon ui-icon-play"></span> | ||
| </button> | ||
| <button> | ||
| <span data-control="pause" class="ui-icon ui-icon-pause"></span> | ||
| </button> | ||
| <button> | ||
| <span data-control="seek" data-opt="first" class="ui-icon ui-icon-seek-first"></span> | ||
| </button> | ||
| <button> | ||
| <span data-control="seek" data-opt="prev" class="ui-icon ui-icon-seek-prev"></span> | ||
| </button> | ||
| <button> | ||
| <span data-control="seek" data-opt="next" class="ui-icon ui-icon-seek-next"></span> | ||
| </button> | ||
| <button> | ||
| <span data-control="seek" data-opt="last" class="ui-icon ui-icon-seek-end"></span> | ||
| </button> | ||
| <input type="text" id="io-current-time" name="io-current-time" class="ui-video-property small-input text-center" value="" /> | ||
| <button> | ||
| <span data-control="volume" data-opt="down" class="ui-icon ui-icon-volume-off"></span> | ||
| </button> | ||
| <button> | ||
| <span data-control="volume" data-opt="up" class="ui-icon ui-icon-volume-on"></span> | ||
| </button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- center pane --> | ||
| <!-- do not remove the inline styles, these must stay intact for export cloning --> | ||
| <div id="ui-panel-preview" class="span-17 last" data-export="true"> | ||
| <div id="flickr-container" data-plugin="flickr" class="ui-plugin-pane span-6" style="height:120px;width:220px"></div> | ||
| <div id="iframe-container" data-plugin="webpage" class="ui-plugin-pane span-6" style="height:120px;width:220px"></div> | ||
| <div id="map-container" data-plugin="googlemap" class="ui-plugin-pane span-5 last" style="height:120px;width:210px"></div> | ||
| <hr class="space"> | ||
| <div id="image-container" data-plugin="image" class="ui-plugin-pane span-6" style="height:120px;width:220px"></div> | ||
| <div id="twitter-container" data-plugin="twitter" class="ui-plugin-pane span-6" style="height:120px;width:220px"></div> | ||
| <div id="wiki-container" data-plugin="wikipedia" class="ui-plugin-pane span-5 last" style="height:120px;width:210px"></div> | ||
| <hr class="space"> | ||
| <div id="footnote-container" data-plugin="footnote" class="ui-plugin-pane span-17 last" style="height:52px;width:670px;"></div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- ui-video-editor --> | ||
| <hr class="space"> | ||
| <div id="ui-track-editting" class="span-21"> | ||
| <div id="ui-tracks"> | ||
| <div id="ui-scrubber-handle"> | ||
| <div id="ui-scrubber"></div> | ||
| </div> | ||
| <div id="ui-tracks-time"> | ||
| <canvas id="ui-tracks-time-canvas" width="800" height="25"></canvas> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- plugins panel --> | ||
| <div id="ui-panel-plugins" class="span-5 last"> | ||
| <div id="ui-accordion-tools" class="ui-accordion-panel"> | ||
|
|
||
| <h3><a href="#">Save As</a></h3> | ||
| <div> | ||
| <input placeholder="Title" type="text" id="io-video-title" name="io-video-title" class="text" style="width:150px;" value="" /> | ||
| <textarea placeholder="Description" id="io-video-description" style="width:150px;height:85px" class="text"></textarea> | ||
| <button class="ui-menu-controls" data-control="save" >Save</button> | ||
| <button class="ui-menu-controls" data-control="remove" >Delete</button> | ||
| </div> | ||
|
|
||
| <h3><a href="#">Add Commands</a></h3> | ||
| <div> | ||
| <ul id="ui-plugin-select-list" class="select-ul"> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <h3><a href="#">Help</a></h3> | ||
| <div> | ||
| <ul> | ||
| <li>[ Shift + Click ] on a track event to Delete it.</li> | ||
|
|
||
| <li>[ Shift + Right or Left ] in the time display to jump to the next frame.</li> | ||
| </ul> | ||
| </div> | ||
| <!-- | ||
| comingsoon ;) | ||
| <h3><a href="#">Data View</a></h3> | ||
| <div> | ||
| <textarea id="io-video-data" name="io-video-data" style="width:150px;height:150px"></textarea> | ||
| </div> | ||
| --> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Dialogs --> | ||
| <div id="ui-track-event-editor" title="Edit Track Event"> | ||
| <!-- reusable --> | ||
| </div> | ||
| <div id="ui-preview-viewer" title=""> | ||
| <!-- reusable --> | ||
| </div> | ||
| <div id="ui-application-error" title=""> | ||
| <!-- reusable --> | ||
| </div> | ||
| <div id="ui-start-screen" title="Your Movies:"> | ||
| <h2>Your Movies</h2> | ||
| <div id="ui-project-list"> | ||
| <ul id="ui-start-screen-list"></ul> | ||
| </div> | ||
| <hr class="space"/> | ||
| <h2>Create a New Movie</h2> | ||
| <input placeholder="Video Url" type="text" class="text ui-menu-entity" value="http://popcornjs.org/tryme.ogv"> | ||
|
|
||
| <!-- http://popcornjs.org/tryme.ogv --> | ||
| </div> | ||
|
|
||
| <footer class="container"> | ||
| <p> | ||
| All code and content on this page are dual licensed under the MIT and GPL licenses. Popcorn.js is a <a href="http://www.drumbeat.org/webmademovies" title="Mozilla's Open Video Lab">Web Made Movies</a>, <a href="http://www.drumbeat.org/" title="Mozilla Drumbeat">Mozilla Drumbeat</a> project, developed by <a href="http://cdot.senecac.on.ca/">CDOT</a>, <a href="http://bocoup.com">Bocoup</a> and contributors like you. This webiste is hosted by <a href="http://mediatemple.net">(mt)</a>. | ||
| </p> | ||
|
|
||
|
|
||
| <a class="span-5 prepend-9" href="http://www.mozilla.org/" title="Mozilla"> | ||
| <img height="50px" src="http://dev.popcornjs.org/wp-content/themes/Opensource-Wordpress-Theme/img/mozilla.png"> | ||
| </a> | ||
| <a href="http://www.drumbeat.org/webmademovies" title="Mozilla's Open Video Lab"> | ||
| <img height="50px" src="http://ftp.etherworks.ca/webmademovieslogo150.jpg"> | ||
| </a> | ||
|
|
||
| <br> | ||
|
|
||
| <a class="span-5 prepend-11" href="http://bocoup.com" title="The JavaScript Company"> | ||
| <img height="35px" src="http://bocoup.com/core/brandguide/logo/bocoup-horizontal-100.png" alt="The JavaScript Company"> | ||
| </a> | ||
| </footer> | ||
|
|
||
|
|
||
|
|
||
| </body> | ||
| </html> |
Oops, something went wrong.