Game Development Reference
In-Depth Information
However, if all we're adding to the video is a simple detail here and there, then most
modern web browsers will have no problem rendering everything at full speed.
<style>
video {
-webkit-box-reflect: below 1px;
-webkit-transition: all 1.5s;
}
video {
-webkit-filter: contrast(250%);
}
div {
position: relative;
}
div img {
position: absolute;
left: 0;
top: 221px;
width: 400px;
height: 220px;
}
</style>
<div>
<video controls width="400" height="220"
poster="bunny-poster.png">
<!-- Video courtesy of
http://www.bigbuckbunny.org -->
<source src="bunny.ogg" type="video/ogg" />
<source src="bunny.mp4" type="video/mp4" />
<source src="bunny.webm" type="video/webm"
/>
</video>
<img src="semi-transparent-mask.png" />
</div>
