diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 167 |
1 files changed, 167 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..58495af --- /dev/null +++ b/index.html @@ -0,0 +1,167 @@ +<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> + <style type="text/css"> + td, th { padding: 0.5em; } + </style> + <script type="text/javascript"> +function onlyUnique(value, index, self) { + return self.indexOf(value) === index; +} + +// read a cutlist and turn it into a URL fragment string +// format: #ytid,ytid,ytid:i-e-s,i-e-s,i-e-s +// - ytid is a youtube video id +// - i is an index into the list of ytids +// - s is a start time in decimal seconds +// - e is an end time in decimal seconds +function frag_make(cutlist) { + var vid_list = cutlist.map(function(x) {return x.id}).filter(onlyUnique); + var cuts = cutlist.map(function(x) { + return {id: vid_list.indexOf(x.id), + start: x.start, + end: x.end}}); + + var frag = vid_list.join(",") + ":" + + cuts.map(function(x) { return [x.id, x.start, x.end].join("-") }).join(","); + + return frag; +} + +// read a URL fragment string and turn it into a cutlist +function frag_parse(frag) { + var vc + vc = frag.split(":"); + var vids = vc[0].split(","); + var cuts = vc[1].split(","); + + var cutlist = cuts.map(function(x) { ise = x.split("-"); + return {id:vids[+ise[0]], start:+ise[1], end:+ise[2]}; }) + return cutlist; +} + + </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> + + <hr/> + <table id="cutlist"> + <tr><th>start</th><th>end</th></tr> + </table> + <hr/> + <p>copyright by chronomex, 2015. all rights reserved.</p> + + <!-- 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> + + <script type="text/javascript"> +// 2. This code loads the IFrame Player API code asynchronously. +var tag = document.createElement('script'); + +tag.src = "https://www.youtube.com/iframe_api"; +var firstScriptTag = document.getElementsByTagName('script')[0]; +firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); + +// 3. This function creates an iframe (and player) +// after the API code downloads. +var player; +function onYouTubeIframeAPIReady() { + player = new YT.Player('player', { + height: '390', + width: '640', + events: { + 'onReady': onPlayerReady, + 'onStateChange': onPlayerStateChange + } + }); +} + +// 4. The API will call this function when the video player is ready. +function onPlayerReady(event) { +} + +// 5. The API calls this function when the player's state changes. +// The function indicates that when playing a video (state=1), +// the player should play for six seconds and then stop. +var done = false; +function onPlayerStateChange(event) { +} + +function cutlist_clear() { +} + +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>'; + + $("#cutlist tbody").append(row); + return $("#cutlist tbody tr").last()[0]; +} + +function add_start(time) { + var row = cutlist_append_empty() + row.className = "cut-active"; + $(row).find(".b-start")[0].value = time; +} + +function add_end(time) { + $(".cut-active .b-end")[0].value = time; + row[0].className = ""; +} + +function b_grab() { + row = $(".cut-active").last(); + time = Math.round(player.getCurrentTime()*100.)/100. + + if (row.size() == 0) { // no cuts are active + add_start(time); + player.playVideo(); + } else { + player.pauseVideo(); + add_end(time); + } + + return; +} + +function b_share() { + var cutlist = $("#cutlist tr").get() + .filter(function(x) { return $(x).find("input").size() != 0 }) + .map(function(x) { + return { + start: +($(x).find("td input.b-start")[0].value), + end: +($(x).find("td input.b-end")[0].value), + id: player.getVideoData().video_id + } + }); + + var frag = frag_make(cutlist); + history.pushState(null, "Video recut", "#" + frag); +} + +function play_from_cutlist() { + +} + +function load_cutlist_from_url() { + var cutlist = frag_parse(window.location.hash .replace("#", "")); + + +} + </script> + </body> +</html> |