主页 / 问题 / 1376085
Accepted
Ivan234
Asked:2022-06-28 19:20:55 +0000 UTC2022-06-28 19:20:55 +0000 UTC

如何更改视频中刻度的颜色？

  • 772

现在，它是白色的，条纹的，我怎样才能改变颜色，让它变成蓝色或红色？还有，第二条是灰色的，颜色也可以改吗？ 在此处输入图像描述

.video {
  -o-object-fit: cover;
  object-fit: cover;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: solid 3px #000;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
}
<video autoplay loop class="video" id="video" controls disablePictureInPicture controlsList="nodownload">
    <source type="video/mp4" src="1.mp4">
</video>

javascript

2 个回答

  1. Best Answer

    如果我们谈论在 webkit 浏览器中自定义标准播放器（而不是构建您自己的），那么您只能使用 CSS 过滤器将时间线控件完全着色为某种阴影。

    正如评论中正确指出的那样，它有一个相应的伪元素。

    .custom-timeline::-webkit-media-controls-timeline {
  filter: sepia(100%) brightness(50%) saturate(2000%) hue-rotate(120deg) contrast(200%);
}
    <video class="custom-timeline" controls="controls" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type='video/mp4'></video>

    截屏



    视频播放器可能的 -webkit 伪元素列表：

    video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button
    • 3

  2. 您可以在此处阅读更多相关信息：https ://professorweb.ru/my/html/html5/level3/3_3.php

    我将尝试从表面上浏览指南（它将通过 JS 完成，也许有更好的解决方案我不知道）：

    让我们看一个示例代码，它与您的类似：

    HTML5：

    <video id="videoPlayer" width="600" height="400">
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogv" type="video/ogg">
</video>
<div>
    <button onclick="play()">Play</button>
    <button onclick="pause()">Pause</button>
    <button onclick="stop()">Stop</button>
    <button onclick="speedUp()">Быстрей</button>
    <button onclick="slowDown()">Медленее</button>
    <button onclick="normalSpeed()">Нормальная скорость</button>
</div>

    按钮的名称不言自明，但让我们在这里停下来以防万一：

    JS： 

    var video;
var display;

window.onload = function() {
    video = document.getElementById("videoPlayer");
};

function play() {
    video.play();
}

function pause() {
    video.pause();
}

function stop() {
    video.pause();
    video.currentTime = 0;
}

    我认为这里没有什么可解释的，使用您需要的操作创建一个函数并通过 JS 或 onclick="Function Name" 添加一个事件，如本例所示。您可以在指南中阅读有关按钮的更多信息。

    我们继续最重要的事情，到进度条，创建类似的代码：

    <div class="barContainer">
  <div id="durationBar">
    <div id="positionBar"><span id="displayStatus">0</span></div>
  </div>
</div>

    可以使用进度标签，但在这种情况下，我们使用 2 个 div。接下来，我们为进度条设置样式：

    #positionBar {
   height: 30px;
   color: white;
   font-weight: bold;
   background: steelblue;
   text-align: center;
}

#positionBar span {
   display: inline-block;
   margin-top: 5px;
}

#durationBar {
   border: solid 1px black;
   width: 100%;
   margin-bottom: 5px;
}

    当然，您可以更改它以适应您的需求和设计。接下来，我们在自定义进度条下连接视频：

    <video id="videoPlayer" onTimeUpdate="progressUpdate()">
...

    一切都差不多准备好了，剩下的就是写几行JS代码：

    function progressUpdate() {
    // Устанавливаем позицию воспроизведения
    var positionBar = document.getElementById("positionBar");
    positionBar.style.width = (video.currentTime / video.duration * 100)  + "%";
    
    // Заполняем текстовую надпись текущим значением
    displayStatus = document.getElementById("displayStatus");
    displayStatus.innerHTML = (Math.round(video.currentTime*100)/100) + " сек";
  }

    在选项 1 中，它只设置比例的占用，在选项 2 中，它指示百分比和进度条上的铭文。

    但是这是一种比较自定义的创建方式，我不建议你使用它，使用Video.js（https://videojs.com/）之类的1个框架就足够了；一切都方便 20 倍，更清晰，更轻松

    • 2

相关问题