Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(5)

Side by Side Diff: src/site/samples/video/example/video.dart

Issue 1387723002: Updating the samples page to reflect the examples that have been retired. (Closed) Base URL: https://github.com/dart-lang/www.dartlang.org.git@master
Patch Set: Created 5 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(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 }
OLDNEW
« no previous file with comments | « src/site/samples/video/example/packages/browser/interop.js ('k') | src/site/samples/video/example/video.dart.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698