Adding video to a web page

Adding video to a web page is as easy to do as adding audio: just add a <video> tag to the HTML with an embedded <source> tag specifying src and type, and Dartium renders this nicely (see video01.html):

<video poster="wildlife.jpg" controls>
  <source src="wildlife.ogv" type='video/ogg; codecs="theora,     vorbis"' />
  <source src="wildlife.webm" type='video/webm; codecs="vp8,   vorbis"' />
     The video tag is not supported in your browser. Download the   video <a href="wildlife.webm">here</a>.
</video>

Note

For code file of this section, refer to chapter 7video in the code bundle.

The poster attribute from <video> serves to provide the initial image, see the following screenshot:

Adding video to a web page

The poster image with the <video> tag

The three important formats you should care about are WEBM, MP4, and OGV. For MP4, use the following type:

  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'

Both <audio> and <video> support other attributes, such as autoplay and loop.

Note

For more info, check the following link:

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

Calling a video from Dart is nothing more than creating a VideoElement class that references the <video> tag, as in video2.dart. The loop property shows the video continuously:

  VideoElement video = querySelector('#video'),
  video.loop = true;
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.137.184.102