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 |