--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/web/tagging/index.html Wed Aug 12 17:34:15 2009 +0200
@@ -0,0 +1,182 @@
+<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>