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> |
