diff options
| -rw-r--r-- | assets/js/sample-editor.js | 45 | ||||
| -rw-r--r-- | index.html | 7 |
2 files changed, 52 insertions, 0 deletions
diff --git a/assets/js/sample-editor.js b/assets/js/sample-editor.js index 10f5a08..7ae2bca 100644 --- a/assets/js/sample-editor.js +++ b/assets/js/sample-editor.js @@ -2,6 +2,9 @@ var SampleEditor = SampleEditor || {}; (function($) { SampleEditor = function() { + this.player = null; + + this.initialize = function() { var $clip_line = $('.js-clip-line'); @@ -11,6 +14,48 @@ var SampleEditor = SampleEditor || {}; scroll: false, containment: $clip_line.parents('.progress-bar') }); + + $clip_line.on('drag', this.on_clip_drag_stop); + + + this.player = new OP.Player($('#single-video-lets-see-if-we-can-get-this-to-work').get(0)); + }; + + + // percentage_progress + // + // Get a percentage value from a clip-line that represents its + // position within the progress bar. + // + this.percentage_progress = function($el) { + var container = $el.parents('.progress-bar'); + var position_in_pixels = $el.css('left'); + + var percentage = (position_in_pixels / container.width()) * 100; + + return percentage; + }; + + + // seek_point + // + // Example: + // sample_editor.seek_point({ + // $el: $('.clip-line'), + // video_length: 586 + // }); + // + this.seek_point = function(options) { + var options = options || {}; + + var progress = this.percentage_progress(options.$el); + + return (progress * options.video_length) / 100; + }; + + + this.on_clip_drag_stop = function(e, ui) { + }; @@ -32,11 +32,18 @@ </div> </div> </div> + + + <div class="video"> + <iframe src="http://cdn.embedly.com/widgets/media.html?schema=youtube&type=text%2Fhtml&html=http://www.youtube.com/embed/q3wHLCW4hbg" width="500" height="281" scrolling="no" frameborder="0" allowfullscreen id="single-video-lets-see-if-we-can-get-this-to-work"></iframe> + </div> </div> <script src="/assets/js/libs/jquery-2.0.3.min.js"></script> <script src="/assets/js/libs/jquery-ui-1.10.3.custom.min.js"></script> + <script src='/js/utils.js'></script> + <script src='/js/player.js'></script> <script src="/assets/js/sample-editor.js"></script> <script src="/assets/js/app.js"></script> </body> |