突出顯示視頻字幕中的單詞，HTML5視頻

當用戶點擊視頻時，我必須突出顯示視頻字幕中的單詞。所以，給定tap的座標，問題是在cue字符串中找到index字。突出顯示視頻字幕中的單詞，HTML5視頻

任何想法？這是可能的嗎？我正在談論最新的HTML5觸摸事件和WebVTT線索https://www.w3.org/TR/webvtt1/。

2017-07-29 Gustav.Calder

第一個問題是要得到這個提示文本是真的。似乎沒有什麼方法可以從VTTCue API知道它（getBoundingClientRect會有很多幫助）我能想到的解決方法是實現自己的字幕顯示... – Kaiido

似乎沒有一個'TextTrack'支持'click'事件，，但你可以訪問'activeCues' https://developer.mozilla.org/en-US/docs/Web/API/TextTrack 我不認爲你希望目前是可能的，但您可以嘗試將您的視頻與Canvas API結合起來，以獲得點擊位置，類似於這個概念：https：//developer.mozilla.org/en-US/docs/Web/API/Canvas_API/ Manipulating_video_using_canvas 或者只是使用Canvas作爲整個視頻播放器。 – JHS

@JHS，爲什麼使用畫布獲得點擊事件？您可以直接從視頻中獲取，也可以從視頻頂部放置任何視覺元素。此外，字幕不會繪製在畫布上。 – Kaiido

我不認爲傳統的WebVTT提示是可能的 - 它們是僞元素，它們不是DOM的直接組成部分，因此您無法將事件綁定到它們。對於:: cues，造型也非常有限。

但是，您應該能夠利用TextTrack事件來完成某些以類似方式工作的內容。您可以將自定義功能綁定到視頻軌道的oncuechange事件，然後使用軌道的activeCues生成您自己的標題。這個自定義div然後可以被設置風格，並有任何你想要的事件。

這將抓住視頻中的第一條文本軌道，並在每次發生提示更改時從當前活動的提示中獲取文本。

$('video')[0].textTracks[0].oncuechange = function() { 
    var currentCue = this.activeCues[0].text; 
    // add current cue text to custom caption div 
}

你可能會需要提示的每一個字解析爲自己的跨度，以便您可以添加事件，添加亮點類，等等，那麼你可以風格/每件互動，但是你會喜歡。

https://developer.mozilla.org/en-US/docs/Web/API/TextTrack

來源

2017-10-31 21:16:00

突出顯示視頻字幕中的單詞，HTML5視頻

回答

相關問題