当前位置：首页 > 网页特效 > 音频和视频

jQuery视频播放器代码

分类：音频和视频日期：2024-05-14 点击(1) 评论(0)

jQuery视频播放器代码

简介

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

```html
<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_u4qz1594lnixusor.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/detail_p.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/vedio.js"></script> 
```              
#####  HTML结构
该jQuery视频播放器的基本HTML结构如下：

```html
<div class="videos">
    
    <div class="video_b" style="margin-top:0">
      <div class="video_b_in">
          <div class="video_ls">
              <video id="vids">
                您的浏览器不支持h5标签,请升级或换个浏览器
                </video>
                
                <div class="title_top">
                  视频标题
                </div>
                
                <div class="list_right">
                  <a href="javascript:void(0)" id="like"><i class="iconfont icon-xinxing2"></i></a>
                    <a href="javascript:void(0)" id="zan"><i class="iconfont icon-dianzan"></i></a>
                    <a href="javascript:void(0)"><i class="iconfont icon-pinglun"></i></a>
                    <a href="javascript:void(0)"><i class="iconfont icon-zhuanfa"></i></a>
                    <a href="javascript:void(0)"><i class="iconfont icon-gerenyetianjiajiaguanzhu"></i></a>
                </div>
                
                <div id="pass">
                  <img src="media/zt.png">
                </div>
                
                <div class="controls">
                  
                    <div id="pBar">
                      
                        <div class="pBar_bj">
                          
                            <div id="buff"></div>
                          
                          <div id="pBar_move">
                              
                            <div id="pBtn"></div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="trol_list">
                      
                        <div class="list_1">
                          <i class="iconfont icon-kuaitui-copy" onClick="ktui()"></i>
                            <i class="iconfont icon-zanting2" id="ztbf"></i>
                            <i class="iconfont icon-kuaijin" onClick="kjin()"></i>
                        </div>
                        
                        <div class="voice">
                          <i class="iconfont icon-yinliang" style="float:left;"></i>
                            <div class="voicep">
                              <div id="vBar">
                                  <div id="vBar_in"></div>
                                </div>
                                <div id="vBtn"></div>
                            </div>
                        </div>
                        
                        <div class="vtime">
                          <font id="nTime">00:00:00</font>/<em id="aTime">00:00:00</em>
                        </div>
                        
                        <i id="qp" class="iconfont icon-quanping"></i>
                    </div>
                </div> 
            </div>
        </div>
    </div>
</div>
```
视频地址在js文件中指定，可以查看vedio.js文件。

web299.com

jQuery视频播放器代码

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果