1

誰かが方法を知っているか、例を持っているか、誰かからのリンクが良い例を提供していますか? 「開始」時間、「継続」時間、および字幕テキストを含む XML ファイルがありました。HTML5 では、スナップショットの MJPEG ムービーがあります。MJPEG ビデオの再生中に fps デュレーションの 10 進数を取得できました。ここで、このビデオの継続時間番号を字幕の開始番号と継続時間番号とともに使用して、字幕テキストがビデオの実行中に一致して表示されるようにする方法を知りたいと思います。

ここに私のXMLコード、

<transcript>
<text start="2.014" dur="1.276">Greetings fellow nerds.</text>
<text start="3.291" dur="3.446">In this video we&#39;re going to make glow sticks of various colors</text>
<text start="6.738" dur="2.277">and explain a few interesting points about them.</text>
<text start="9.016" dur="2.722">But first I need to crush your expectations.</text>
</transcript>

ビデオ継続時間を取得する Javascript 変数名は profTime です。

これは HTML ビデオ コードの例で、ID は profTime です。

<div class="drsElement" 
 style="left: 47%; top: 52%; height: auto; width: 25%;   text-align:  left; " id="profDiv">
    <div class="drsMoveHandle" style = "position:relative;"><p id="profTime"> Time: 0</p></div>
        <div >
<input type="range" onchange="profOpc()" value="100" id="profOPC" min="20" max="100" />
</div>

    <div style=" width: auto; height: auto; position:relative; margin-bottom:7%;">
        <!-- video images area.... -->
        <img src="prof/0.jpg" style="width: 100%; height:auto;"   class="webcam2"  id="profVid"   alt="Live Stream"  onerror="ErrorPlayProf()"> 

    </div>
            <center>

        <input type="button" onclick="fivesecbackProf()" value="- 5 sec" id ="fivesecbackProfButt" />
        <input type="button" onclick="onesecbackProf()" value="- 1 sec" id ="onesecbackProfButt" />
        <input  type="button" onclick="liveProf()" value="Live" id ="liveProfButt" disabled = "true" />
        <input  type="button" onclick="onesecforProf()" value="+ 1 sec"id ="onesecforProfButt" disabled = "true" />
        <input  type="button" onclick="fivesecforProf()" value="+ 5 sec"id ="fivesecforProfButt" disabled = "true" />
    </center>

</div>
4

1 に答える 1

2

HTML5ビデオAPIのこのインタラクティブなデモンストレーションが役立つ場合があります。

必要なアルゴリズムは特に難しくありません。currentTime基本的に、進行状況イベントをリッスンし、ビデオのプロパティに基づいて表示するcuePointを決定することにより、ビデオ再生の進行状況を監視する必要があります。以下は不完全ですが、あなたにアイデアを与えるはずです。

var video = document.getElementById('video');
video.addEventListener('progress', progressHandler);

console.log(document.getElementById('video'));

function progressHandler() {
 //console.log(video.currentTime);
    var currentTime = video.currentTime;
    var cueStart = cuePoint.start;
    var cueEnd = cueStart + cuePoint.duration;

    if (currentTime > cueStart && currentTime < cueEnd) {
       displayCuePoint(cuePoint.text);   
    }
}

XML内の各テキストノードを対応するプロパティを持つJavaScriptオブジェクトにマップすると、おそらくあなたの生活はずっと楽になるでしょう。または、最初にデータをJSONとしてロードし、より使いやすいものに変換する手間を省くことができます。

于 2013-03-14T22:26:05.693 に答える