How to load Video elements on DART

With HTML5 you can play videos on web pages without external references.

Dart supports Video Elements that let you load video on your projects and mange timeline with the controls.

If you want to load video elements on DART you can use code like this.

video.html

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
    <script type="application/dart" src="video.dart"></script>
    <script src="http://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
  </body>
</html>

video.dart

#import('dart:html');

void main () {
  var videoClip = new VideoElement();
  videoClip.controls = true;
  videoClip.height=500;
  videoClip.width=500;
  videoClip.autoplay=true;
  videoClip.on['canplay'].add((_) {
    videoClip.play();
  });

  var s1 = new SourceElement();
  s1.src = "http://html5demos.com/assets/dizzy.mp4";
  s1.type = "video/mp4";

  var s2 = new SourceElement();
  s2.src = "http://html5demos.com/assets/dizzy.webm";
  s2.type = "video/webm";

  var s3 = new SourceElement();
  s3.src = "http://html5demos.com/assets/dizzy.ogv";
  s3.type = "video/ogv";

  videoClip.nodes.add(s1);
  videoClip.nodes.add(s2);
  videoClip.nodes.add(s3);

  document.body.nodes.add(videoClip);
}

Moises Belchin

Google+