h5 video 带自定义控制条的和播放速度

好的，针对您的问题，我提供如下回答：

1. 带自定义控制条的H5视频播放器

HTML5的video标签提供了默认的视频播放控件，但是这些控件样式相对简单，如果需要自定义控制条，可以使用JavaScript和CSS来实现。下面是一个简单的示例代码：

HTML代码：

<video id="myVideo" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

JavaScript代码：

var video = document.getElementById("myVideo");
var playBtn = document.getElementById("playBtn");
var progressBar = document.getElementById("progressBar");

function togglePlay() {
  if (video.paused) {
    video.play();
    playBtn.innerHTML = "Pause";
  } else {
    video.pause();
    playBtn.innerHTML = "Play";
  }
}

function updateProgressBar() {
  var progress = (video.currentTime / video.duration) * 100;
  progressBar.style.width = progress + "%";
}

video.addEventListener("play", function() {
  playBtn.innerHTML = "Pause";
});

video.addEventListener("pause", function() {
  playBtn.innerHTML = "Play";
});

video.addEventListener("timeupdate", updateProgressBar);

playBtn.addEventListener("click", togglePlay);

CSS代码：

#myVideo {
  width: 640px;
  height: 360px;
}

#playBtn {
  background-color: #333;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#progressBarContainer {
  background-color: #ccc;
  height: 10px;
  margin-top: 10px;
}

#progressBar {
  background-color: #333;
  height: 100%;
  width: 0;
}

2. H5视频播放器的播放速度控制

HTML5的video标签提供了playbackRate属性，可以用来设置视频的播放速度。下面是一个简单的示例代码：

HTML代码：

<video id="myVideo" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

<button id="slowBtn">Slow</button>
<button id="normalBtn">Normal</button>
<button id="fastBtn">Fast</button>

JavaScript代码：

var video = document.getElementById("myVideo");
var slowBtn = document.getElementById("slowBtn");
var normalBtn = document.getElementById("normalBtn");
var fastBtn = document.getElementById("fastBtn");

function setPlaybackRate(rate) {
  video.playbackRate = rate;
}

slowBtn.addEventListener("click", function() {
  setPlaybackRate(0.5);
});

normalBtn.addEventListener("click", function() {
  setPlaybackRate(1);
});

fastBtn.addEventListener("click", function() {
  setPlaybackRate(2);
});

CSS代码：

#myVideo {
  width: 640px;
  height: 360px;
}

button {
  background-color: #333;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 10px;
}

以上是我提供的回答，希望能对您有所帮助。