有没有支持在视频帧中突出显示特定内容的库? 类似于视频编辑功能。 我想在视频帧中放置任何矩形或圆形,并提供一些文本,以便下次播放视频时可以播放所有突出显示的内容。
有没有支持在视频帧中突出显示特定内容的库? 类似于视频编辑功能。 我想在视频帧中放置任何矩形或圆形,并提供一些文本,以便下次播放视频时可以播放所有突出显示的内容。
你可以使用VideoJS和这个Annotation Plugin。这里是实时演示。我不确定它是否支持形状。
window['ann'] = [{'at':100,'msg':'cool'},{'at':230,'msg':'coolianno'}];
var currentFrame = $('#currentFrame');
var video = VideoFrame({
id : 'video',
frameRate: 29.97,
callback : function(frame) {
ann.forEach(function(ele){
if (frame == ele['at']) {
currentFrame.html(ele['msg']);
}
});
}
});
$('#play-pause').click(function(){
ChangeButtonText();
});
function ChangeButtonText(){
if(video.video.paused){
video.video.play();
video.listen('frame');
$("#play-pause").html('Pause');
}else{
video.video.pause();
video.stopListen();
$("#play-pause").html('Play');
}
}
<script src="https://rawgit.com/allensarkisyan/VideoFrame/master/VideoFrame.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="frame">
<h3 style="color:white;position:absolute;left:50%;top10%;" id="currentFrame">Annotation board</h3>
</div>
<video height="180" width="100%" id="video">
<source src="http://www.w3schools.com/html/mov_bbb.mp4"></source>
</video>
<button style="color:red;position:absolute;left:3%;top10%;" id="play-pause">Play</button>