自定义video的样式

最新推荐文章于 2024-07-29 08:18:41 发布

仙≮≯辶

最新推荐文章于 2024-07-29 08:18:41 发布

阅读量4.2k

点赞数 3

文章标签： javascript css3 html5 css html

本文链接：https://blog.csdn.net/weixin_43152938/article/details/105078848

版权

一般情况下，video的样式可以满足正常的需求了，但是有时候仍然会要求修改video的样式，下面就是记录一下自定义video样式的代码。
它可以实现进度的拖拽，音量的拖拽和静音，双击全屏功能的实现等

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义视频播放窗口样式</title>
  <link rel="stylesheet" href="video.css">
</head>

<body>

  <div id="video-box" class="video-box">
    <img id="bigPlay" src="./img/play.png" alt="paly">
    <video id="video" poster="./img/video.jpg">
      <source
        src="https://vdept.bdstatic.com/735177645a6831774c64756570504471/4367794451686962/09049a6b330aa16f02700f37be984c2761664a5c14810054428bd524c739ab477f35273991c20949a3336ba62a621ca7.mp4?auth_key=1585055265-0-0-e724df76927e42022a39674990bb326d"
        type="video/ogg">
      </source>
    </video>
    <div id="control">
      <div id="play" class="c-icon"></div>
      <div id="pause" class="c-icon"></div>
      <div id="progress">
        <div id="timeBar"></div>
      </div>
      <div id="time">
        <span id="currentTime">00:00</span>
        <span>/</span>
        <span id="duration">00:00</span>
      </div>
      <div id="sound" class="c-icon"></div>
      <div id="mute" class="c-icon"></div>
      <div id="soundBox">
        <div id="soundBar"></div>
      </div>
      <div id="fullScreen" class="c-icon"></div>
    </div>
  </div>

  <script src="./video.js"></script>

</body>

</html>

/* 视频播放窗口 */
.video-box{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: black;
}
/* 默认视频 */
video{
  width: 100%;
}
/* 视频播放控制 */
#control{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 40px;
  background-color: #1d1d1d;
}
#control div{
  cursor: pointer;
}
/* 图标 */
.c-icon{
  width: 24px;
  height: 24px;
  margin: 0 8px;
}
#play{
  background: url(./img/play.png) no-repeat;
  background-size: 100%;
}
#bigPlay{
  cursor: pointer;
  position: absolute;
  z-index: 999;
  width: 20%;
}
#pause{
  display: none;
  background: url(./img/pause.png) no-repeat;
  background-size: 100%;
}
#sound{
  background: url(./img/sound.png) no-repeat;
  background-size: 100%;
}
#mute{
  display: none;
  background: url(./img/mute.png) no-repeat;
  background-size: 100%;
}
#fullScreen{
  width: 18px;
  height: 18px;
  background: url(./img/fullScreen.png) no-repeat;
  background-size: 100%;
}
#time{
  margin-left: 8px;
  color: white;
}
#progress{
  overflow: hidden;
  flex-grow: 1;
  height: 10px;
  border-radius: 5px;
  background-color: #333333;
}
#timeBar{
  width: 0;
  height: 10px;
  background-color: tomato;
}
#soundBox{
  overflow: hidden;
  width: 100px;
  height: 10px;
  border-radius: 5px;
  background-color: #333333;
}
#soundBar{
  width: 0;
  height: 10px;
  background-color: tomato;
}
@media (max-width: 576px) {
  #soundBox{
    width: 70px;
  }
  #time{
    font-size: 14px;
  }
}
@media (max-width: 420px) {
  #control{
    height: 32px;
  }
  .c-icon{
    width: 18px;
    height: 18px;
    margin: 0 8px;
  }
  #fullScreen{
    width: 14px;
    height: 14px;
  }
  #time{
    font-size: 12px;
  }
  #soundBox{
    width: 50px;
  }
}

var v = {
  video: document.getElementById("video"), // video 标签
  box: document.getElementById("video-box"), // video 容器
  // 按钮
  play: document.getElementById("play"), // 播放按钮
  bigPlay: document.getElementById("bigPlay"), // 中央播放按钮
  pause: document.getElementById("pause"), // 暂停按钮
  sound: document.getElementById("sound"), // 音量喇叭
  mute: document.getElementById("mute"), // 静音
  fullScreen: document.getElementById("fullScreen"), // 全屏按钮
  // 其他
  duration: document.getElementById("duration"), // 总时长
  currentTime: document.getElementById("currentTime"), // 当前播放时间
  progress: document.getElementById("progress"), // 时间容器
  timeBar: document.getElementById("timeBar"), // 时间进度
  soundBox: document.getElementById("soundBox"), // 音量容器
  soundBar: document.getElementById("soundBar"), // 音量大小
  playSpeed: document.getElementById("playSpeed"), // 播放速率
  soundPercent: 0, //音量百分比
};

// ======================  函数封装  ======================

// 显示与隐藏
function toggle (a, b) {
  a.style.display = "none";
  b.style.display = "block";
}
// 时间格式化            
function timer (seconds) {
  var minute = Math.floor(seconds / 60);
  if (minute < 10) {
    minute = "0" + minute;
  }
  var second = Math.floor(seconds % 60);
  if (second < 10) {
    second = "0" + second;
  }
  return minute + ":" + second;
}
// 进度条拖拽
function updateprogress (x) {
  var percent = x / v.progress.clientWidth * 100;
  if (percent > 100) {
    percent = 100;
  } else if (percent < 0) {
    percent = 0;
  }
  v.timeBar.style.width = percent + "%";
  v.video.currentTime = v.video.duration * percent / 100;

}
// 进度条获取坐标调用 拖拽实现方法
var enableProgressDrag = function (e) {
  var progressDrag = false;
  v.progress.onmousedown = function (e) {
    progressDrag = true;
    updateprogress(e.offsetX);
  }
  document.onmouseup = function (e) {
    if (progressDrag) {
      progressDrag = false;
      updateprogress(e.offsetX);
    }
  }
  v.progress.onmousemove = function (e) {
    if (progressDrag) {
      updateprogress(e.offsetX);
    }
  }
};
// 判断是否静音
function isSound () {
  if (v.video.volume == 0) {
    toggle(v.sound, v.mute)
  } else {
    toggle(v.mute, v.sound)
  }
}
// 切换静音
v.sound.onclick = function () {
  toggle(v.sound, v.mute);
  v.video.volume = 0;
  v.soundBar.style.width = 0;
}
// 去除静音 音量回到之前选定区域
v.mute.onclick = function () {
  toggle(v.mute, v.sound);
  v.soundBar.style.width = v.soundPercent + "%";
  v.video.volume = v.soundPercent / 100;
}
// 音量拖拽
function updatesound (x, n) {
  if (n) {
    v.soundPercent = n;
  } else {
    v.soundPercent = x / v.soundBox.clientWidth * 100;
  }
  if (v.soundPercent > 100) {
    v.video.volume = 100;
  }
  if (v.soundPercent < 0) {
    v.video.volume = 0;
  }
  v.video.volume = v.soundPercent / 100;
  v.soundBar.style.width = v.soundPercent + "%";
  isSound();
}
// 音量获取坐标调用 拖拽实现方法
var enableSoundDrag = function (e) {
  var soundDrag = false;
  v.soundBox.onmousedown = function (e) {
    soundDrag = true;
    updatesound(e.offsetX, null);
  }
  v.soundBox.onmouseup = function (e) {
    if (soundDrag) {
      soundDrag = false;
      updatesound(e.offsetX, null);
    }
  }
  v.soundBox.onmousemove = function (e) {
    if (soundDrag) {
      updatesound(e.offsetX, null);
    }
  }
};
// 全屏
function requestFullscreen (ele) {
  // 全屏兼容代码
  if (ele.requestFullscreen) {
    ele.requestFullscreen();
  } else if (ele.webkitRequestFullscreen) {
    ele.webkitRequestFullscreen();
  } else if (ele.mozRequestFullScreen) {
    ele.mozRequestFullScreen();
  } else if (ele.msRequestFullscreen) {
    ele.msRequestFullscreen();
  }
}
// ======================  函数封装  ======================



// 视频播放完毕返回未播放状态
v.video.addEventListener('ended', function () {
  toggle(v.pause, v.play)
  v.timeBar.style.width = 0;
  video.src = video.currentSrc
})

// 监测是否处于播放状态，点击暂停
v.video.addEventListener('playing', function () {
  v.box.style.cursor = 'pointer'
  v.video.addEventListener('click', function () {
    if (!v.video.paused || !v.video.ended) {
      v.video.pause();
      toggle(v.pause, v.play)
      v.bigPlay.style.display = 'block'
    }
  })
})

// 双击全屏
v.video.addEventListener('dblclick', function () {
  requestFullscreen(v.video);
})

v.video.addEventListener('pause', function () {
  v.box.style.cursor = 'default'
})

v.video.onloadedmetadata = function () {
  // 播放
  v.play.onclick = function () {
    if (v.video.paused || v.video.ended) {
      v.video.play();
      toggle(v.play, v.pause)
      v.bigPlay.style.display = 'none'
    }
  }
  // 中央播放按钮
  v.bigPlay.onclick = function () {
    if (v.video.paused || v.video.ended) {
      v.video.play();
      toggle(v.play, v.pause)
      v.bigPlay.style.display = 'none'
    }
  }

  // 暂停
  v.pause.onclick = function () {
    if (!v.video.paused || !v.video.ended) {
      v.video.pause();
      toggle(v.pause, v.play)
      v.bigPlay.style.display = 'block'
    }
  }
  // 获取时长
  v.duration.innerHTML = timer(v.video.duration);
  v.currentTime.innerHTML = timer(v.video.currentTime);
  // 进度条跟随
  v.video.ontimeupdate = function () {
    var currentTime = v.video.currentTime;
    var duration = v.video.duration;
    var percent = currentTime / duration * 100;
    v.timeBar.style.width = percent + "%";
    v.currentTime.innerHTML = timer(currentTime);
  }
  // 执行时间拖拽和音量拖拽，音量初始化
  enableProgressDrag();
  enableSoundDrag();
  updatesound(null, 20);
  // 全屏
  v.fullScreen.addEventListener("click", function () {
    requestFullscreen(v.video);
  })
}