1、视频播放器全屏

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         *{
  9.             margin: 0px;
  10.             padding: 0px;
  11.         }
  12.        .video_player{
  13.         position: relative;
  14.         width: 1000px;
  15.         height: 500px;
  16.         margin: 0px auto;
  17.        }
  18.        video{
  19.         position: absolute;
  20.         width: 1000px;
  21.         height: 500px;
  22.         left: 0px;
  23.         top: 0px;
  24.        }
  25.        .menu{
  26.            position: absolute;
  27.            width: 100%;
  28.            height: 50px;
  29.            background-color: rgba(0,0,0,0.5);
  30.            bottom: 0px;
  31.            display: none;
  32.        }
  33.        .play{
  34.            position: absolute;
  35.            width: 60px;
  36.            height: 30px;
  37.            border: 1px solid white;
  38.            text-align: center;
  39.            line-height: 30px;
  40.            color: white;
  41.            border-radius: 10px;
  42.            margin-left: 20px;
  43.            top: 50%;
  44.            margin-top: -15px;
  45.            cursor: pointer;
  46.        }
  47.        .time{
  48.            position: absolute;
  49.            width: 100px;
  50.            height: 30px;
  51.            text-align: center;
  52.            line-height: 30px;
  53.            color: white;
  54.            border-radius: 10px;
  55.            margin-left: 120px;
  56.            top: 50%;
  57.            margin-top: -15px;
  58.            cursor: pointer;
  59.        }
  60.        .progress_bar{
  61.            position: absolute;
  62.            width: 100%;
  63.            height: 2px;
  64.            background: grey;
  65.            left: 0px;
  66.            top: -2px;
  67.        }
  68.        .progress_bar div{
  69.            position: absolute;
  70.            width: 0px;
  71.            height: 2px;
  72.            background: orange;
  73.            left: 0px;
  74.            top: 0px;
  75.        }
  76.        .progress_bar i{
  77.            position: absolute;
  78.            width: 6px;
  79.            height: 6px;
  80.            border-radius: 3px;
  81.            background: white;
  82.            left: 120px;
  83.            top: -2px;
  84.        }
  85.        .quick{
  86.            position: absolute;
  87.            width: 60px;
  88.            height: 30px;
  89.            border: 1px solid white;
  90.            text-align: center;
  91.            line-height: 30px;
  92.            color: white;
  93.            border-radius: 10px;
  94.            left: 400px;
  95.            top: 50%;
  96.            margin-top: -15px;
  97.            cursor: pointer;
  98.        }
  99.        .quick_list{
  100.            position: absolute;
  101.            width: 100px;
  102.            height: 120px;
  103.            background-color: rgba(0,0,0,0.5);
  104.            left: 400px;
  105.            top: -120px;
  106.            color: white;
  107.            display: none;
  108.        }
  109.        .quick_list li{
  110.            position: relative;
  111.            width: 100%;
  112.            height: 30px;
  113.            text-align: center;
  114.            line-height: 30px;
  115.            list-style: none;
  116.            cursor: pointer;
  117.        }
  118.        .quick_list li:hover{
  119.            color: green;
  120.        }
  121.        .vol_add{
  122.            position: absolute;
  123.            width: 60px;
  124.            height: 30px;
  125.            border: 1px solid white;
  126.            text-align: center;
  127.            line-height: 30px;
  128.            color: white;
  129.            border-radius: 10px;
  130.            left: 500px;
  131.            top: 50%;
  132.            margin-top: -15px;
  133.            cursor: pointer;
  134.        }
  135.        .vol_ins{
  136.            position: absolute;
  137.            width: 60px;
  138.            height: 30px;
  139.            border: 1px solid white;
  140.            text-align: center;
  141.            line-height: 30px;
  142.            color: white;
  143.            border-radius: 10px;
  144.            left: 580px;
  145.            top: 50%;
  146.            margin-top: -15px;
  147.            cursor: pointer;
  148.        }
  149.        .full_screen{
  150.            position: absolute;
  151.            width: 60px;
  152.            height: 30px;
  153.            border: 1px solid white;
  154.            text-align: center;
  155.            line-height: 30px;
  156.            color: white;
  157.            border-radius: 10px;
  158.            left: 680px;
  159.            top: 50%;
  160.            margin-top: -15px;
  161.            cursor: pointer;
  162.        }
  163.     </style>
  164. </head>
  166. <body>
  167.     <div class="video_player">
  168.     <!--video与audio是一样的，只比audio多一个视频，方法都一样  -->
  169.     <video src="体育视频.mp4" controls></video><!-- 加controls才能有播放栏 -->
  170.     <div class="menu">
  171.         <div class="play">播放</div>
  172.         <div class="time">0：00/0：00</div>
  173.         <div class="progress_bar">
  174.             <div></div>
  175.             <i></i>
  176.         </div>
  177.         <div class="quick">倍速</div>
  178.         <div class="quick_list">
  179.             <ul>
  180.                 <li>正常</li>
  181.                 <li>X1.25</li>
  182.                 <li>X1.5</li>
  183.                 <li>X2</li>
  184.             </ul>
  185.         </div>
  186.         <div class="vol_add">音量加</div>
  187.         <div class="vol_ins">音量减</div>
  188.         <div class="full_screen">全屏</div>
  189.     </div>
  190.     </div>
  192.     <script>
  193.         var videoPlayer = document.getElementsByClassName("video_player")[0];
  194.         var video = videoPlayer.getElementsByTagName("video")[0];
  195.         var menu = document.getElementsByClassName('menu')[0];
  196.         var play = document.getElementsByClassName("play")[0];
  197.         var time = document.getElementsByClassName("time")[0];
  198.         var quick = document.getElementsByClassName("quick")[0];
  199.         var quickList = document.getElementsByClassName("quick_list")[0];
  200.         var progress_bar = document.getElementsByClassName("progress_bar")[0];
  201.         var vol_add = document.getElementsByClassName("vol_add")[0];
  202.         var vol_ins = document.getElementsByClassName("vol_ins")[0];
  203.         var fullScreen = document.getElementsByClassName("full_screen")[0];
  206.         videoPlayer.onmouseenter = function() {
  207.             menu.style.display = "block";
  208.         }
  209.         videoPlayer.onmouseleave = function(){
  210.             menu.style.display = "none";
  211.         }
  212.         play.onclick = function(){
  213.            if(video.paused){
  214.             video.play();
  215.             play.innerHTML = "暂停";
  216.            }else{
  217.                video.pause();
  218.                play.innerHTML = "播放";
  219.            }
  220.         }
  221.         progress_bar.onmouseenter = function(){
  222.             progress_bar.style.height = "14px";
  223.             progress_bar.style.top = "-14px";
  224.             progress_bar.getElementsByTagName("div")[0].style.height = "14px";
  225.             progress_bar.getElementsByTagName("i")[0].style.height = "18px";
  227.         }
  228.         progress_bar.onmouseleave = function() {
  229.             progress_bar.style.height = "2px";
  230.             progress_bar.style.top = "-2px";
  231.             progress_bar.getElementsByTagName("div")[0].style.height = "2px";
  232.             progress_bar.getElementsByTagName("i")[0].style.height = "6px";
  234.         }
  235.         progress_bar.onclick = function(e){
  236.             var location = e.layerX;
  237.             var width = progress_bar.clientWidth;
  238.             var targetTime = location / width * video.duration;
  239.             video.currentTime = targetTime;
  240.         }
  242.         quick.onclick=function(){
  243.             quickList.style.display = "block";
  244.         }
  245.         quickList.onmouseleave = function(){
  246.             quickList.style.display = "none";
  247.         }
  248.         var liList = quickList.getElementsByTagName("ul")[0].getElementsByTagName("li");
  249.         for(var i = 0;i < liList.length;i++){
  250.             liList[i].index = i;
  251.             liList[i].onclick = function () {
  252.                 if(this.index == 0) {//正常
  253.                     video.playbackRate = 1;
  254.                     quick.innerHTML = "倍速"
  255.                 }else if(this.index == 1){//1.25
  256.                     video.playbackRate = 1.25;
  257.                     quick.innerHTML = "x1.25";
  258.                 }else if(this.index == 2){//1.5
  259.                     video.playbackRate = 1.5;
  260.                     quick.innerHTML = "x1.5";
  261.                 }else{//2
  262.                     video.playbackRate = 2;
  263.                     quick.innerHTML = "x2";
  264.                 }
  265.         }
  267.         //音量加音量减
  268.         vol_add.onclick = function(){
  269.             //三目运算符
  270.             video.volume = video.volume + 0.1 >= 1 ? 1: video.volume + 0.1;
  271.         }
  272.         vol_ins.onclick = function(){
  273.             //三目运算符
  274.             video.volume = video.volume - 0.1 <= 0 ? 0: video.volume - 0.1;
  275.         }
  277.         fullScreen.onclick = function () {
  278.             var dom = document.documentElement;
  279.             dom.requestFullscreen();
  280.             // 不能用100%，注意：
  281.             videoPlayer.style.width = window.screen.width + "px";
  282.             videoPlayer.style.height = window.screen.height + "px";
  283.             video.style.width = document.body.clientWidth + "px";
  284.             video.style.height = document.body.clientHeight +"px";
  286.         }
  288.         setInterval(function(){
  289.             var total = video.duration;//一共的时间
  290.             var nowtime = video.currentTime;//当前的时间
  291.             time.innerHTML = parseInt(nowtime / 60) + ":" + parseInt(nowtime % 60) + "/" + parseInt(total / 60) + ":" + parseInt(total % 60) ;
  293.             var width = nowtime / total * progress_bar.clientWidth;//进度条慢慢变成橙色
  294.             progress_bar.getElementsByTagName("div")[0].style.width = width + "px";
  295.             progress_bar.getElementsByTagName("i")[0].style.left = width + "px";
  296.             //Content-Range:只有http协议中带有这个属性，视频时间才能跳转
  297.         },1000)
  298.     }
  299.     </script>
  300. </body>
  302. </html>