show a simple video using VideoElement

[kien16]

hi all,
i want to show a clip on web.
i using:

#import ('dart:html");
void main () {
VideoElement videoClip = new VideoElement();
  videoClip.src="http://slides.html5rocks.com/src/chrome_japan.webm";
  videoClip.height=100;
  videoClip.width=100;
  videoClip.autoplay=true;
  videoClip.controller.play();
}

but it not working,
thanks for answer.

[John Messerly]

Try this:

#import ('dart:html');

void main () {

  var videoClip = new VideoElement();

  videoClip.src="http://slides.html5rocks.com/src/chrome_japan.webm";

  videoClip.height=100;

  videoClip.width=100;

  videoClip.autoplay=true;

  document.body.nodes.add(videoClip);

}

 

Basically, you need to add the VideoElement to the document. And the "play" call is unnecessary with autoplay = true.

- John

[John Messerly]

On Mon, Aug 20, 2012 at 8:57 PM, John Messerly <jmes...@google.com> wrote:

Try this:

#import ('dart:html');

void main () {

  var videoClip = new VideoElement();

  videoClip.src="http://slides.html5rocks.com/src/chrome_japan.webm";

  videoClip.height=100;

  videoClip.width=100;

  videoClip.autoplay=true;

  document.body.nodes.add(videoClip);

}

 

Basically, you need to add the VideoElement to the document. And the "play" call is unnecessary with autoplay = true.

And if you want to play it explicitly, do this:

void main () {

  var videoClip = new VideoElement();

  videoClip.src = "http://slides.html5rocks.com/src/chrome_japan.webm";

  videoClip.height = 100;

  videoClip.width = 100;

  videoClip.on['canplay'].add((_) {

    videoClip.play();

  });

  document.body.nodes.add(videoClip);

}

more info here:

http://www.html5rocks.com/en/tutorials/video/basics/

I filed dartbug.com/4628 about the need to use ".on['canplay']". It should be more like ".on.canPlay"

Cheers! - John

 

[kien16]

thanks for your answer.

#import ('dart:html');
void main () {
  var videoClip = new VideoElement();
  videoClip.src="http://slides.html5rocks.com/src/chrome_japan.webm";
  videoClip.height=100;
  videoClip.width=100;

  //videoClip.autoplay=true;
  document.body.nodes.add(videoClip);
}
 
I try with your code, but it doesn't work.
and my IDM also catched link download.

help me.

- John

--
Consider asking HOWTO questions at Stack Overflow: http://stackoverflow.com/tags/dart
 
 

[John Messerly]

On Mon, Aug 20, 2012 at 9:14 PM, kien16 <tellm...@gmail.com> wrote:

I try with your code, but it doesn't work.
and my IDM also catched link download.

You need to uncomment this line:

    videoClip.autoplay=true;

 

[Ladislav Thon]

> And if you want to play it explicitly, do this:
>
> void main () {
>   var videoClip = new VideoElement();
>   videoClip.src = "http://slides.html5rocks.com/src/chrome_japan.webm";
>   videoClip.height = 100;
>   videoClip.width = 100;
>   videoClip.on['canplay'].add((_) {
>     videoClip.play();
>   });
>   document.body.nodes.add(videoClip);
> }

Couldn't you just do

videoClip.on['canplay'].add(videoClip.play);

?

Also, setting the videoclip's properties is a great opportunity to exercise cascades:

var videoClip = new VideoElement()

    ..src = "http://slides.html5rocks.com/src/chrome_japan.webm"
    ..height = 100
    ..width = 100
    ..on['canplay'].add(videoClip.play);

Not sure about the on['canplay'] thing here, I still struggle with more complex expressions in cascades. (Maybe the original proposal with curly braces wasn't that bad idea after all :-) )

LT

[John Messerly]

On Mon, Aug 20, 2012 at 9:19 PM, Ladislav Thon <lad...@gmail.com> wrote:

Not sure about the on['canplay'] thing here, I still struggle with more complex expressions in cascades. (Maybe the original proposal with curly braces wasn't that bad idea after all :-) )

Yeah, that looks right to me. Only reason I used curlies and a whole line in my snippet was that it came from html5rocks article, and they set some more stuff in the canplay event before calling play.

[kien16]

i uncomment that line but it still doesn't work :(

--

[Kevin Kellogg]

On Tuesday, August 21, 2012 12:19:34 AM UTC-4, Ladislav Thon wrote:

var videoClip = new VideoElement()
    ..src = "http://slides.html5rocks.com/src/chrome_japan.webm"
    ..height = 100
    ..width = 100
    ..on['canplay'].add(videoClip.play);

Not sure about the on['canplay'] thing here, I still struggle with more complex expressions in cascades. (Maybe the original proposal with curly braces wasn't that bad idea after all :-) )

Looks good but what was the original proposal? Something like this?

var videoClip = new VideoElement() {

  src = "http://slides.html5rocks.com/src/chrome_japan.webm";

  height = 100;

  width = 100;

  on {

    canPlay.add(videoClip.play);

    playing.add(...);

  }

};

Cheers,

Kevin

[Peter Jakobs]

First of, some features of the video Element may not work right with the Dart Editor server:

http://code.google.com/p/dart/issues/detail?id=3464

For me this worked well:

SourceElement source = new SourceElement();

source.src = "myvideo.webm";

source.type = "video/webm";

video = new VideoElement();

video.nodes.add(source);

video.play();

[kien16]

i using new x64 dart editor from dartlang, and all don't work with me :(

[kien16]

happy :)

thanks all, its just work with me :)

[Bob Nystrom]

Almost. You need a "." before the "{" (otherwise is can be ambiguous with a function statement):

var videoClip = new VideoElement().{

  src = "http://slides.html5rocks.com/src/chrome_japan.webm";

  height = 100;

  width = 100;

  on.{

    canPlay.add(videoClip.play);

    playing.add(...);

  }

};

- bob

[Kevin Kellogg]

Thanks, Bob. I suppose it could be a function (i.e. "with" the object). Anyway, I thought I'd try something with the original syntax and came up with this for HTTP requests:

// Create a new Article and get the JSON response.

new HttpClient.post('example.com/:resource/').{

    request.{

        urlContext['resource'] = 'Article';

        headers['Content-Type'] = 'application/json';

        auth = new HttpBasicAuth('user', 'password');

        data = article.json().toString();

    };

    on.{

        // events...

    };

}.json().then((Json json) => (...));

// Retrieve an Article as JSON.

new HttpClient.get('example.com/:resource/:id/').{

    request.{

        urlContext['resource'] = 'Article';

        urlContext['id'] = '1234';

        headers['Accept'] = 'application/json'; // json() below should set this

    };

    on.{

        // events...

    };

}.json().then((Json json) => (...));

json() could be: response() (HttpResponse), xml(), etc.

Initially, I wasn't sure about ".{" but I think I like it in these examples. Why was this discarded?

Kevin

[Bob Nystrom]

I'm not really sure. I wasn't in the room when Lars, Gilad, and Kasper came up with the other syntax. If I remember right, they didn't like using curly braces in the context for some reason, but I don't know the details.

- bob

[Ladislav Thon]

>> Initially, I wasn't sure about ".{" but I think I like it in these examples. Why was this discarded?
>
>
> I'm not really sure. I wasn't in the room when Lars, Gilad, and Kasper came up with the other syntax. If I remember right, they didn't like using curly braces in the context for some reason, but I don't know the details.

IIRC, it was because curly braces always introduce a new scope in Dart (or do they? I can't think of a situation when they don't). And this "visual rule" would be broken.

LT

[Bob Nystrom]

Map literals. :)

- bob