diff options
| author | Astrid Smith | 2015-10-17 12:54:39 -0700 |
|---|---|---|
| committer | Astrid Smith | 2015-10-17 12:54:39 -0700 |
| commit | 1c8a07b1febe18168ef5c73ebd8b8b263bbb4ed7 (patch) | |
| tree | 4ca7be026cc63841dfff5ba22389f1e19faf560b | |
| parent | 6d294b7b066031077177f87c10ccb7a1353edbcb (diff) | |
stuff
| -rw-r--r-- | index.html | 101 |
1 files changed, 74 insertions, 27 deletions
@@ -1,10 +1,22 @@ <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" media="screen"> - <title>Youtube Editor</title> + + <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"/> + <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> + <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> + + <!-- Include all compiled plugins (below), or include individual files as needed --> + <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> + <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" media="screen"/> + + <title>YouTube Recutter</title> + <style type="text/css"> td, th { padding: 0.5em; } + input.timebox { width: 5em; } + button { margin: 0.25em; } </style> <script type="text/javascript"> function onlyUnique(value, index, self) { @@ -45,29 +57,39 @@ function frag_parse(frag) { </script> </head> <body> - <h1>Youtube Recutter</h1> - <h2>Create and share an edit of any Youtube video</h2> - - <div id="player"></div> - <div> - <input type="button" id="play-button" value="play this cut >" onclick="play_from_cutlist();"/><br/> - <input type="button" id="go-button" value="Cut here!" onclick="b_grab();"/> - <input type="button" id="add-button" value="add a blank cut" onclick="cutlist_append_empty();"/> - <input type="button" id="share-button" value="save to url" onclick="b_share();"/><br/> + <div class="container"> + <div class="page-header"> + <h1>YouTube Recutter</h1> + <p class="lead">Create and share an edit of a YouTube video</p> + </div> + <div class="col-md-9"> + <div id="player"> + <label>Paste link to video: + <input type="text" id="video-link"/> + </label> + <button id="load-button" disabled="true" onclick="load_video_button();">load</button> + </div> </div> - <hr/> - <table id="cutlist"> - <tr><th>start</th><th>end</th></tr> - </table> - <hr/> - <p>copyright by chronomex, 2015. all rights reserved.</p> + <div class="col-md-3"> + <div> + <button id="play-button" onclick="play_from_cutlist();">play this cut ></button><br/> + <hr/> + <button id="go-button" onclick="b_grab();">Cut here!</button> + <button id="add-button" onclick="cutlist_append_empty();">add a blank cut</button> + <button id="share-button" onclick="b_share();">save to url</button><br/> + </div> + <table class="table" id="cutlist"> + <thead> + <tr><th>start</th><th>end</th></tr> + </thead> + <tbody></tbody> + </table> + <p>copyright by chronomex, 2015. all rights reserved.</p> + </div> - <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> - <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> - <!-- Include all compiled plugins (below), or include individual files as needed --> - <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> + </div> <script type="text/javascript"> // 2. This code loads the IFrame Player API code asynchronously. @@ -81,6 +103,19 @@ firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // after the API code downloads. var player; function onYouTubeIframeAPIReady() { + $("#load-button")[0].disabled = false; + if (video_id) { + load_video(); + } +} + +var video_id; +function load_video_button() { + var video_url = $("#video-link")[0].value; + video_id = video_url.match(/(?:youtu\.be\/|[?&]v=)([-_A-Za-z0-9]*)/)[1]; + load_video(); +} +function load_video() { player = new YT.Player('player', { height: '390', width: '640', @@ -91,8 +126,10 @@ function onYouTubeIframeAPIReady() { }); } + // 4. The API will call this function when the video player is ready. function onPlayerReady(event) { + player.loadVideoById(video_id); } // 5. The API calls this function when the player's state changes. @@ -102,11 +139,11 @@ var done = false; function onPlayerStateChange(event) { } -function cutlist_clear() { +function cutlist_cleanup() { } function cutlist_append_empty() { - var row = '<tr><td><input type="number" min="0" class="b-start" name="start"/></td><td><input type="number" min="0" class="b-end" name="end"/></td></tr>'; + var row = '<tr><td><input type="number" min="0" class="b-start timebox" name="start"/></td><td><input type="number" min="0" class="b-end timebox" name="end"/></td></tr>'; $("#cutlist tbody").append(row); return $("#cutlist tbody tr").last()[0]; @@ -120,7 +157,7 @@ function add_start(time) { function add_end(time) { $(".cut-active .b-end")[0].value = time; - row[0].className = ""; + $(".cut-active")[0].className = ""; } function b_grab() { @@ -147,7 +184,8 @@ function b_share() { end: +($(x).find("td input.b-end")[0].value), id: player.getVideoData().video_id } - }); + }) + .filter(function(x) { return x.start != x.end; }) var frag = frag_make(cutlist); history.pushState(null, "Video recut", "#" + frag); @@ -158,10 +196,19 @@ function play_from_cutlist() { } function load_cutlist_from_url() { - var cutlist = frag_parse(window.location.hash .replace("#", "")); + if (window.location.hash.length == 0) + return; - + var cutlist = frag_parse(window.location.hash .replace("#", "")); + cutlist.forEach(function(x) { + add_start(x.start); + add_end(x.end); + }); + video_id = cutlist[0].id; + load_video(); } + +load_cutlist_from_url(); </script> </body> </html> |