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