普歌-非常详细，详解html中的video视频标签（自制播放、时间、进度条、速度、全屏），实现自己的播放控件

实现自定义video播放视频控件，详解video中JS的api

最后的效果（还有控制音量，开关声音，因为赶时间，没做上，会在本篇文章中说，怎么控制）

先上基础知识

• video的标签属性

属性	值	功能描述
controls	controls	是否显示播放控件
autoplay	autoplay	设置是否打开浏览器后自动播放
width	Pilex（像素）	设置播放器的宽度
height	Pilex（像素）	设置播放器的高度
loop	loop	设置视频是否循环播放（即播放完后继续重新播放）
preload	preload	设置是否等加载完再播放
src	url	设置要播放视频的url地址
poster	imgurl	设置播放器初始默认显示图片
autobuffer	autobuffer	设置为浏览器缓冲方式，不设置autoply才有效

• video的API属性

API属性	事件说明
duration	返回媒体的播放总时长，单位秒
loop	是否循环播放
muted	是否静音
paused	是否暂停
currentTime	当前播放时间（单位：秒）
volume	音量值
networkState	返回当前网络状态
playbackRate	播放的倍速(加速、减速播放)
src	当前视频源的URL
ended	返回当前播放是否结束标志
error	返回当前播放的错误状态
initialTime	返回初始播放的位置
mediaGroup	当前音视频所属媒体组 (用来链接多个音视频标签)
played	当前播放部件已经播放的时间范围(TimeRanges对象)
preload	页面加载时是否同时加载音视频
readyState	返回当前的准备状态
seekable	返回当前可跳转部件的时间范围(TimeRanges对象)
audioTracks	返回可用的音轨列表（MultipleTrackList对象）
autoplay	媒体加载后自动播放
buffered	返回缓冲部件的时间范围(TimeRanges对象)
controller	返回当前的媒体控制器（MediaController对象）
controls	显示播控控件
crossOrigin	CORS设置
currentSrc	返回当前媒体的URL
defaultMuted	缺省是否静音
defaultPlaybackRate	播控的缺省倍速
seeking	返回用户是否做了跳转操作
startOffsetTime	返回当前的时间偏移(Date对象)
textTracks	返回可用的文本轨迹(TextTrackList对象)
videoTracks	返回可用的视频轨迹(VideoTrackList对象)

• 对于api的演示

/* 暂停 */
video.play(); 

/* 播放 */
video.pause(); 
/* 音量控制 */
    var video = document.getElementById('_volume')
    video.volume = 2 // 取值范围：0 到 1，0 是静音，0.5 是一半的音量，1 是最大音量（默认值）

 /* 播放时间控制 */
    console.log(video.currentTime)  // 视频当前正在播放的时间（单位：s），进度条拖到哪就显示当前的时间
    video.currentTime = 60  // 默认从60秒处开始播放

 /* 播放地址切换 （常见于切换超清  高清 流畅，不同画质的视频地址不同） */
    console.log(video.src)     // http://127.0.0.1:8001/test.mp4   绝对地址，DOM 中是相对地址
    // video.src = 'test-2.mp4'   // 直接替换掉了原来的视频src
    setTimeout(() => {
      video.src = 'test-2.mp4'  // 播放到第 30s 的时候，自动切换视频
    }, 30000)

事件触发

// 1、loadstart：视频查找。当浏览器开始寻找指定的音频/视频时触发，也就是当加载过程开始时
    video.addEventListener('loadstart', function(e) {
      console.log('提示视频的元数据已加载')
      console.log(e)
      console.log(video.duration)            // NaN
    })

    // 2、durationchange：时长变化。当指定的音频/视频的时长数据发生变化时触发，加载后，时长由 NaN 变为音频/视频的实际时长
    video.addEventListener('durationchange', function(e) {
      console.log('提示视频的时长已改变')
      console.log(e)
      console.log(video.duration)           // 528.981333   视频的实际时长（单位：秒）
    })

    // 3、loadedmetadata ：元数据加载。当指定的音频/视频的元数据已加载时触发，元数据包括：时长、尺寸（仅视频）以及文本轨道
    video.addEventListener('loadedmetadata', function(e) {
      console.log('提示视频的元数据已加载')
      console.log(e)
    })

    // 4、loadeddata：视频下载监听。当当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧时触发
    video.addEventListener('loadeddata', function(e) {
      console.log('提示当前帧的数据是可用的')
      console.log(e)
    })

    // 5、progress：浏览器下载监听。当浏览器正在下载指定的音频/视频时触发
    video.addEventListener('progress', function(e) {
      console.log('提示视频正在下载中')
      console.log(e)
    })

    // 6、canplay：可播放监听。当浏览器能够开始播放指定的音频/视频时触发
    video.addEventListener('canplay', function(e) {
      console.log('提示该视频已准备好开始播放')
      console.log(e)
    })

    // 7、canplaythrough：可流畅播放。当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时触发
    video.addEventListener('canplaythrough', function(e) {
      console.log('提示视频能够不停顿地一直播放')
      console.log(e)
    })

    // 8、play：播放监听
    video.addEventListener('play', function(e) {
      console.log('提示该视频正在播放中')
      console.log(e)
    })

    // 9、pause：暂停监听
    video.addEventListener('pause', function(e) {
      console.log('暂停播放')
      console.log(e)
    })

    // 10、seeking：查找开始。当用户开始移动/跳跃到音频/视频中新的位置时触发
    video.addEventListener('seeking', function(e) {
      console.log('开始移动进度条')
      console.log(e)
    })

    // 11、seeked：查找结束。当用户已经移动/跳跃到视频中新的位置时触发
    video.addEventListener('seeked', function(e) {
      console.log('进度条已经移动到了新的位置')
      console.log(e)
    })

    // 12、waiting：视频加载等待。当视频由于需要缓冲下一帧而停止，等待时触发
    video.addEventListener('waiting', function(e) {
      console.log('视频加载等待')
      console.log(e)
    })

    // 13、playing：当视频在已因缓冲而暂停或停止后已就绪时触发
    video.addEventListener('playing', function(e) {
      console.log('playing')
      console.log(e)
    })

    // 14、timeupdate：目前的播放位置已更改时，播放时间更新
    video.addEventListener('timeupdate', function(e) {
      console.log('timeupdate')
      console.log(e)
    })

    // 15、ended：播放结束
    video.addEventListener('ended', function(e) {
      console.log('视频播放完了')
      console.log(e)
    })

    // 16、error：播放错误
    video.addEventListener('error', function(e) {
      console.log('视频出错了')
      console.log(e)
    })

    // 17、volumechange：当音量更改时
    video.addEventListener('volumechange', function(e) {
      console.log('volumechange')
      console.log(e)
    })

    // 18、stalled：当浏览器尝试获取媒体数据，但数据不可用时
    video.addEventListener('stalled', function(e) {
      console.log('stalled')
      console.log(e)
    })

    // 19、ratechange：当视频的播放速度已更改时
    video.addEventListener('ratechange', function(e) {
      console.log('ratechange')
      console.log(e)
    })

demo代码，自制一个网站简单的播放控件

温馨提示
实现需要用到jQuery，svg标签是iconfont图标(矢量图标)

---

HTML代码

<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>播放title>
    
    <link rel="icon" href="../images/favicon.ico" />
    
    <link rel="stylesheet" href="../css/reset.css" />
    
    <link rel="stylesheet" href="../css/videoPlay/videoPlay.css" />
    <script src="../js/iconfont.js">script>
  head>
  <body class="videoBody">
  
    <div class="videoBack">
      <div class="back">
        <div class="clickback">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-fanhuishangyiye">use>
          svg>
          返回
        div>
        <div class="tit">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-arrow-right">use>
          svg>
        div>
      div>
    div>
    
    <div class="player">
      <video id="myVideo" src="../images/videoPlay.mp4">video>
      <div class="controls">
        
        <a href="javascript:;" class="switch fa fa-play">
         
          <svg class="icon zanting" aria-hidden="true">
            <use xlink:href="#icon-bofang1">use>
          svg>
           
          <svg class="icon bofang" aria-hidden="true" style="display: none">
            <use xlink:href="#icon-bofang2">use>
          svg>
        a>
        <div class="times">
          <span class="current">00:00:00span>/
          <span class="totalTime">00:00:00span>
        div>
        <a href="javascript:;" class="expend fa fa-expand">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-quanping">use>
          svg>
        a>
        <div class="progress">
          <div class="line">div>
          <div class="bar">div>
        div>
        <select id="select">
          <option value="0.5">0.5xoption>
          <option value="1" selected>1.0xoption>
          <option value="1.25">1.25xoption>
          <option value="1.5">1.5xoption>
          <option value="2">2.0xoption>
        select>
      div>
    div>
    <script src="../js/jquery.min.js">script>
    <script src="../js/videoPlay.js">script>
  body>
html>

videoPlay.js

$(function () {
  //计算视频的高度
  var videoHeight = $(".player").height() - $(".controls").height();
  var bodyWidth = window.innerWidth;
  console.log(bodyWidth);
  $("video").css("height", videoHeight + "px");
  $(".videoBody").css("minWidth", bodyWidth + "px");
  console.log($("body").css("minWidth"));
  //返回上一级
  $(".videoBack .clickback").click(function () {
    window.history.back(1);
  });

  //获取视频对象 H5写法
  var myVideo = document.querySelector("#myVideo");

  //播放或暂停
  document.querySelector(".switch").addEventListener("click", function () {
    //判断当前视频是否暂停
    if (myVideo.paused) {
      $(".zanting").css("display", "none");
      myVideo.play(); //播放
      $(".bofang").css("display", "block");
    } else {
      $(".zanting").css("display", "block");
      $(".bofang").css("display", "none");

      myVideo.pause(); //暂停
    }
  });

  //更改视频的速度
  var select = document.getElementById("select");
  // 改变播放速率
  select.addEventListener("change", function () {
    myVideo.playbackRate = this.value;
  });

  //全屏
  function goFullScreen() {
    element = document.getElementById("myVideo");
    if (element.requestFullscreen) {
      //w3c
      element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
      //moz Firefox
      element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) {
      //IE
      element.msRequestFullscreen();
    } else if (element.oRequestFullscreen) {
      //Opera
      element.oRequestFullscreen();
    } else if (element.webkitRequestFullscreen) {
      //webkit内核 Chrome Safari
      element.webkitRequestFullScreen();
    } else {
      var docHtml = document.documentElement;
      var docBody = document.body;
      var cssText = "width:100%;height:100%;overflow:hidden;";
      docHtml.style.cssText = cssText;
      docBody.style.cssText = cssText;
      element.style.cssText = cssText + ";" + "margin:0px;padding:0px;";
      document.IsFullScreen = true;
    }
  }
  //退出全屏
  function exitFullscreen() {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.oCancelFullScreen) {
      document.oCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else {
      var docHtml = document.documentElement;
      var docBody = document.body;
      var videobox = document.getElementById("videobox");
      docHtml.style.cssText = "";
      docBody.style.cssText = "";
      videobox.style.cssText = "";
      document.IsFullScreen = false;
    }
  }
  //判断是否全屏
  function isFullScreen() {
    return (
      document.fullscreen ||
      document.msFullscreenElement ||
      document.msFullscreenElement ||
      document.mozFullScreen ||
      document.oFullScreen ||
      document.webkitIsFullScreen
    );
  }

  //全屏和退出全屏
  $(".expend").on("click", function () {
    //切换样式
    $(".expend").toggleClass("fa-expand fa-compress");
    if (isFullScreen()) {
      exitFullscreen();
    } else {
      goFullScreen();
    }
  });

  //拖动进度时
  $(".bar").on("click", function (e) {
    var time = myVideo.duration * (e.offsetX / $(".bar").width());
    myVideo.currentTime = time;
  });

  //更新播放进度
  myVideo.addEventListener("timeupdate", function () {
    //更新进度条
    var pValue = (myVideo.currentTime / myVideo.duration) * 100;
    $(".line").css("width", pValue + "%");
    //显示当前播放进度的时间
    document.querySelector(".current").innerText = getTimeBySecond(
      myVideo.currentTime
    );
  });

  //播放结束时
  myVideo.addEventListener("ended", function () {
    //播放按钮类样式进行还原
    $(".switch").removeClass("fa-pause").addClass("fa-play");
    $(".line").css("width", 0);
    //设置当前播放时间
    myVideo.currentTime = 0;
    //视频播放状态为设置为停止
    myVideo.pause();
  });

  //当视频元数据加载时运行
  myVideo.addEventListener("loadedmetadata", function () {
    //设置总时长
    document.querySelector(".totalTime").innerText = getTimeBySecond(
      myVideo.duration
    );
  });

  //讲当前秒数转换为时间
  function getTimeBySecond(second) {
    var hour = parseInt(second / (60 * 60));
    var minute = parseInt((second / 60) % 60);
    var second = parseInt(second % 60);
    return (
      (hour < 10 ? "0" + hour : hour) +
      ":" +
      (minute < 10 ? "0" + minute : minute) +
      ":" +
      (second < 10 ? "0" + second : second)
    );
  }
});

videoPlay.css

body {
  background-color: #000;
  position: relative;
  max-height: 100vh;
  width: 100%;
  overflow: hidden;
}
.videoBack {
  position: fixed;
  top: 40%;
  transform: translateY(-40%);
  cursor: pointer;
  z-index: 999;
}
.videoBack .back {
  position: absolute;
  top: 0;
  left: -80px;
  display: flex;
  align-items: center;
  width: 120px;
  height: 80px;
  background-color: #1d1d1d;
  color: #cdcdcd;
  transition: all 0.3s;
}
.videoBack .back .clickback {
  display: flex;
  flex-direction: column;
  width: 80px;
  height: 80px;
  justify-content: center;
  align-items: center;
}
.videoBack .back .clickback svg {
  width: 30px;
  height: 30px;
}
.videoBack .back .tit {
  position: absolute;
  top: 0;
  left: 80px;
  z-index: 1;
  width: 40px;
  height: 80px;
  background-color: #1d1d1d;
  line-height: 80px;
  text-align: center;
}
.videoBack .back .tit svg {
  width: 20px;
  height: 20px;
}
.videoBack .back:hover {
  color: #fff;
  left: 0px;
}
a {
  text-decoration: none;
}
.player {
  height: 100vh;
  margin: 0 auto;
  background-color: #000;
  position: relative;
}
video {
  display: block;
  height: 100%;
  margin: 0 auto;
}
.controls {
  width: 100%;
  height: 40px;
  background-color: #1c192c;
  position: absolute;
  left: 0px;
  bottom: 0px;
  z-index: 100;
  border-radius: 4px;
}
.controls .switch {
  float: left;
  width: 20px;
  height: 20px;
  color: #fff;
  position: absolute;
  top: 11px;
  left: 11px;
}
.controls .expend {
  float: right;
  width: 20px;
  height: 20px;
  color: #fff;
  position: absolute;
  top: 11px;
  right: 11px;
}
.progress {
  width: 1100px;
  height: 10px;
  border-radius: 3px;
  background-color: #999;
  position: absolute;
  top: 15px;
  left: 234px;
}
.progress .line {
  width: 0;
  height: 100%;
  background-color: #f7f5f5;
  left: 0;
  top: 0;
  position: absolute;
}
.progress .bar {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.times {
  position: absolute;
  top: 11px;
  left: 55px;
  color: #fff;
  font-size: 14px;
}
#select {
  float: right;
  height: 20px;
  background: #1c192c;
  color: #fff;
  position: absolute;
  top: 11px;
  right: 55px;
  border: none;
}

到这就能实现开头图示的效果，如果需要添加控制音量和开关音量，看下面，需要自己再加到播放控件中

	<button onclick="closeVoice()">静音/取消静音button>
	<input type="range" id="volume" min="0" max="100" value="20" onchange="changeVolume(this)">

	//设置静音和取消静音
		function closeVoice(){
			myVideo.muted = !myVideo.muted;
		}
 
		//改变声音大小
		function changeVolume(obj){
			myVideo.volume = obj.value/100;
			console.log(myVideo.volume);
		}

完结撒花❀❀，觉得 有用的小伙伴感谢一键三连

参考文章：https://www.cnblogs.com/rogerwu/p/10072119.html

更多推荐：wantLG的《uni-app使用阿里iconfont多色图标》

---

• 作者：wantLG
• 本文源自：wantLG的《普歌-非常详细，详解html中的video视频标签（自制播放、时间、进度条、速度、全屏），实现自己的播放控件》
• 本文版权归作者和CSDN共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。