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播放器比手动设计样式更好吗？像video.js和Meisterplayer这样的HTML5播放器是可定制的。但是，这取决于你想要多少定制。 Here是自定义播放器的示例。

Answer 2

首先，请参阅this site。我不打算列出整个编码，请自行查看。

您可以自己构建自定义控制栏，只需将其放在视频下即可。

<强> 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 。

阅读here制作自定义视频播放器。

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

4 个答案: