效果图:
左侧视频画面上显示弹幕,右侧评论区显示各用户发表过的评论,自己发表的评论也可显示在弹幕上。
基本布局
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