我基本上试图在javascript和html中创建一个视频注释编辑器，有点像YouTube。我已经设法完成了大部分工作，它可能不是最好的实现，但至少我尝试了;）。
Bassically我有一个按钮，当它被点击时会生成一个div，这个div会有自定义标签，用于存储出现和消失的时间，背景颜色和位置。
播放视频时，会根据时间渲染div。然后，注释的所有数据将被发送到数据库，稍后将在另一页上呈现。
这一切都工作，但是我希望能够调整div的大小并使它们可以在窗口上拖动。 ATM它们都在固定的地方，尺寸也是固定的。这是我尝试过的，使用.draggable.resizable，但它不起作用，我不知道为什么。我相信问题来自于我的代码中的时间和地点，我使注释可拖动和可调整大小，这就是div一旦呈现
简而言之，我希望注释是：
HMTL
<div class="inner">
<div class="container" id="control_panel" style="float:left; width:50%;">
<div class="row">
<div class="col-sm-12">
<button id="btn_add_annotation" class="btn btn-default" onclick="add_annotation()">
<span class="glyphicon glyphicon-plus"></span> New annotation
</button>
<div id="annotation_editor" style="box-shadow: 0 0 20px grey; border-radius:25px; padding:20px; margin-top:20px; display:none">
Choose the label:
<input id="input" onClick="Clear();" onkeyup="getVal()" type="text" value="Enter the desired text" style="height:30px"><br>
<p>  </p>
Choose the backgroud color:
<input type='text' id="color_picker">
<p>  </p>
How long would you like it to stay up:
<div style="float:right; width:60%;">
<input id="annot_time" type=range>
<output id="number_seconds"></output>
</div>
<p>  </p>
<button id="confirm_annotation" class="btn btn-default" onclick="add_toTable()">
<span class="glyphicon glyphicon-ok"></span> Confirm
</button>
</div>
<p>  </p>
<div class="table-responsive">
<table class="table" id="annotation_table">
<thead>
<tr>
<th>ID</th>
<th>Annotation Text</th>
<th>Time in (sec)</th>
<th>Time out (sec)</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>You have no annotation yet :-(</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="container" id="video_wrapper" style="float:right; width:50%; padding:50px">
<div class="row">
<div class="col-sm-12" id="video-wrapper">
<div class="annotation-wrapper" id="annotation-wrapper" style="position:absolute; height:100%; width:100%;"></div>
<video id='advertisment_video' margin-top="100px" class='video-js
vjs-default-skin' preload='auto' data-setup='{}' controls webkit-playsinline>
<source src=<?php echo '"'.$video["video_link"].'"'; ?> type='video/mp4'></source>
</div>
<div class="col-sm-7" id="annotation_confirmation" style="float:right; background: rgba(255,255,255,0.5); padding:12px; width:100%; display:none">
<div id="visualization"></div>
<p>  </p>
<button id="add_annotation" class="btn btn-default" onclick="" style="float:right">
<span class="glyphicon glyphicon-save-file"></span> Save & Reveiw
</button>
</div>
</div>
</div>
</div>
JAVA SCRIPT
var tbody = $("#log");
var annotation_count = 0;
function draggableResizable (elem){
elem.draggable();
elem.resizable();
}
function loadAnnot(){
var v = document.getElementsByTagName('video')[0]
v.addEventListener('timeupdate',function(event){
var sec = parseInt(v.currentTime);
$( ".annotation" ).each(function() {
var time_in = $(this).data("in");
var time_out = $(this).data("out");
var pos_x = $(this).data("x");
var pos_y = $(this).data("y");
this.style.position = "absolute";
this.style.left = pos_x+"px";
this.style.top = pos_y+"px";
if (sec >= time_in && sec < time_out){
if ( $(this).not(':visible') ) {
$(this).show("slow");
}
}
if (sec < time_in || sec >= time_out){
if ( $(this).is(':visible') ) {
$(this).hide("slow");
}
}
});
},false);
}
function add_annotation(){
annotation_count++;
document.getElementById("btn_add_annotation").disabled = true;
var v = document.getElementsByTagName('video')[0]
v.pause();
document.getElementById("annot_time").value = "0";
document.getElementById("annot_time").min = "0";
document.getElementById("annot_time").max = v.duration - v.currentTime;
$('#annotation_editor').slideToggle("slow");
var e = $('<div class="annotation" data-in= '+ v.currentTime +' style="background: rgb(255,255,255); width: 25%; left:100px; top:100px; display:none; opacity: 0.6">Exemple of annotation</div>').draggable.resizable;
var vid = document.getElementById("advertisment_video");
vid.currentTime;
$('.annotation-wrapper').prepend(e);
e.show("slow");
e.attr('id', 'annotation'+annotation_count);
draggableResizable(e);
};
function add_toTable() {
var x = document.getElementById("input");
var text_row_one = document.getElementById("annotation_table").rows[1].cells.item(1).innerHTML;
if (x.value == "Enter the desired text"){
alertify.alert("Please enter a text lable");
return;
}
if (text_row_one == "You have no annotation yet :-("){
document.getElementById("annotation_table").deleteRow(1);
$('#annotation_confirmation').slideToggle("slow");
}
var table = document.getElementById("annotation_table");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var row_count = document.getElementById("annotation_table").rows.length;
var vid = document.getElementById("advertisment_video");
var n = vid.currentTime;
var time_in = parseInt(n);
var annot_length = document.getElementById("annot_time").value;
var time_out = time_in + parseInt(annot_length);
cell1.innerHTML = row_count-1;
cell2.innerHTML = x.value;
cell3.innerHTML = time_in;
cell4.innerHTML = time_out;
var current_annot = document.getElementById('annotation'+annotation_count);
current_annot.setAttribute('data-out', time_out);
$('#annotation'+annotation_count).hide("slow");
resetEditor();
}
function getVal() {
var x = document.getElementById("input");
document.getElementById("annotation"+annotation_count).innerHTML = x.value;
}
$(document).ready(function(){
var i = document.getElementById("annot_time"),
o = document.getElementById("number_seconds");
o.innerHTML = "0 Seconds";
i.addEventListener('change', function () {
o.innerHTML = i.value + " Seconds";
}, false);
var vid = document.getElementById("advertisment_video");
vid.onplay = function() {
loadAnnot();
};
$("#color_picker").spectrum({
color: "#f00",
change: function(color_picker) {
var color = color_picker.toHexString();
document.getElementById('annotation'+annotation_count).style.background = color;
}
});
});
function resetEditor(){
$("#input").val("Enter the desired text");
document.getElementById("btn_add_annotation").disabled = false;
$('#annotation_editor').slideToggle("slow");
$('#number_seconds').innerHTML("0 Seconds");
}
感谢您的帮助。