1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147
| <!DOCTYPE HTML>
<html>
<head>
<title>Projekktor - simply mighty video</title>
<style type="text/css">
body { background-color: #fdfdfd; padding: 0 20px; color:#000; font: 13px/18px monospace; width: 800px;}
a { color: #360; }
h3 { padding-top: 20px; }
</style>
<!-- Load player theme -->
<link rel="stylesheet" href="themes/maccaco/projekktor.style.css" type="text/css" media="screen" />
<!-- Load jquery -->
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<!-- load projekktor -->
<script type="text/javascript" src="projekktor-1.3.09.min.js"></script>
</head>
<body>
<div id="video">
<video class="projekktor" poster="http://www.projekktor.com/wp-content/manual/intro.png" title="This is Projekktor" width="640" height="385" controls id="player_a">
<source src="http://www.projekktor.com/wp-content/manual/intro.mp4" type="video/mp4" />
<source src="http://www.projekktor.com/wp-content/manual/intro.webm" type="video/webm" />
<source src="http://www.projekktor.com/wp-content/manual/intro.ogv" type="video/ogg" />
</video>
</div>
<div id="canvas">
<h2>Preview (click to store images below):</h2>
<canvas></canvas>
</div>
<div id="save">
<h2>Your saved images:</h2>
<ul></ul>
</div>
<script type="text/javascript">
/*
This script is just an example and included to build up the "demo status panel".
For daily practice installing the player to your site is MUCH simpler and stright forward.
Please take a look at http://www.projekktor.com/docs/quickinstall
*/
jQuery(document).ready(function($) {
// two video items we can dynamically inject for testing purposes:
var videoOne = { 0:{src: 'http://www.youtube.com/watch?v=emvpc0N0WR4', type: 'video/youtube'} }
var videoTwo = { 0:{src: 'http://www.youtube.com/watch?v=emvpc0N0WR4', type: 'video/youtube'} }
/*********************************************************************
Some player event listeners to set general status information:
*********************************************************************/
var seekListener=function(Obj) {
$('#mouseclick').html(myPlayer.getPosition())
}
/*********************************************************************
Configure and instantiate the player and
apply an "onReady" callback function
*********************************************************************/
var myPlayer = projekktor('#player_a', {
debug: false,
playerFlashMP4: 'http://www.projekktor.com/wp-content/manual/jarisplayer.swf',
playerFlashMP3: 'http://www.projekktor.com/wp-content/manual/jarisplayer.swf',
plugin_display: {
logoImage: "yourlogo.png"
}, controls: true,
addplugins: ['controlbar']
}, function(player) {
// add listeners
player.addListener('seek', seekListener);
});
var v = document.querySelector('video'),
n = document.querySelector('source').src.replace(/.*\/|\..*$/g,''),
c = document.querySelector('canvas'),
save = document.querySelector('#save ul'),
ctx = c.getContext('2d');
v.addEventListener('loadedmetadata',function(ev){
var ratio = v.videoWidth/v.videoHeight,
w = 400,
h = parseInt(w / ratio, 10),
time = 0,
img = null,
li = null;
c.width = w;
c.height = h + 40;
v.addEventListener('timeupdate',function(ev){
if(v.paused){
ctx.fillStyle = 'rgb(0, 0, 0)';
ctx.fillRect(0, 0, w, h);
ctx.drawImage(v, 0, 40, w, h);
ctx.font = '20px Calibri';
ctx.fillStyle = 'lime';
ctx.fillText(n, 5, 20);
time = format(v.currentTime);
ctx.fillStyle = 'white';
ctx.fillText(time, 395 - ctx.measureText(time).width, 20);
}
},false);
c.addEventListener('click',function(ev){
li = document.createElement('li');
img = document.createElement('img');
li.appendChild(img);
save.appendChild(li);
img.src = ctx.canvas.toDataURL('image/png');
},false);
},false);
function format(time){
var hours = parseInt((time / 60 / 60) % 60, 10),
mins = parseInt((time / 60) % 60, 10),
secs = parseInt(time, 10) % 60,
hourss = (hours < 10 ? '0' : '') + parseInt(hours, 10) + ':',
minss = (mins < 10 ? '0' : '') + parseInt(mins, 10) + ':',
secss = (secs < 10 ? '0' : '') +(secs % 60),
timestring = ( hourss !== '00:' ? hourss : '' ) + minss + secss;
return timestring;
};
});
</script>
<div id="panel">
<ul class="info">
<!-- <li>Mouse click <span id="mouseclick" ></span></li> -->
</ul>
<div style="clear:both;"></div>
</div>
</body>
</html> |
Partager