更改底部html视频菜单的设计

Question

我的代码如下：

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
video {
    width: 100%;
    height: auto;
}
</style>
</head>
<body>

<video width="400" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<p>Resize the browser window to see how the size of the video player will scale.</p>

</body>
</html>

通过使用上面的代码，我得到以下设计：

如何更改图像中突出显示的菜单的设计？ 例如，我想更改播放按钮的设计以及添加全屏视图按钮。

Answer 1

您是否认为使用HTML5播放器比手动设计样式更好？ HTML5播放器（例如video.js和Meisterplayer）是可自定义的。 但是，这取决于您要自定义的数量。 这是自定义播放器的示例。

Answer 2

首先，请参阅此网站 。 我不会列出整个编码，请您自己看一下。

您可以自己构建一个自定义控制栏，然后将其放置在视频下方。

的HTML

<div id="video-container">
  <!-- Video -->
  <video id="video" width="640" height="365"></video> //your video
  <!-- Video Controls -->
  <div id="video-controls">
    <button type="button" id="play-pause">Play</button>
    <input type="range" id="seek-bar" value="0">
    <button type="button" id="mute">Mute</button>
    <input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1">
    <button type="button" id="full-screen">Full-Screen</button>
  </div>
</div>

然后，使用javascript获取每个按钮或标签。 就像var fullScreenButton = document.getElementById("full-screen"); 并添加功能。

全屏功能

fullScreenButton.addEventListener("click", function() {
  if (video.requestFullscreen) {
    video.requestFullscreen();
  } else if (video.mozRequestFullScreen) {
    video.mozRequestFullScreen(); // Firefox
  } else if (video.webkitRequestFullscreen) {
    video.webkitRequestFullscreen(); // Chrome and Safari
  }
});

Answer 3

比改变样式要复杂一些。

我建议您在CodePen （ https://codepen.io/frytyler/pen/juGfk ）上看一下Tyler Fry的视频播放器，以了解所有可以做的事情。

Answer 4

不幸的是，该元素的控件无法使用CSS进行样式化。

为此，您需要结合使用JavaScript ， CSS和HTML5 Media API 。

阅读此处以制作自定义视频播放器。