HTML and CSS Reference
In-Depth Information
in chapter 9 for a more in-depth discussion. In the meantime, remember
that anything you can do to HTML elements with CSS can be done to the
<video> element:
div video {
transition-duration: 10s;
}
div:hover video:nth-child(1) {
transform-origin: bottom
right;
transform: rotate(16.5deg);
}
div:hover video:nth-child(2) {
transform-origin: top right;
transform: rotate(33deg);
}
div:hover video:nth-child(3) {
transform-origin: top left;
transform: rotate(66deg);
}
<div>
<video id="myvideo1"
width="160"
autoplay loop>
<source src="00092.webm"
type="video/webm">
<source src="00092.mp4"
type="video/mp4">
<source src="00092.low.mp4"
type="video/mp4">
<source src="00092.ogv"
type="video/ogg">
No video!
</video>
<video id="myvideo2" ...
<video id="myvideo3" ...
</div>
CSS transitions are covered in detail in chapter 9; any of the
effects described in that chapter can be applied to the <video>
element. The previous example applies three transforms to three
identical <video> elements with a 10 second transition on :hover .
In the previous chapter, you learned that the <canvas> element can grab
an image from anywhere on the page and subject it to various transfor-
mations. One of the more exciting features of HTML5 is that those
same canvas manipulation tricks also work with the <video> element.
The next example looks at the basic process of getting a frame from the
video into a <canvas> element by making a frame grabber.
First, let's get the HTML sorted out. Start with the usual <video> ele-
ment, and add as many sources as required; you can use the code from
“Using multiple resources” as a starting point.
Search WWH ::




Custom Search