<link href="css/default.css" rel="stylesheet" type="text/css" />
<style>
#video-column {
float: left;
width: 50%;
margin-top: 20px;
}
#reflection-button {
margin: 20px 0;
}
#audio-column {
float: left;
width: 45%;
margin-top: 120px;
}
.media-buttons {
margin: 40px 0;
}
</style>
<div id="video-column" class="center">
<input type="button" id="reflection-button" οnclick="addReflection()" value="Add CSS reflection to video" />
<video width="390" id="clip" controls>
<source src="src/chrome_japan.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="src/chrome_japan.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="src/chrome_japan.ogv" type='video/ogg; codecs="theora, vorbis"' />
Your browser does not support the video tag
</video>
<div class="media-buttons">
<input type="button" id="play-button" οnclick="PlayVideo()"; value="Play" />
<input type="button" id="pause-button" οnclick="PauseVideo()"; value="Pause" disabled />
<input type="button" id="mute" οnclick="MuteUnMute()" value="Mute" />
</div>
</div>
<style>
#video-column {
float: left;
width: 50%;
margin-top: 20px;
}
#reflection-button {
margin: 20px 0;
}
#audio-column {
float: left;
width: 45%;
margin-top: 120px;
}
.media-buttons {
margin: 40px 0;
}
</style>
<div id="video-column" class="center">
<input type="button" id="reflection-button" οnclick="addReflection()" value="Add CSS reflection to video" />
<video width="390" id="clip" controls>
<source src="src/chrome_japan.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="src/chrome_japan.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="src/chrome_japan.ogv" type='video/ogg; codecs="theora, vorbis"' />
Your browser does not support the video tag
</video>
<div class="media-buttons">
<input type="button" id="play-button" οnclick="PlayVideo()"; value="Play" />
<input type="button" id="pause-button" οnclick="PauseVideo()"; value="Pause" disabled />
<input type="button" id="mute" οnclick="MuteUnMute()" value="Mute" />
</div>
</div>