Question

所以我在编写自己定制的HTML5视频播放器时遇到了问题。可以将任何CSS规则应用于<track>元素吗？任何讨厌的黑客？我想控制<track>和font-size的位置。

<div id="movie-01">
<video id="video" controls preload="metadata">
   <source src="files/movie-01/movie.mp4" type="video/mp4">
   <track label="Chinese Traditional" kind="subtitles" srclang="cht" src="files/movie-01/cht.vtt" default>
</video>
</div>
<style>
    track{
      color: #FAFAFA;
      font-size: 1em;
    }
</style>

Answer 1

我打算将我的字幕设置为黑色背景，并位于Safari和Chrome视频的下方。我通过以下代码与使用以下样式编辑.vtt文件相结合取得了成功。请注意，您必须将样式添加到.vtt文件中，否则在Safari中，当视频控件（即使它们被隐藏）出现时，您的标题会跳转：

4
00:00:09.980 --> 00:00:12.640 line:13 position:50% align:middle 
size:100%
for just the summer but I ended up staying here.

chrome和safari字幕的样式：

Chrome使用视频:: cue background-color和opacity。

video::cue {
  opacity: 1;
  background-color: black;
  font-size: 20px !important;
}

Safari使用-webkit-media-text-track-display-background作为背景颜色。注意！important会覆盖Safari的固有样式。

video::-webkit-media-text-track-display-backdrop {
  background-color: black !important;
  overflow: visible !important;
}

以下webkit-media-text-track-display溢出允许在Chrome的标题文本周围添加更多填充：

video::-webkit-media-text-track-display {
  overflow: visible !important;
}

对于Safari的以下代码，可见溢出很重要，我正在使用变换设置视频下方的标题，该变换依赖于固定的字体大小：

video::-webkit-media-text-track-container {
  overflow: visible !important;
  -webkit-transform: translateY(20%) !important;
  transform: translateY(20%) !important;
  position: absolute;
}

修改

经过一些调整后，我最终将这个用于我的项目：

重要：从.VTT文件中删除所有内联样式。

确定用户是使用chrome还是safari。

const rootElement = document.getElementById('root'); const M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || []; rootElement.className += "web"; if(M[1] === 'chrome'){ rootElement.className += " chrome"; } else { rootElement.className += " safari"; }

然后在SASS .scss文件中使用以下样式。注意：如果您不使用SASS，您只需为视频元素创建一个类并嵌套相应的样式。

.chrome { video::cue { font-size: 24px; opacity: 1; background-color: black; -webkit-transform: translateY(10%) !important; transform: translateY(10%) !important; } video::-webkit-media-text-track-display { overflow: visible !important; -webkit-box-sizing: border-box; background: black; padding: 8px; border-radius: 16px; } video::-webkit-media-text-track-container { overflow: visible !important; -webkit-transform: translateY(40%) !important; transform: translateY(40%) !important; position: relative; } } .safari { video::cue { font-size: 24px; opacity: 1; background-color: black; } video::-webkit-media-text-track-display-backdrop { background-color: black !important; overflow: visible !important; } video::-webkit-media-text-track-display { overflow: visible !important; -webkit-box-sizing: border-box; } video::-webkit-media-text-track-container { overflow: visible !important; -webkit-transform: translateY(20%) !important; transform: translateY(20%) !important; position: absolute; } }

Answer 2

根据WebVTT,使用css <track>元素无法呈现，因此无法向其添加css。你可以改变特征和给定的cue，但除此之外什么也没有。 Here's一个很好的教程，可以创造性地使用这些。最接近造型的是它用div包围并将风格应用于div本身。对不起，没有讨厌的hax。：/

编辑：有一个禁止令人讨厌的伎俩，但它对凡人来说非常危险。请注意，如果你接近这些技术，你会遇到最严重的错误和恶魔。

保护曲目

给定的track元素可以嵌入到受其保护的Audio元素中，因为它们共享HTML5媒体播放器的不受欢迎的种族。 mozilla文档有一个nice scroll可以帮助你完成任务;它包括以下内容：

<audio src="foo.ogg">
  <track kind="captions" src="foo.en.vtt" srclang="en" label="English">
  <track kind="captions" src="foo.sv.vtt" srclang="sv" label="Svenska">
</audio>

不听规则

作为一个禁止预言once mentioned,，没有实现使用CSS的音频播放器 - 但是，所选择的可以制作自己的音频播放器。他或她应该关闭controls属性，并使用javascript从头开始实现控件。他们可能会以现有音频播放器部分实施的形式帮助他们，例如your childhood friend.

从内到外攻击

一旦所选择的人掌握了js的各种造型控制艺术，他们就可以使用秘密的内部特质 - css-styling-non-justu，并从音频控件中添加样式到内部元素 - 其中一个，是赛道。

祝你好运，冒险家。如果你愿意的话，你将成为第一个活着回来的人。如果你愿意，请tell us你的强大战斗的故事。

Answer 3

虽然通常你不能用普通的旧CSS来设置track的样式，但你可以使用VideoJS来实现它。用于VideoJS视频播放器的JavaScript和CSS允许对track进行样式设置。您将需要使用FireFox尝试所有内容，因为（目前）Chrome不允许track显示，除非它已经在服务器上。我假设您正在使用HTML文件离线工作。

转到http://www.videojs.com/并下载文件。从.zip和open video-js.css中提取文件。转到REQUIRED STYLES (be careful overriding)部分的底部，找到/* Text Track Styles */。稍微低一点，你会发现.vjs-caption-settings。在此CSS的中间，您会看到color: #FFF;和font-size: 12px;。乐趣切换颜色。

我希望你和其他所有人都认为这很有用。

VideoJS文件的地图：

demo.captions.vtt字幕。需要
demo.html需要
font与CSS一起使用的文件夹
lang语言文件夹。不是真的需要
video-js.css编辑该文件。需要
video-js.less崩溃的CSS。不需要
video-js.min.css崩溃的CSS。不需要
video-js.swf旧版浏览器的闪回。可选的
video.dev.js扩展的JS。如果您愿意，可以使用此替换video.js。如果不使用#10
video.js崩溃了JS。 HTML页面使用它。将其替换为video.dev.js。如果不使用#9
video.novtt.dev.js不需要
video.novtt.js不需要

Answer 4

您可以使用

应用CSS样式

video::-webkit-media-text-track-display {
      color: #FAFAFA;
      font-size: 1em;
}

我已经使用了font-size和font-family。有关此网站的更多详细信息 http://www.samdutton.com/track/shadowDOM.html

Answer 5

根据HTML5 Video Caption Cue Settings in WebVTT文章，你可以设置造型线索。

Answer 6

这里有很多不错的选择，但也许我的解决方案可以帮助别人。

在我必须为其设置字幕样式的FCC兼容选项的过去项目中，我最终使用了VTT.js，这会将提示呈现在<div/>或<span/>之上<video/>。添加到达此节点的css规则，您可以对其进行完全CSS控制。

CSS可以应用于<track />元素

6 个答案:

保护曲目

不听规则

从内到外攻击