| OLD | NEW |
| (Empty) |
| 1 // Copyright (c) 2012, the Dart project authors. Please see the AUTHORS file | |
| 2 // for details. All rights reserved. Use of this source code is governed by a | |
| 3 // BSD-style license that can be found in the LICENSE file. | |
| 4 | |
| 5 // This is a port of "HTML5 Video" to Dart. | |
| 6 // See: http://www.html5rocks.com/en/tutorials/video/basics/ | |
| 7 | |
| 8 // Note, the sound is very choppy when using dart2js and running on Google | |
| 9 // Chrome (version 21 or 22). However, the sound is not choppy when running | |
| 10 // under Dartium (version 23). It's not a bug in this code since the JavaScript | |
| 11 // code has the same problem. | |
| 12 // See also: http://code.google.com/p/chromium/issues/detail?id=141747#c15 | |
| 13 | |
| 14 import 'dart:html'; | |
| 15 | |
| 16 class VideoExample { | |
| 17 VideoElement _videoDom; | |
| 18 CanvasElement _canvasCopy; | |
| 19 CanvasElement _canvasDraw; | |
| 20 List<num> _offsets; | |
| 21 List<num> _inertias; | |
| 22 CanvasRenderingContext2D _ctxCopy, _ctxDraw; | |
| 23 bool _animationRunning = false; | |
| 24 | |
| 25 final _outPadding = 100; | |
| 26 final _slices = 4; | |
| 27 | |
| 28 VideoExample() { | |
| 29 var inertia = -2.0; | |
| 30 | |
| 31 _videoDom = querySelector('#video-canvas-fancy'); | |
| 32 _canvasCopy = querySelector('#canvas-copy-fancy'); | |
| 33 _canvasDraw = querySelector('#canvas-draw-fancy'); | |
| 34 _offsets = <num>[]; | |
| 35 _inertias = <num>[]; | |
| 36 | |
| 37 for (var i = 0; i < _slices; i++) { | |
| 38 _offsets.add(0); | |
| 39 _inertias.add(inertia); | |
| 40 inertia += 0.4; | |
| 41 } | |
| 42 | |
| 43 _videoDom.onCanPlay.listen((e) => _onCanPlay()); | |
| 44 _videoDom.onPlay.listen((e) => _onPlay()); | |
| 45 _videoDom.onPause.listen((e) => _stopAnimation()); | |
| 46 _videoDom.onEnded.listen((e) => _stopAnimation()); | |
| 47 } | |
| 48 | |
| 49 void _onCanPlay() { | |
| 50 _canvasCopy.width = _canvasDraw.width = _videoDom.videoWidth; | |
| 51 _canvasCopy.height = _videoDom.videoHeight; | |
| 52 _canvasDraw.height = _videoDom.videoHeight + _outPadding; | |
| 53 _ctxCopy = _canvasCopy.context2D; | |
| 54 _ctxDraw = _canvasDraw.context2D; | |
| 55 } | |
| 56 | |
| 57 void _onPlay() { | |
| 58 _animationRunning = true; | |
| 59 _processEffectFrame(); | |
| 60 } | |
| 61 | |
| 62 void _processEffectFrame() { | |
| 63 if (!_animationRunning) return; | |
| 64 var sliceWidth = _videoDom.videoWidth / _slices; | |
| 65 _ctxCopy.drawImage(_videoDom, 0, 0); | |
| 66 _ctxDraw.clearRect(0, 0, _canvasDraw.width, _canvasDraw.height); | |
| 67 for (var i = 0; i < _slices; i++) { | |
| 68 var sx = i * sliceWidth; | |
| 69 var sy = 0; | |
| 70 var sw = sliceWidth; | |
| 71 var sh = _videoDom.videoHeight; | |
| 72 var dx = sx; | |
| 73 var dy = _offsets[i] + sy + _outPadding; | |
| 74 var dw = sw; | |
| 75 var dh = sh; | |
| 76 _ctxDraw.drawImageScaledFromSource(_canvasCopy, sx, sy, sw, sh, dx, dy, dw
, dh); | |
| 77 if ((_offsets[i] + _inertias[i]).abs() < _outPadding) { | |
| 78 _offsets[i] += _inertias[i]; | |
| 79 } else { | |
| 80 _inertias[i] = -_inertias[i]; | |
| 81 } | |
| 82 } | |
| 83 window.requestAnimationFrame((double time) { | |
| 84 _processEffectFrame(); | |
| 85 return false; | |
| 86 }); | |
| 87 } | |
| 88 | |
| 89 void _stopAnimation() { | |
| 90 _animationRunning = false; | |
| 91 } | |
| 92 } | |
| 93 | |
| 94 void main() { | |
| 95 new VideoExample(); | |
| 96 } | |
| OLD | NEW |