音频/视频

jQuery视频播放器代码

创客主机

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

使用方法:

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

  1. <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_u4qz1594lnixusor.css">
  2. <link rel="stylesheet" type="text/css" href="css/common.css">
  3. <link rel="stylesheet" type="text/css" href="css/detail_p.css">
  4. <script type="text/javascript" src="js/jquery.min.js"></script>
  5. <script type="text/javascript" src="js/vedio.js"></script>

HTML结构:

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

  1. <div class="videos">
  2.     <!--bottom-->
  3.     <div class="video_b" style="margin-top:0">
  4.       <div class="video_b_in">
  5.           <div class="video_ls">
  6.               <video id="vids">
  7.                 您的浏览器不支持h5标签,请升级或换个浏览器
  8.                 </video>
  9.                 <!--标题-->
  10.                 <div class="title_top">
  11.                   视频标题
  12.                 </div>
  13.                 <!--列表菜单-->
  14.                 <div class="list_right">
  15.                   <a href="javascript:void(0)" id="like"><i class="iconfont icon-xinxing2"></i></a>
  16.                     <a href="javascript:void(0)" id="zan"><i class="iconfont icon-dianzan"></i></a>
  17.                     <a href="javascript:void(0)"><i class="iconfont icon-pinglun"></i></a>
  18.                     <a href="javascript:void(0)"><i class="iconfont icon-zhuanfa"></i></a>
  19.                     <a href="javascript:void(0)"><i class="iconfont icon-gerenyetianjiajiaguanzhu"></i></a>
  20.                 </div>
  21.                 <!--暂停-->
  22.                 <div id="pass">
  23.                   <img src="media/zt.png">
  24.                 </div>
  25.                 <!--控制器-->
  26.                 <div class="controls">
  27.                   <!--进度条容器-->
  28.                     <div id="pBar">
  29.                       <!--进度条底色-->
  30.                         <div class="pBar_bj">
  31.                           <!--缓冲的进度条-->
  32.                             <div id="buff"></div>
  33.                           <!--进度条动态-->
  34.                           <div id="pBar_move">
  35.                               <!--进度条按钮-->
  36.                             <div id="pBtn"></div>
  37.                             </div>
  38.                         </div>
  39.                     </div>
  40.                     <!--展厅播放快进快退音量全屏-->
  41.                     <div class="trol_list">
  42.                       <!--暂停和快进快退-->
  43.                         <div class="list_1">
  44.                           <i class="iconfont icon-kuaitui-copy" onClick="ktui()"></i>
  45.                             <i class="iconfont icon-zanting2" id="ztbf"></i>
  46.                             <i class="iconfont icon-kuaijin" onClick="kjin()"></i>
  47.                         </div>
  48.                         <!--音量-->
  49.                         <div class="voice">
  50.                           <i class="iconfont icon-yinliang" style="float:left;"></i>
  51.                             <div class="voicep">
  52.                               <div id="vBar">
  53.                                   <div id="vBar_in"></div>
  54.                                 </div>
  55.                                 <div id="vBtn"></div>
  56.                             </div>
  57.                         </div>
  58.                         <!--时间-->
  59.                         <div class="vtime">
  60.                           <font id="nTime">00:00:00</font>/<em id="aTime">00:00:00</em>
  61.                         </div>
  62.                         <!--全屏-->
  63.                         <i id="qp" class="iconfont icon-quanping"></i>
  64.                     </div>
  65.                 </div> 
  66.             </div>
  67.         </div>
  68.     </div>
  69. </div>

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

(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!