classs属性

poster
指定视频的占位图片
muted
视屏从一开始就静音播放
由于video元素咋各个浏览器中的样式都不一致，导致其一个浏览器一个样式，需要做样式统一，只用video播放时视频的的功能，其余功能全部自己制作；

方法属性事件

video.dur**ation
视频总时长，**以秒为单位
video.currentTi**me
视频现在播放的时长， 以秒为单位
video.play()
播放
video.pa**use()
暂停
video.current**Time = 跳转播放的位置
获取或设置跳转播放
用户单击进度条，实现跳转播放
video.playbac**kRate =倍速值
获取或设置几倍速播放
video.volum**e = 音量值
设置或获取音量
音量值为0 到 1 之间**

如何全屏播放

Element.requestFullscr**een()
是元素进入全屏模式
document.exitF**ullscreen()
是进入全屏模式的元素退出全屏模式
onfullscreenchan**ge
此事件当浏览器进入或退出全屏时触发

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video
https://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

demo

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         :root,
  10.         body {
  11.             height: 100%;
  12.         }
  14.         * {
  15.             margin: 0;
  16.             padding: 0;
  17.         }
  19.         ul,
  20.         li {
  21.             list-style: none;
  22.         }
  25.         .video-player {
  26.             width: 1000px;
  27.             height: 500px;
  28.             position: relative;
  29.             position: fixed;
  30.             left: calc(50% - 500px);
  31.             top: 10px;
  32.             background: rgba(0, 0, 0, .8);
  33.         }
  35.         .video {
  36.             width: 100%;
  37.             height: 100%;
  38.             position: absolute;
  39.             left: 0;
  40.             top: 0;
  41.         }
  43.         .menu {
  44.             width: 100%;
  45.             height: 50px;
  46.             position: absolute;
  47.             bottom: 0;
  48.             background: rgba(0, 0, 0, .5);
  49.             /* display: none; */
  50.         }
  52.         .btn {
  53.             width: 60px;
  54.             height: 30px;
  55.             line-height: 30px;
  56.             text-align: center;
  57.             color: #fff;
  58.             border-radius: 5px;
  59.             border: 1px solid #fff;
  60.             position: absolute;
  61.             top: calc(50% - 15px);
  62.             cursor: pointer;
  64.         }
  66.         .play {
  67.             margin-left: 20px;
  68.         }
  70.         .time {
  71.             width: 100px;
  72.             border: none;
  73.             margin-left: 120px;
  74.         }
  76.         .progress-bar {
  77.             width: 1000px;
  78.             height: 2px;
  79.             background: gray;
  80.             position: absolute;
  81.             left: 0;
  82.             top: -2px;
  83.         }
  85.         .progress-bar .progress-bar-iteam {
  86.             position: absolute;
  87.             width: 0px;
  88.             height: 2px;
  89.             left: 0;
  90.             top: 0;
  91.             background: white;
  92.         }
  94.         .progress-bar .arc {
  95.             position: absolute;
  96.             width: 6px;
  97.             height: 6px;
  98.             border-radius: 3px;
  99.             background: white;
  100.             left: 0px;
  101.             top: -2px;
  102.         }
  104.         .progress-bar:hover {
  105.             top: -14px;
  106.         }
  108.         .progress-bar:hover,
  109.         .progress-bar:hover .progress-bar-iteam {
  110.             height: 14px;
  111.         }
  113.         .progress-bar:hover .arc {
  114.             height: 18px;
  115.         }
  117.         .quick {
  118.             right: 100px;
  119.         }
  121.         .quick-list {
  122.             position: absolute;
  123.             width: 60px;
  124.             height: 120px;
  125.             background: rgba(0, 0, 0, .5);
  126.             right: 100px;
  127.             top: -120px;
  128.             display: none;
  129.             cursor: pointer;
  130.         }
  132.         .quick-list li {
  133.             height: 30px;
  134.             line-height: 30px;
  135.             width: 100%;
  136.             text-align: center;
  137.             color: #fff;
  138.         }
  140.         .full-screen {
  141.             right: 10px;
  142.         }
  144.         .volume {
  145.             right: 190px;
  146.         }
  148.         .volume-bar {
  149.             width: 32px;
  150.             height: 100px;
  151.             position: absolute;
  152.             right: 204px;
  153.             top: -100px;
  154.             background: rgba(0, 0, 0, .8);
  155.             display: none;
  156.         }
  158.         .volume-text {
  159.             width: 100%;
  160.             color: #e5e9ef;
  161.             font-size: 12px;
  162.             height: 28px;
  163.             line-height: 28px;
  164.             text-align: center;
  165.             margin-bottom: 2px;
  166.             outline: none;
  167.             user-select: none;
  168.         }
  170.         .volume-iteam {
  171.             width: 100%;
  172.             height: 60px;
  173.             cursor: pointer;
  174.             position: relative;
  175.         }
  177.         .volume-iteam-line-white {
  178.             width: 1px;
  179.             height: 60px;
  180.             background: #fff;
  181.             margin: 0 auto;
  182.             position: absolute;
  183.             left: calc(50% - 0.5px);
  184.             bottom: 0px;
  185.         }
  187.         .volume-iteam .volume-iteam-line {
  188.             width: 1px;
  189.             height: 30px;
  190.             background: #00a1d6;
  191.             position: absolute;
  192.             left: 0;
  193.             bottom: 0;
  194.         }
  196.         .volume-iteam .volume-arc {
  197.             width: 12px;
  198.             height: 12px;
  199.             background: #00a1d6;
  200.             border-radius: 50%;
  201.             position: absolute;
  202.             left: -6px;
  203.             bottom: 24px;
  204.             cursor: pointer;
  205.         }
  206.     </style>
  207. </head>
  209. <body>
  210.     <section class="video-player">
  211.         <video src="./1.mp4" class="video" poster="1.jpg"></video>
  212.         <div class="menu">
  213.             <div class="play btn">播放</div>
  214.             <div class="time btn">00:00</div>
  215.             <div class="progress-bar">
  216.                 <div class="progress-bar-iteam"></div>
  217.                 <i class="arc"></i>
  218.             </div>
  219.             <div class="quick btn">倍速</div>
  220.             <ul class="quick-list">
  221.                 <li>正常</li>
  222.                 <li>x1.25</li>
  223.                 <li>x1.5</li>
  224.                 <li>x2</li>
  225.             </ul>
  226.             <div class="volume btn">音量</div>
  227.             <div class="volume-bar">
  228.                 <p class="volume-text">100</p>
  229.                 <div class="volume-iteam">
  230.                     <div class="volume-iteam-line-white">
  231.                         <div class="volume-iteam-line"></div>
  232.                         <i class="volume-arc"></i>
  233.                     </div>
  235.                 </div>
  237.             </div>
  238.             <div class="full-screen btn">全屏</div>
  239.         </div>
  240.     </section>
  241.     <script>
  242.         var warp = document.getElementsByClassName('video-player')[0];
  243.         var video = document.getElementsByClassName('video')[0];
  244.         var menu = document.getElementsByClassName('menu')[0];
  245.         var play = document.getElementsByClassName('play')[0];
  246.         var time = document.getElementsByClassName('time')[0];
  247.         var progressBar = document.getElementsByClassName('progress-bar')[0];
  248.         var progressBarIteam = progressBar.getElementsByClassName("progress-bar-iteam")[0];
  249.         var arc = progressBar.getElementsByClassName('arc')[0];
  250.         var quick = document.getElementsByClassName('quick')[0];
  251.         var quickList = document.getElementsByClassName('quick-list')[0];
  252.         var liList = quickList.getElementsByTagName('li');
  253.         var fullScreen = document.getElementsByClassName('full-screen')[0];
  254.         var videoVolume = document.getElementsByClassName('volume')[0];
  255.         var volumeBar = document.getElementsByClassName('volume-bar')[0];
  256.         var volumeIteam = volumeBar.getElementsByClassName('volume-iteam')[0];
  257.         var volumeText = volumeBar.getElementsByClassName('volume-text')[0];
  258.         var volumeLine = volumeBar.getElementsByClassName('volume-iteam-line')[0];
  259.         var volumeLineWhite = volumeBar.getElementsByClassName('volume-iteam-line-white')[0]
  260.         var volumeArc = volumeBar.getElementsByClassName('volume-arc')[0];
  261.         var timer = null;
  262.         var twoClick = false;
  263.         var soundVolume = 0.5;
  264.         var onVolume = false;
  265.         var total = '';
  266.         var isFull = false;
  267.         var onVolume = false;
  268.         var warpIsShow = true;
  270.         // 控制音量
  271.         function volumeControl(num) {
  272.             var soundVolume = num / 60;
  273.             soundVolume > 1 ? soundVolume = 1 : soundVolume;
  274.             soundVolume < 0 ? soundVolume = 0 : soundVolume;
  275.             video.volume = soundVolume;
  276.             console.log(soundVolume)
  277.             var top = parseInt(num);
  278.             var text = parseInt(soundVolume * 100)
  279.             volumeText.innerHTML = text;
  280.             volumeArc.style.bottom = top - 6 + 'px';
  281.             volumeLine.style.height = top + 'px';
  283.         }
  284.         // 显示播放时间
  285.         function showTime() {
  286.             timer = setInterval(() => {
  287.                 total = video.duration;
  288.                 var nowTime = video.currentTime;
  290.                 var newtotal = (total / 60 < 10 ? "0" + parseInt(total / 60) : parseInt(total / 60)) + ":" + (
  291.                     total % 60 < 10 ? "0" + parseInt(total % 60) : parseInt(total % 60));
  293.                 var newTime = (nowTime / 60 < 10 ? "0" + parseInt(nowTime / 60) : parseInt(nowTime / 60)) +
  294.                     ":" + (nowTime % 60 < 10 ? "0" + parseInt(nowTime % 60) : parseInt(nowTime % 60));
  295.                 time.innerHTML = newTime + " / " + newtotal;
  296.                 var progressBarWidth = nowTime / total * progressBar.clientWidth;
  297.                 progressBarIteam.style.width = progressBarWidth + 'px';
  298.                 arc.style.left = progressBarWidth + 'px'
  301.             }, 100);
  302.         }
  304.         showTime()
  305.         // Content-Range: bytes 1966080-40909281/40909282 当在响应头有这个属性视频才能实现跳转播放
  306.         function bindEvent() {
  307.             warp.onmouseenter = function (e) {
  308.                 menu.style.display = 'block';
  309.             }
  310.             warp.onmouseleave = function (e) {
  311.                 menu.style.display = 'none'
  312.             }
  313.             // 用户移入进度条放大进度条
  314.             // progressBar.onmouseenter = function (e) {
  315.             //     this.style.top = "-2px";
  316.             //     this.style.height = "2px";
  317.             //     progressBarIteam.style.height = "2px";
  318.             //     arc.style.height = "6px";
  319.             // }
  320.             // progressBar.onmouseleave = function (e) {
  321.             //     this.style.top = "-14px";
  322.             //     this.style.height = "14px";
  323.             //     progressBarIteam.style.height = "14px";
  324.             //     arc.style.height = "18px";
  325.             // }
  326.             // 是否播放
  327.             play.onclick = function (e) {
  328.                 if (video.paused) {
  329.                     video.play()
  330.                     this.innerHTML = '暂停'
  331.                 } else {
  332.                     video.pause();
  333.                     this.innerHTML = "播放"
  334.                 }
  335.             }
  336.             // 视频跳转播放
  337.             progressBar.onclick = function (e) {
  338.                 var locationX = e.layerX;
  339.                 var tagetTime = locationX / progressBar.clientWidth * total;
  340.                 video.currentTime = tagetTime;
  341.             }
  342.             // 是否显示倍速选项菜单
  343.             quick.onclick = function (e) {
  344.                 if (!twoClick) {
  345.                     quickList.style.display = "block";
  346.                     twoClick = true;
  347.                 } else {
  348.                     quickList.style.display = 'none'
  349.                     twoClick = false;
  350.                 }
  351.             }
  352.             // 移出倍速选项菜单将其自身隐藏
  353.             quickList.onmouseleave = function (e) {
  354.                 this.style.display = 'none'
  355.                 twoClick = false;
  356.             }
  357.             // 倍速播放
  358.             for (var i = 0; i < liList.length; i++) {
  359.                 liList[i].index = i;
  360.                 liList[i].onclick = function (e) {
  361.                     if (this.index == 0) {
  362.                         video.playbackRate = 1
  363.                         quick.innerHTML = '正常'
  364.                         return;
  365.                     } else if (this.index == 1) {
  366.                         video.playbackRate = 1.25;
  367.                         quick.innerHTML = "x1.25"
  368.                         return;
  369.                     } else if (this.index == 2) {
  370.                         video.playbackRate = 1.5;
  371.                         quick.innerHTML = "x1.5"
  372.                         return;
  373.                     } else if (this.index == 3) {
  374.                         video.playbackRate = 2;
  375.                         quick.innerHTML = "x2"
  376.                         return;
  377.                     }
  378.                 }
  379.             }
  380.             // 是否全屏播放
  381.             fullScreen.onclick = function (e) {
  382.                 if (!isFull) {
  383.                     // 全屏播放
  384.                     warp.requestFullscreen();
  386.                 } else {
  387.                     // 退出全屏
  388.                     document.exitFullscreen()
  390.                 }
  391.             }
  392.             // 是否进入全屏或离开全屏
  393.             warp.onfullscreenchange = function () {
  394.                 if (isFull == false) {
  395.                     var disx = 0;
  396.                     var disy = 0;
  397.                     var tim = null;
  398.                     warpIsShow = false;
  399.                     // menu.style.display = "none";
  401.                     isFull = true;
  402.                 } else {
  403.                     isFull = false;
  404.                     clearInterval(tim)
  405.                     warpIsShow = true;
  406.                 }
  407.             }
  408.             // 是否显示调节音量的选项
  409.             videoVolume.onclick = function (e) {
  410.                 if (!onVolume) {
  411.                     volumeBar.style.display = 'block';
  412.                     onVolume = true;
  413.                 } else {
  414.                     volumeBar.style.display = 'none';
  415.                     onVolume = false;
  416.                 }
  417.             }
  418.             volumeBar.onmouseleave = function (e) {
  419.                 this.style.display = 'none';
  420.                 onVolume = false;
  421.             }
  422.             // 单击调节音量
  423.             volumeIteam.onclick = function (e) {
  424.                 if (e.target.className == 'volume-iteam') {
  425.                     var loadingY = this.clientHeight - e.layerY;
  426.                     volumeControl(loadingY)
  427.                     console.log(this.clientHeight - e.layerY)
  428.                 }
  430.             }
  431.             // 鼠标移动调节音量
  432.             volumeArc.onmousedown = function (e) {
  433.                 volumeIteam.onmousemove = function (e) {
  434.                     if (e.target.className !== 'volume-arc') {
  435.                         var loadingY = this.clientHeight - e.layerY;
  436.                         volumeControl(loadingY)
  437.                     }
  438.                     // console.log(e.target.className)
  440.                 }
  441.                 document.onmouseup = function () {
  442.                     volumeIteam.onmousemove = null;
  443.                 }
  444.             }
  445.         }
  446.         bindEvent()
  447.     </script>
  449. </body>
  451. </html>