コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > 本文

html5 で新しいテキスト トラックを作成して返すメソッド

黄舟
リリース： 2017-11-07 11:15:29
オリジナル
2114 人が閲覧しました

例

新しいテキスト トラックを Video に追加します: 

text1=myVid.addTextTrack("caption");
text1.addCue(new TextTrackCue("Test text", 01.000, 04.000,"","","",true));
ログイン後にコピー

定義と使用法

addTextTrack() メソッドは、新しいテキスト トラックを作成して返します。

新しい TextTrack オブジェクト がビデオ/オーディオ要素のテキスト トラック リストに追加されます。

ブラウザのサポート

すべての主要なブラウザは addTextTrack() メソッドをサポートしません。

構文

audio|video.addTextTrack(kind,label,language)
ログイン後にコピー

パラメータ

テキストトラックのラベルを指定するString テキスト トラックの言語を指定する 2 文字の言語コード。 利用可能なすべての言語コードを確認するには、言語コード リファレンス マニュアルを参照してください。 戻り値
値説明
kind

テキストトラックのタイプを指定します。

可能な値:

  • 「字幕」

  • 「キャプション」

  • 「説明」

  • 「メタデータ」

ラベル
値。ユーザーのテキスト トラックを識別するために使用されます。 language

型説明新しいテキストトラックを表します。 例: 
<!DOCTYPE html> 
<html> 
<body> 
<button onclick="myFunction()" type="button">添加新字幕</button>
<br>
<video id="video1" width="480" height="270" controls="controls"> 
<source src="material/sample.mp4" type="video/mp4"/> 
<source src="material/sample.ogv" type="video/ogg"/>你的浏览器不支持HTML5 video.</video>
<script>var vid = document.getElementById("video1");
function myFunction() {   
var text1 = vid.addTextTrack("caption");
text1.addCue(new TextTrackCue("Test text", 01.000, 04.000, "", "", "", true));}
</script> 
</body> 
</html>
ログイン後にコピー

以上がhtml5 で新しいテキスト トラックを作成して返すメソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
h5 html5
ソース：php.cn
前の記事：ユーザーが HTML5 でビデオ/オーディオの再生を開始できるときにトリガーされる oncanplay イベント 次の記事：HTML5 のメソッド canPlayType() は、ブラウザーが指定されたオーディオ/ビデオ タイプを再生できるかどうかを判断します。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...
から 2024-04-06 15:33:12
0
1
433
PDF ファイルは HTML5 と JavaScript を実行できますか? PDF に埋め込まれるため、どのコンピュータでもブロックされないプログラムを作成してみようという愚かな考えがあります (JavaScript は PDF 内で実行できると聞きました...
から 2024-04-05 12:57:00
0
1
456
HTML5 の enctype と formenctype の違いは何ですか? HTMLLivingStandard (別名、新しい HTML5 仕様) の属性 enctype と formenctype の違いは何でしょうか?私は HTML Standard...
から 2024-04-02 11:47:56
0
1
275
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
TextTrackオブジェクト