<section>
<div id="videoMain">
<video id="videoPlayer" poster="mp4/ckin.jpg" src="mp4/ckin.mp4" data-ckin="default" data-overlay="1" data-title="网上课堂" data-url="mp4/ckin.json"></video>
<div id="videoTips"></div>
</div>
</section>
<section>
<p id="tips" runat="server"></p>
</section>
<script src="dist/js/ckin.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(function () {
setInterval(showTips, 100);
function showTips() {
var video = document.getElementById("videoPlayer");
$.getJSON($("video").attr("data-url"), function (data) {
$.each(data.videoTips, function (i, item) {
if (video.currentTime > item.startTime) {
$("#videoTips").html(item.tipContents);
}
})
})
}
});
</script>
ckin.json
{
"videoTips": [
{
"startTime": 3,
"tipContents": "<b>现在你看的字幕是根据后台字幕脚本文件按照设定时间开始播放的。</b>"
},
{
"startTime": 15,
"tipContents": "<b>最终目标是视频中讲话直接生成字母脚本文件并自动适配到视屏中。</b>"
},
{
"startTime": 20,
"tipContents": "<b>使用到了语音识别等技术在目前技术下是完全可以实现的。</b>"
}
]
}