jquery简单实现视频字幕系统

<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>"
    }
  ]
}