当前位置:主页 > 网页特效 > 播放器代码 >

jQuery视频播放器代码

发布时间:2018/08/01 来源:互联网 浏览: 关键词:jquery 视频播放器 播放器代码 
jQuery视频播放器代码 jQuery视频播放器代码
阿里云

简要教程

这是一款jQuery视频播放器代码。该jQuery视频播放器实现了视频播放器的完整功能,如快进和后退播放功能,音量调节功能,全屏播放功能等,非常实用。

使用方法

在页面中引入必要的CSS文件,以及jquery和vedio.js文件。

<linkrel="stylesheet"type="text/css"href="http://at.alicdn.com/t/font_u4qz1594lnixusor.css">
<linkrel="stylesheet"type="text/css"href="css/common.css">
<linkrel="stylesheet"type="text/css"href="css/detail_p.css">
<scripttype="text/javascript"src="js/jquery.min.js"></script>
<scripttype="text/javascript"src="js/vedio.js"></script>  

HTML结构

该jQuery视频播放器的基本HTML结构如下:

<divclass="videos">
    <!--bottom-->
    <divclass="video_b"style="margin-top:0">
      <divclass="video_b_in">
          <divclass="video_ls">
              <videoid="vids">
                您的浏览器不支持h5标签,请升级或换个浏览器
                </video>
                <!--标题-->
                <divclass="title_top">
                  视频标题
                </div>
                <!--列表菜单-->
                <divclass="list_right">
                  <ahref="javascript:void(0)"id="like"><iclass="iconfont icon-xinxing2"></i></a>
                    <ahref="javascript:void(0)"id="zan"><iclass="iconfont icon-dianzan"></i></a>
                    <ahref="javascript:void(0)"><iclass="iconfont icon-pinglun"></i></a>
                    <ahref="javascript:void(0)"><iclass="iconfont icon-zhuanfa"></i></a>
                    <ahref="javascript:void(0)"><iclass="iconfont icon-gerenyetianjiajiaguanzhu"></i></a>
                </div>
                <!--暂停-->
                <divid="pass">
                  <imgsrc="media/zt.png">
                </div>
                <!--控制器-->
                <divclass="controls">
                  <!--进度条容器-->
                    <divid="pBar">
                      <!--进度条底色-->
                        <divclass="pBar_bj">
                          <!--缓冲的进度条-->
                            <divid="buff"></div>
                          <!--进度条动态-->
                          <divid="pBar_move">
                              <!--进度条按钮-->
                            <divid="pBtn"></div>
                            </div>
                        </div>
                    </div>
                    <!--展厅播放快进快退音量全屏-->
                    <divclass="trol_list">
                      <!--暂停和快进快退-->
                        <divclass="list_1">
                          <iclass="iconfont icon-kuaitui-copy"onClick="ktui()"></i>
                            <iclass="iconfont icon-zanting2"id="ztbf"></i>
                            <iclass="iconfont icon-kuaijin"onClick="kjin()"></i>
                        </div>
                        <!--音量-->
                        <divclass="voice">
                          <iclass="iconfont icon-yinliang"style="float:left;"></i>
                            <divclass="voicep">
                              <divid="vBar">
                                  <divid="vBar_in"></div>
                                </div>
                                <divid="vBtn"></div>
                            </div>
                        </div>
                        <!--时间-->
                        <divclass="vtime">
                          <fontid="nTime">00:00:00</font>/<emid="aTime">00:00:00</em>
                        </div>
                        <!--全屏-->
                        <iid="qp"class="iconfont icon-quanping"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

视频地址在js文件中指定,可以查看vedio.js文件。

共有人阅读,期待你的评论!评论
骚年说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top