用jQuery制作视频弹幕

效果图：

左侧视频画面上显示弹幕，右侧评论区显示各用户发表过的评论，自己发表的评论也可显示在弹幕上。

基本布局

HTML：

<div id="myvideo">
    <!-- 视频区 -->
    <div id="video_area">
        <!-- 视频窗口 -->
        <div id="video_window">
            <!-- 视频 -->
            <video id="video" src="media/海草舞.mp4" width="500" preload="metadata"></video>
            <!-- 弹幕区，覆盖在视频窗口上 -->
            <div id="barrage_area" class="barrage_area"></div>
        </div>
        <!-- 进度条 -->
        <div class="myprogress"></div>
        <!-- 播放控件 -->
        <div id="mycontrols" class="mycontrols icon">
			<!-- 播放按钮 -->
			<div id="play" class="play">播放</div>
            <!-- 停止按钮 -->
            <div id="stop" class="stop">停止</div>
            <!-- 弹幕开关 -->
            <div id="on_off" class="barrage_icon">
            	<div>弹幕</div>
           </div>
           <!-- 时间 -->
           <div class="time_area">
                <span id="curTime"></span> / <span id="durTime"></span>
           </div>
           <!-- 屏宽 -->
           <div class="range_area"></div>
           <!-- 音量图标 -->
           <div id="horn" class="horn"></div>
        </div>
    </div>
    <!-- 评论区 -->
    <div id="comment_area" class="comment_area">
        <!-- 用户评论 -->
        <div id="comment" class="comment">
            <div id="comment_content"></div>
        </div>
        <!-- 发表评论 -->
        <div>
            <div><textarea id="mycomment" class="mycomment" rows="5" onfocus