0

ビデオ要素があり、ユーザーはオプションのリストから再生したいビデオを選択できます。ビデオごとに、それに関連付けられた 1 つのテキスト トラックがあります。新しく選んだ動画を簡単に再生できます。しかし、新しいテキストトラックを設定できないようです。

私が持っているhtmlで：

<video id="theVideo" controls="" width="569" height="288">
    <track id="theTrack" kind="subtitles" type="text/webvtt" srclang="en" />
</video>

私はこのようなソースを追加しようとしました:

$('#theTrack').attr('src', newSource.vtt);

これはさまざまな字幕を構築するだけなので、以前のビデオからのさまざまな字幕が同時に表示されることになります。

また、トラックをまとめて削除して、再度追加しようとしました。キャプションを非表示にしてから再生する新しいビデオを選択しない限り、これは機能します。しばらく再生すると、ページ全体がクラッシュします...まだ古いトラックのテキストを表示しようとしていると思いますか??

$('#theTrack').remove();
$('#theVideo').append("<track id='theTrack' kind='subtitles' type='text/webvtt' srclang='en'/>");
$('#theTrack').attr('src', newSource.vtt);

これについての助けをいただければ幸いです!! ありがとう

4

1 に答える 1

0

わかりました...きれいではありませんが、現在アクティブなすべてのキューをビデオから削除し（何らかの理由で逆の順序でしか機能しないようです）、ソースを交換する必要があるようです。

このサンプルは Chrome で正常に動作します。Safari でクラッシュが 1 回見られました。IE9 は不安定でしたが、ターゲット プラットフォームが何であるかはわかりません。この分野では少し改良が必要なようですが、うまくいけば、これにより必要な場所に近づくことができます...

<!DOCTYPE html>
<html>
<head>
<title>Toggle Caption Source</title>
</head>
<body>
<video autoplay controls muted id="video">
    <source src="Video.mp4" type="video/mp4">
    <track id="t" src="botrack.vtt" label="English" kind="subtitles" srclang="en" default> 
    HTML5 video not supported
</video>

<p onclick="o();">toggle</p>
<script>
function o() {
    var v = document.getElementById("video")
    var t = document.getElementById("t")

    var textTracks = v.textTracks; // one for each track element
    var textTrack = textTracks[0]; // corresponds to the first track element

    var cues = textTrack.cues;
    for (var i=cues.length;i>=0;i--) {
        textTrack.removeCue(cues[i]);
    }
    if (t.src == "http://{qualified.url}/botrack.vtt") {
        t.src = "http://{qualified.url}/entrack.vtt"
    } else {
        t.src = "http://{qualified.url}/botrack.vtt"
    }
}
</script>

</body>
</html>
于 2013-03-09T20:14:19.360 に答える