devbox
小蓝xlanll
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HTML和jquery实现播放功能_html和j视频全屏状态显示进度条

作者：小蓝xlanll | 2024-02-22 13:19:43

赞

踩

html和j视频全屏状态显示进度条

HTML和jquery实现播放功能一，如下图所示：

 

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.  <head>
  4.   <meta charset="utf-8" />
  5.   <title>Time play test</title>
  6.   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  7.   <style>
  8.         *{
  9.             padding: 0;
  10.             margin: 0;
  11.             list-style: none;
  12.             text-decoration: none;
  13.         }
  14.         body{
  15.             background: #efefef;
  16.         }
  17.         /*时间轴样式*/
  18.         .heatMapTimer {
  19.             position: absolute;
  20.             width: 100%;
  21.             z-index: 1;
  22.             text-align: center;
  23.             top: 40px;
  24.         }
  25.         .time-item{
  26.             width: 25px;
  27.             height: 25px;
  28.             border-radius: 50%;
  29.             margin: 0 11px;
  30.         }
  31.         .time-btn {
  32.             border-radius: 3px;
  33.             width: 30px;
  34.             height: 30px;
  35.             font-size: 23px;
  36.             margin-right: 10px;
  37.         }
  38.         .time-item, .time-btn {
  39.             display: inline-block;
  40.             background: rgba(255,255,255,.6);
  41.             cursor: pointer;
  42.         }
  43.         .time-txt-item {
  44.             margin: 0 1px;
  45.             width: 45px;
  46.             height: 25px;
  47.         }
  48.         .time-txt-btn {
  49.             width: 40px;
  50.             height: 25px;
  51.         }
  52.         .time-txt-item, .time-txt-btn {
  53.             background: rgba(0,0,0,.2);
  54.             color:#fff;
  55.             display: inline-block;
  56.         }
  57.          /*播放样式*/
  58.         .time-play:before{
  59.             display: block;
  60.             content: '';
  61.             border-top: 12px solid transparent;
  62.             border-left: 12px solid #4745de;
  63.             border-bottom: 12px solid transparent;
  64.             width: 0;
  65.             height: 0;
  66.             text-align: center;
  67.             margin: 3px auto 0;
  68.         }
  69.          /*暂停的样式*/
  70.         .time-pause:before,.time-pause:after{
  71.             content: ' ';
  72.             border-radius: 3px;
  73.             border-top:6px solid #4745de;
  74.             border-bottom:6px solid #4745de;
  75.             border-left: 3px solid #4745de;
  76.             border-right:3px solid #4745de;
  77.             margin: 3px;
  78.             overflow: hidden;
  79.             display: inline-block;
  80.             height: 12px;
  81.         }
  82.        /*时间点选中样式*/
  83.         .time-item.active{
  84.             background-color: #4745de; /*34b93d*/
  85.         }
  86.   </style>
  87.  </head>
  88.  <body>
  89.     <div class="heatMapTimer">
  90.         <ul class="time-line">
  91.             <li class="time-btn time-play"></li>
  92.         </ul>
  93.         <ul class="time-txt-line">
  94.             <li class="time-txt-btn">时间</li>
  95.         </ul>
  96.     </div>
  97.   <script>
  98.     addTimeTitle();//为时间轴的li标签动态添加title属性(本篇默认加的是最近十二个小时的时间阶段，可根据自己的需要选择是否引用)
  99.  
  100.     function timeClick() {
  101.         var timer,
  102.             index,//定义li选中状态时的索引
  103.             $timeUl=$(".time-line"),
  104.             $timeLi=$(".time-line li");
  105.         var lenCount=$timeLi.length-1;//去除第一个按钮li标签的长度
  106.         $(".time-btn").removeClass("time-pause");
  107.         if (!$('.time-btn').hasClass('.time-play')){
  108.             $('.time-btn').addClass("time-play");
  109.         }
  110.         //点击播放时间轴事件
  111.         $timeUl.on("click",".time-play",function () {
  112.             $(this).removeClass("time-play").addClass("time-pause");
  113.             index=Number($timeUl.find("li.active").attr("data-index"));//将字符串强制转换为数字类型
  114.             clearInterval(timer);//清除定时器
  115.             timer=setInterval(function () {
  116.                 //判断当前索引的位置，如果在最后一位则从第一个时间点开始，反之则按顺序播放
  117.                 if(lenCount==index+1){
  118.                     $timeUl.find("li:eq('"+lenCount+"')").removeClass("active");
  119.                     $timeUl.find("li:eq(1)").addClass("active");
  120.                 }else{
  121.                     $(".time-line li.active").next().addClass("active").siblings().removeClass("active");
  122.                 }
  123.                 $timeLi.each(function () {
  124.                     if($(this).hasClass("active")){
  125.                         index=Number($(this).attr("data-index"));//字符串转换为数字类型，索引从0开始
  126.                     }
  127.                 });
  128.             },2000)
  129.         });
  130.         //点击暂停按钮事件
  131.         $(".time-line").on("click",".time-pause",function () {
  132.             $(this).removeClass("time-pause").addClass("time-play");
  133.             clearInterval(timer);//清除定时器
  134.         });
  135.         //点击某个时间点时触发事件
  136.         $timeLi.not(":first-child").click(function () {
  137.             index=$(this).data("index");
  138.             $(".time-btn").removeClass("time-pause").addClass("time-play");
  139.             $(this).addClass("active").siblings().removeClass("active");
  140.             clearInterval(timer);//清除定时器
  141.         })
  142.     }
  143.     function addTimeTitle() {
  144.         var date=[];
  145.         for(var i=12;i>=1;i--){
  146.             date.push({index:i,time:getFormatDate(i)});
  147.         }
  148.         //数组排序
  149.         date= date.sort(function(a,b) {
  150.             return a.index> b.index?-1:1;
  151.         });
  152.         $.each(date,function (index,item) {
  153.             var li_str = '<li class="time-item" data-index="'+ index +'" title="'+item.time+'"></li>';
  154.             if(index===0){
  155.                 li_str = '<li class="time-item active" data-index="'+ index +'" title="'+item.time+'"></li>';
  156.             }
  157.             $('.time-line').append(li_str);
  158.             var li_txt_str = '<li class="time-txt-item" data-index="'+ index +'">'+item.time+'</li>';
  159.             $('.time-txt-line').append(li_txt_str);
  160.         });
  161.  
  162.         timeClick();//时间轴点击事件
  163.     }
  164.     //获取系统时间的最近二个小时
  165.     function getFormatDate(hourCount){
  166.         var now=new Date();
  167.         var date=new Date(new Date(now.getTime() - hourCount * 600 * 1000));
  168.         var year=date.getFullYear();
  169.         var month=date.getMonth()+1;
  170.         month=(month<=9)?"0"+month:month;
  171.         var day=date.getDate();
  172.         day=(day<=9)?"0"+day:day;
  173.         var hour=date.getHours();
  174.         hour=(hour<=9)?"0"+hour:hour;
  175.         var minute=date.getMinutes();
  176.         minute=(minute<=9)?"0"+minute:minute;
  177.         //var dateTime=year+"-"+month+"-"+day +" "+hour+":00:00";
  178.         var dateTime=hour+":"+minute;
  179.         return dateTime;
  180.     }
  181.   </script>
  182.  </body>
  183. </html>

HTML和jquery实现播放功能二，如下图所示：

 

 代码如下：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.  <head>
  4.   <meta charset="utf-8" />
  5.   <title>Time play test</title>
  6.   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  7.   <style>
  8.         *{
  9.             padding: 0;
  10.             margin: 0;
  11.             list-style: none;
  12.             text-decoration: none;
  13.         }
  14.         body{
  15.             background: #efefef;
  16.         }
  17.         /*时间轴样式*/
  18.         .heatMapTimer {
  19.             position: absolute;
  20.             width: 100%;
  21.             z-index: 1;
  22.             text-align: center;
  23.             top: 40px;
  24.         }
  25.         .time-item{
  26.             width: 46px;
  27.             height: 26px;
  28.             margin: 0px;
  29.         }
  30.         .time-bgline{
  31.             position:absolute;
  32.             width: 46px;
  33.             height: 10px;
  34.             margin: 15px 0px 15px 0px;
  35.             z-index: -1;
  36.         }
  37.         .time-bgnoline{
  38.             position:absolute;
  39.             width: 46px;
  40.             height: 10px;
  41.             margin: 15px 0px 15px 0px;
  42.             background-color: rgba(255,255,255,.4);
  43.             z-index: -1;
  44.         }
  45.         .time-bgline.spActiveW{
  46.             width: 34px;
  47.         }
  48.         .time-bgline.spActiveC{
  49.             background-color: #ECD572;
  50.         }
  51.         .time-btn {
  52.             border-radius: 50%;
  53.             width: 40px;
  54.             height: 40px;
  55.             font-size: 23px;
  56.             margin-right: 10px;
  57.         }
  58.         .time-item {
  59.             display: inline-block;
  60.             cursor: pointer;
  61.         }
  62.         .time-btn {
  63.             display: inline-block;
  64.             background: rgba(255,255,255,.6);
  65.             cursor: pointer;
  66.         }
  67.          /*进度条时间点选中样式*/
  68.         .time-item.active:before{
  69.             display: inline-block;
  70.             content: '';
  71.             width: 10px;
  72.             height: 10px;
  73.             border-radius: 50%;
  74.             background: #ECD572;
  75.             border:8px solid rgba(255,255,255);
  76.             text-align: center;
  77.         }
  78.         .time-txt-item {
  79.             margin: 0;
  80.             width: 46px;
  81.             height: 25px;
  82.             color: rgba(147,148,168);
  83.         }
  84.         .time-txt-item.active {
  85.             color: rgba(255,255,255);
  86.         }
  87.         .time-txt-btn {
  88.             width: 40px;
  89.             height: 25px;
  90.             color: rgba(255,255,255);
  91.             margin-right: 10px;
  92.         }
  93.         .time-txt-item, .time-txt-btn {
  94.             display: inline-block;
  95.         }
  96.          /*播放样式*/
  97.         .time-play:before{
  98.             display: inline-block;
  99.             content: '';
  100.             border-top: 12px solid transparent;
  101.             border-left: 12px solid #ECD572;
  102.             border-bottom: 12px solid transparent;
  103.             width: 0;
  104.             height: 0;
  105.             text-align: center;
  106.             margin: 8px auto 0 4px;
  107.         }
  108.          /*暂停的样式*/
  109.         .time-pause:before,.time-pause:after{
  110.             content: ' ';
  111.             border-radius: 3px;
  112.             border-top:6px solid #ECD572;
  113.             border-bottom:6px solid #ECD572;
  114.             border-left: 3px solid #ECD572;
  115.             border-right:3px solid #ECD572;
  116.             margin: 8px 3px 0px 3px;
  117.             overflow: hidden;
  118.             display: inline-block;
  119.             height: 12px;
  120.         }
  121.   </style>
  122.  </head>
  123.  <body>
  124.     <div class="heatMapTimer">
  125.         <ul class="time-line">
  126.             <li class="time-btn time-play"></li>
  127.         </ul>
  128.         <ul class="time-txt-line">
  129.             <li class="time-txt-btn">时间</li>
  130.         </ul>
  131.     </div>
  132.   <script>
  133.     addTimeTitle();//为时间轴的li标签动态添加title属性(本篇默认加的是最近十二个小时的时间阶段，可根据自己的需要选择是否引用)
  134.  
  135.     function timeClick() {
  136.         var timer,
  137.             index,//定义li选中状态时的索引
  138.             $timeUl=$(".time-line"),
  139.             $timeLi=$(".time-line li"),
  140.             $timeSpan=$(".time-line span"),
  141.             $timeTxtLi=$(".time-txt-line li");
  142.         var lenCount=$timeLi.length-1;//去除第一个按钮li标签的长度
  143.         $(".time-btn").removeClass("time-pause");
  144.         if (!$('.time-btn').hasClass('.time-play')){
  145.             $('.time-btn').addClass("time-play");
  146.         }
  147.         //点击播放时间轴事件
  148.         $timeUl.on("click",".time-play",function () {
  149.             $(this).removeClass("time-play").addClass("time-pause");
  150.             index=Number($timeUl.find("li.active").last().data("index"));//将字符串强制转换为数字类型
  151.             clearInterval(timer);//清除定时器
  152.             timer=setInterval(function () {
  153.                 //判断当前索引的位置，如果在最后一位则从第一个时间点开始，反之则按顺序播放
  154.                 if(lenCount==index+1){
  155.                     $timeLi.eq(1).addClass("active").siblings().removeClass("active");
  156.                     $timeSpan.eq(0).addClass("spActiveC").siblings().removeClass("spActiveC");
  157.                     $timeSpan.eq(0).addClass("spActiveW").siblings().removeClass("spActiveW");
  158.                     $timeTxtLi.eq(1).addClass("active").siblings().removeClass("active");
  159.                 }else{
  160.                     $timeLi.eq(index+2).addClass("active").siblings().removeClass("active");
  161.                     $timeSpan.eq(index+1).addClass("spActiveC");
  162.                     if(index==lenCount-2){
  163.                         $timeSpan.eq(index+1).removeClass("spActiveW").siblings().removeClass("spActiveW");
  164.                     }
  165.                     else{
  166.                         $timeSpan.eq(index+1).addClass("spActiveW").siblings().removeClass("spActiveW");
  167.                     }
  168.                     $timeTxtLi.eq(index+2).addClass("active").siblings().removeClass("active");
  169.                 }
  170.                 index=Number($timeUl.find("li.active").last().data("index"));//字符串转换为数字类型，索引从0开始
  171.             },2000)
  172.         });
  173.         //点击暂停按钮事件
  174.         $(".time-line").on("click",".time-pause",function () {
  175.             $(this).removeClass("time-pause").addClass("time-play");
  176.             clearInterval(timer);//清除定时器
  177.         });
  178.         //点击某个时间点时触发事件
  179.         $timeLi.not(":first-child").click(function () {
  180.             //停止自动播放
  181.             $(".time-btn").removeClass("time-pause").addClass("time-play");
  182.             clearInterval(timer);//清除定时器
  183.             //播放进度更新
  184.             index=$(this).data("index");
  185.             $(this).addClass("active").siblings().removeClass("active");
  186.             $timeLi.each(function (i) {
  187.                 if(i<=index){
  188.                     $timeSpan.eq(i).addClass("spActiveC");
  189.                 }
  190.                 else{
  191.                     $timeSpan.eq(i).removeClass("spActiveC");
  192.                 }
  193.             });
  194.             if(index==lenCount-1){
  195.                 $timeSpan.eq(index).removeClass("spActiveW").siblings().removeClass("spActiveW");
  196.             }
  197.             else{
  198.                 $timeSpan.eq(index).addClass("spActiveW").siblings().removeClass("spActiveW");
  199.             }
  200.             $timeTxtLi.eq(index+1).addClass("active").siblings().removeClass("active");
  201.         })
  202.     }
  203.     function addTimeTitle() {
  204.         var date=[];
  205.         for(var i=12;i>=1;i--){
  206.             date.push({index:i,time:getFormatDate(i)});
  207.         }
  208.         //数组排序
  209.         date= date.sort(function(a,b) {
  210.             return a.index> b.index?-1:1;
  211.         });
  212.         $.each(date,function (index,item) {
  213.             //创建进度条
  214.             var li_str = '<lable class="time-bgnoline"></lable><span class="time-bgline" ></span><li class="time-item" data-index="'+ index +'" title="'+item.time+'"></li>';
  215.             if(index===0){
  216.                 li_str = '<lable class="time-bgnoline" style="border-top-left-radius:5px;border-bottom-left-radius:5px;"></lable><span class="time-bgline spActiveW spActiveC" style="border-top-left-radius:5px;border-bottom-left-radius:5px;"></span><li class="time-item active" data-index="'+ index +'" title="'+item.time+'"></li>';
  217.             }
  218.             if(index===date.length-1){
  219.                 li_str = '<lable class="time-bgnoline" style="border-top-right-radius:5px;border-bottom-right-radius:5px;"></lable><span class="time-bgline" style="border-top-right-radius: 5px;border-bottom-right-radius: 5px;"></span><li class="time-item" data-index="'+ index +'" title="'+item.time+'"></li>';
  220.             }
  221.             $('.time-line').append(li_str);
  222.             //添加时间
  223.             var li_txt_str = '<li class="time-txt-item" data-index="'+ index +'">'+item.time+'</li>';
  224.             if(index===0){
  225.                 li_txt_str = '<li class="time-txt-item active" data-index="'+ index +'">'+item.time+'</li>';
  226.             }
  227.             $('.time-txt-line').append(li_txt_str);
  228.         });
  229.  
  230.         timeClick();//时间轴点击事件
  231.     }
  232.     //获取系统时间的最近十二个小时
  233.     function getFormatDate(hourCount){
  234.         var now=new Date();
  235.         var date=new Date(new Date(now.getTime() - hourCount * 600 * 1000));
  236.         var year=date.getFullYear();
  237.         var month=date.getMonth()+1;
  238.         month=(month<=9)?"0"+month:month;
  239.         var day=date.getDate();
  240.         day=(day<=9)?"0"+day:day;
  241.         var hour=date.getHours();
  242.         hour=(hour<=9)?"0"+hour:hour;
  243.         var minute=date.getMinutes();
  244.         minute=(minute<=9)?"0"+minute:minute;
  245.         //var dateTime=year+"-"+month+"-"+day +" "+hour+":00:00";
  246.         var dateTime=hour+":"+minute;
  247.         return dateTime;
  248.     }
  249.   </script>
  250.  </body>
  251. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/130270
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号