CAMP/doctypehtml
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added test html files

Browse Source
This commit is contained in:
Sanj 2011-02-05 11:10:18 +05:30
parent a634b2a88d
commit b89d8478a6
4 changed files with 124 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
basicvideo.html Normal file
View File

@ -0,0 +1,34 @@
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$('#do').click(function() {
var html = $('#testCode').val();
$('#preview').html(html);
});
});
</script>
<style type="text/css">
#testCode {
width: 500px;
height: 300px;
font-size: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="preview"></div>
<div id="txtWrap">
<textarea id="testCode"></textarea><br />
<button id="do">Do</button>
</div>
</div>
</body>
</html>

4
index.html
View File

@ -35,11 +35,11 @@ var allSlides =
},
{
"title": "And &lt;canvas /> if you like...",
"iframe": "videocanvas.html"
'iframe': 'http://people.mozilla.com/~prouget/demos/DynamicContentInjection/play.xhtml'
},
{
"title": "You begin to get the idea...",
'iframe': 'http://hacks.mozilla.com'
'iframe': 'http://html5doctor.com/demos/video-canvas-magic/demo1.html'
},
{
"title": "Give me my Javascript",

47
videocanvas.html Normal file
View File

@ -0,0 +1,47 @@
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$('#do').click(function() {
var code = $('#testCode').val();
eval(code);
});
});
</script>
<style type="text/css">
#testCode {
width: 500px;
height: 300px;
font-size: 20px;
}
#video1 {
width: 320px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="preview">
<video id="video1" class="testvideo" src="test1.ogg" controls="controls"></video>
<canvas id="canvas" width="320" height="240"></canvas>
</div>
<div id="txtWrap">
<textarea id="testCode">
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
var video = document.getElementById("video1");
ctx.drawImage(video, 0, 0, video.width, video.height, 0, 0, canvas.width, canvas.height);
</textarea><br />
<button id="do">Do</button>
</div>
</div>
</body>
</html>

41
videocss.html Normal file
View File

@ -0,0 +1,41 @@
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$('#do').click(function() {
var code = $('#testCode').val();
eval(code);
});
});
</script>
<style type="text/css">
#testCode {
width: 500px;
height: 150px;
font-size: 20px;
}
.testvideo {
width: 320px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="preview">
<video id="video1" class="testvideo" src="test1.ogg" controls="controls"></video>
<video id="video2" class="testvideo" src="test2.ogg" controls="controls"></video>
</div>
<div id="txtWrap">
<textarea id="testCode"></textarea><br />
<button id="do">Do</button>
</div>
</div>
</body>
</html>