<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="flowplayer-3.1.2.min.js"></script>
<script type="text/javascript" src="tagtool.js"></script>
<script type="text/javascript" src="segments.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
.seg_container {
margin: 10px;
}
.segtimeline {
width: 500px;
height:15px;
border: 1px solid black;
}
.segtimeline > div {
height: 15px;
background: black;
}
.seghiglighted {
background: #ffcc33 !important;
}
</style>
<title>Marquer un extrait</title>
<script type="text/javascript">
// Charge le player
flowplayer("player", "flowplayer-3.1.2.swf",
{
clip: {url: "xxy.f4v",
autoPlay: false,
autoBuffering: true,
onSeek: function() {
playerSeek();
}
},
plugins: {
content: {url: "flowplayer.content-3.1.0.swf",
backgroundColor: 'transparent',
display: 'none',
style: {p: {fontSize: 15}}
}
},
onLoad: function() {
playerLoaded(this);
},
onUnload: function() {
playerUnloaded(this);
},
onError: function(code,msg) {
alert(msg);
},
});
function loadSegments() {
if ($f().getClip() == undefined) {
window.setTimeout("loadSegments()",2000);
return false;
}
var duration = Math.round($f().getClip().fullDuration*10) * 100;
var segments = tagTool.segments;
for (seg in segments) {
var segd = segments[seg].sout - segments[seg].sin;
var percent = Math.round(segd * 100 / duration);
var offset = Math.round(segments[seg].sin * 100 / duration);
var c = $('#seg_container_template').clone().removeAttr("id");
$("#segments").append(c);
$("span", c).html('<strong>' + tagTool.segments[seg].tag +'</strong> par ' + segments[seg].user);
$("#seg_0", c).css({'margin-left': offset+'%', 'width': percent+'%'})
.attr('id', 'seg_' + seg)
.click(function() {
seg_id = $(this).attr("id");
seg_id = seg_id.substr(seg_id.indexOf('_') + 1);
tagTool.playSegment(seg_id, $("#pauseAfter").val());
});
c.show();
}
}
function playerSeek() {
tagTool.rebuildCurrentTags(tagTool.player.getTime() * 1000);
}
function playerLoaded(player) {
// Charge les tags
$("#segmentMarkerButtons").css("opacity",1);
$("#btMarkIn").removeAttr("disabled");
$.getJSON("loadtags.php", "", function(data) {
tagTool.segments = data;
tagTool.setupHandlers($f("player"));
window.setTimeout("loadSegments()", 2000);
});
tagTool.player = $f("player");
tagTool.showTagInPage = false;
}
</script>
</head>
<body>
<div id="page">
<h1>Marquer un extrait</h1>
<p>Cette page vous permet de marquer un passage de la vidéo avec un mot clé</p>
<div style="display:block;width:520px;height:330px;background:#aaa;" id="player">
</div>
<p id="segmentMarkerButtons" style="text-align:center;opacity:0.5">
<button type="button" id="btMarkIn" disabled onClick="segmentMarker.markIn()">
Marquer le début
</button>
<button type="button" id="btMarkOut" disabled onClick="segmentMarker.markOut()">
Marquer la fin
</button>
<button type="button" id="btPlaySegment" disabled onClick="segmentMarker.playSegment()">
Lire la séquence
</button>
</p>
<form action="savetag.php" method="post" id="segmentForm" style="display: none;">
<h2>Enregistrer votre segment</h2>
<p>Vous aller créer un segment, entre <span id="mkin">0</span> et <span id="mkout">0</span>.</p>
<p style="text-align: center;">
Votre tag : <input type="text" id="usertag" name="usertag" />
Nom d'utilisateur : <input type="text" id="username" name="username" value="visteur" />
<input type="hidden" name="xtid" value="<?php echo extract.id;?>" />
<input type="hidden" name="timein" id="frmIn" value="0" />
<input type="hidden" name="timeout" id="frmOut" value="0" />
<input type="submit" value="Enregistrer" />
</p>
</form>
<h2>Segments</h2>
<p>Segments déjà créés. Cliquez sur un segment pour le lire.</p>
<p><input type="checkbox" id="pauseAfter" checked /> Faire une pause à la fin du segment</p>
<div id="segments">
<div class="seg_container" id="seg_container_template" style="display: none">
<span class="tagname">Tag</span>
<div class="segtimeline">
<div id="seg_0">.</div>
</div>
</div>
<div id="dbg">
<ul>
</ul>
</div>
</body>
</html>