写一个视频悬浮框

好的，这里提供一个简单的视频悬浮框的实现代码，你可以根据实际情况进行修改和优化：

HTML：

<div id="video-container">
  <video id="video-player" src="your-video-source"></video>
  <div id="video-overlay">
    <button id="play-pause-btn"></button>
    <button id="mute-btn"></button>
    <input type="range" id="volume-slider" min="0" max="1" step="0.1" value="1">
    <button id="full-screen-btn"></button>
  </div>
</div>

CSS：

#video-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  width: 300px;
  height: 200px;
  background-color: black;
  border-radius: 10px;
  overflow: hidden;
}

#video-player {
  width: 100%;
  height: 100%;
}

#video-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
}

#play-pause-btn,
#mute-btn,
#full-screen-btn {
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
}

#play-pause-btn {
  background-image: url(play.png);
}

#play-pause-btn.playing {
  background-image: url(pause.png);
}

#mute-btn {
  background-image: url(volume.png);
}

#mute-btn.muted {
  background-image: url(mute.png);
}

#full-screen-btn {
  background-image: url(full-screen.png);
}

#volume-slider {
  width: 80px;
  height: 10px;
  margin: 0 10px;
  cursor: pointer;
  appearance: none;
  background-color: gray;
  border-radius: 5px;
}

#volume-slider::-webkit-slider-thumb {
  appearance: none;
  width: 15px;
  height: 15px;
  background-color: white;
  border-radius: 50%;
  cursor: pointer;
}

#volume-slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  background-color: white;
  border-radius: 50%;
  cursor: pointer;
}

JavaScript：

const videoContainer = document.getElementById('video-container');
const videoPlayer = document.getElementById('video-player');
const playPauseBtn = document.getElementById('play-pause-btn');
const muteBtn = document.getElementById('mute-btn');
const volumeSlider = document.getElementById('volume-slider');
const fullScreenBtn = document.getElementById('full-screen-btn');

let isPlaying = false;
let isMuted = false;

function togglePlayPause() {
  if (isPlaying) {
    videoPlayer.pause();
    playPauseBtn.classList.remove('playing');
  } else {
    videoPlayer.play();
    playPauseBtn.classList.add('playing');
  }
  isPlaying = !isPlaying;
}

function toggleMute() {
  if (isMuted) {
    videoPlayer.volume = volumeSlider.value;
    muteBtn.classList.remove('muted');
  } else {
    videoPlayer.volume = 0;
    muteBtn.classList.add('muted');
  }
  isMuted = !isMuted;
}

function setVolume() {
  videoPlayer.volume = volumeSlider.value;
  if (volumeSlider.value == 0) {
    isMuted = true;
    muteBtn.classList.add('muted');
  } else {
    isMuted = false;
    muteBtn.classList.remove('muted');
  }
}

function toggleFullScreen() {
  if (videoContainer.requestFullscreen) {
    videoContainer.requestFullscreen();
  } else if (videoContainer.msRequestFullscreen) {
    videoContainer.msRequestFullscreen();
  } else if (videoContainer.mozRequestFullScreen) {
    videoContainer.mozRequestFullScreen();
  } else if (videoContainer.webkitRequestFullscreen) {
    videoContainer.webkitRequestFullscreen();
  }
}

playPauseBtn.addEventListener('click', togglePlayPause);
muteBtn.addEventListener('click', toggleMute);
volumeSlider.addEventListener('input', setVolume);
fullScreenBtn.addEventListener('click', toggleFullScreen);

这段代码实现了一个简单的视频悬浮框，包括播放/暂停、静音/取消静音、调节音量、全屏等功能。你可以根据实际需求修改和优化这段代码。