5

私のhtmlは次のようになります：

<!DOCTYPE html>

<html>
    <head>
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <video controls="" autoplay="" name="media">
            <source src="videoPath" type="video/mp4">
            <track label="English" kind="subtitles" srclang="en" src="subs.vtt" default>
        </video>
    </body>
</html>

subs.vttは字幕ファイルです。

track要素に添付された字幕のサイズを変更するにはどうすればよいですか?

私はcssファイルを作成しようとしましたがtrack、idを指定しfont-sizeてcssで指定し、もちろんcssをhtmlにリンクしましたが、サイズは変わりませんでした。

また、 .vttファイル自体の中でスタイリングを試みました。

WEBVTT

1
00:00:43.889 --> 00:00:46.949 size:200%
<i>Introduction...</i>

そしてそれはサイズを変えませんでした。

オンラインで見つけた次のようなことも試しました。

WEBVTT
<link href="style.css" rel="stylesheet" type="text/css" />
1
00:00:43.889 --> 00:00:46.949
<c vIntro><i>Introduction...</i></c>

そしてcssで：

.vIntro{
  font-size: 5em;
}

しかし、これもサイズを変更しませんでした。

私は.vttファイルに触れない方法を好みます。

4

2 に答える 2

8

更新: 元の回答が作成されてから 6 年以上経過した 2021 年であり、Shadow DOM は変更された仕様により、より幅広いサポートを提供しています。

元の答え：

Shadow DOM をサポートするブラウザーでは、字幕のスタイルを設定できます。ブラウザーによって異なる場合がありますが、Chrome 42 (この記事の執筆時点) では、次の CSS を使用できます。

video::-webkit-media-text-track-display {
  font-size: 200%;
}

そこにベンダー プレフィックスがあることを考えると、他のブラウザーでは追加のルールが必要になる可能性があると思います。繰り返しになりますが、Shadow DOM をサポートするブラウザーはそれほど多くありません。この記事の執筆時点では、Chrome、Opera、および Android/Chrome-for-Android のみです。

于 2015-05-14T20:23:54.793 に答える
4

それは古い主題ですが、まだグーグルの最初の結果にあります。これが私の答えです。

firefox の場合 (他のブラウザーについてはわかりません)、これを css に入れることができます:

::cue {
  font-size: 1.2em;
}
于 2018-06-06T09:56:37.863 に答える