视频播放器-html代码

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="Keywords" content="关键词">
  <meta name="Description" content="描述">
  <title>Document</title>
  <style>/*css样式表的衣柜*/
  *{/*通用选择器:选择到所有的标签*/
   margin:0px;/*外边距:上下左右外边距都为0*/padding:0px;/*内边距*/
  }
  #video{/*# id选择器*/
   width:693px;/*宽度*/height:430px;/*高度*/
   background:red url("images/vid.jpg");/*背景颜色*/
   background-size:100% 100%;/*背景尺寸*/
   margin:50px auto;/*上下为50px 左右居中*/
   padding-top:10px;/*上内边距:消除外边距合并问题*/
  }
  .content{/*. class选择器*/
   width:658px;height:370px;

   margin-left:17px;/*左外边距*/
   margin-top:3px;
   overflow:hidden;/*超出隐藏*/
   position:relative;/*相对定位:参考物*/
  }
  .controls{
   width:658px;height:65px;
   background:blue;
   position:absolute;/*绝对定位*/
   left:0px;/*距离参考物左端的距离*/
   /*top:0px;距离参考物上端的距离*/
   bottom:-43px;/*距离参考物下端的距离*/
   transition:1s;/*css3动画过渡:1s之内实现动画*/
  }
  .controls:hover{/*鼠标移上去实现什么效果*/
   bottom:0px;
  }
  .progress{
   width:480px;height:12px;background:#fff;
   margin:auto;
  }
  .icon{
   width:380px;height:48px;
   margin:auto;
   margin-top:10px;
  }
  .icon div{/*选择到icon下面的所有div统一设置宽高等样式*/
   width:33px;height:33px;
   background:url("images/1.jpg");
   float:left;/*浮动:与父元素左端对齐依次往右端显示*/
   margin-right:20px;
   border-radius:50%;/*圆角属性:圆形*/
  }
  .icon div.pre{
   background-position:-110px -8px;/*背景图片定位:向左移动110px 向上移动8px */
  }
  .icon div.play{
   background-position:-70px -8px;/*背景定位:左右偏移上下偏移*/
  }
  .icon div.next{
   background-position:-153px -8px;
  }
  .icon div.vol{
   background-position:-153px -66px;
  }
  .icon div.full{
   background:url("images/qp.png");
   width:34px;height:34px;
  }
  </style>
</head>
<body>
  
  <div id="video">
   <div class="content">
    <video src="videos/1.mp4" id="myVideo" width="660" height="430" poster="images/2.jpg"></video>
    <div class="controls">
     <div class="progress"></div>
     <div class="icon">
      <div class="pre"></div>
      <div class="play"></div>
      <div class="next"></div>
      <div class="vol"></div>
      <div class="full"></div>
     </div>
    </div>
   </div>
  </div>
  
  <script>
   var myVideo = document.getElementById("myVideo");
   var play = document.getElementsByClassName('play')[0];//获取到play这个按钮
   var pre = document.getElementsByClassName('pre')[0];//获取到class类名的数组
   var next = document.getElementsByClassName('next')[0];
   var full = document.getElementsByClassName('full')[0];
   //一个按钮要能实现两个点击功能需要做一个标记
   var mark = true;
   play.onclick = function(){//给播放按钮绑定点击事件
    if (mark)
    {
     myVideo.play();//播放视频
     mark = false;
     this.style.backgroundPosition = "-28px -66px";
    }else{
     myVideo.pause();//暂停视频
     mark = true;
     this.style.backgroundPosition = "-70px -8px";
    }

   }
   var n = 1;
   pre.onclick = function(){//播放上一个
    n--;//n = n-1
    if (n<1)
    {
     n = 5;
    }
    playVideo();
   }
   next.onclick = function(){//播放下一个
    n++;//n = n+1
    if (n > 5)
    {
     n = 1;
    }
    playVideo();
   }
   //优化代码
   function playVideo(){
    myVideo.src = "videos/"+n+".mp4";//更换视频路劲
    myVideo.play();
    mark = false;
    this.style.backgroundPosition = "-28px -66px";
   }

   //点击按钮全屏播放
   function fullScreen(){
    myVideo.webkitRequestFullScreen();//全屏
   }
   var i = 0;
   myVideo.onclick = function(){
    i++;
    console.log(i);
    if (i==2)//点击两次全屏
    {
     fullScreen();
     i = 0;
    }

   }
   full.onclick = function(){//点击全屏按钮实现全屏
    fullScreen();
   }
  </script>
</body>
</html>

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。