js怎樣操作WebVTT字幕 3個(gè)字幕控制技巧增強(qiáng)視頻體驗(yàn)

textTrack.oncuechange = () => {   const cue = textTrack.activeCues[0];    if (cue) {     // 創(chuàng)建一個(gè)新的div元素     const div = document.createElement('div');     div.textContent = cue.text;     div.style.color = 'red'; // 修改顏色     div.style.fontSize = '20px'; // 修改字體大小     div.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; // 添加背景色      // 替換原來的字幕文本（這部分需要根據(jù)具體的字幕渲染方式來實(shí)現(xiàn)，不同的視頻播放器實(shí)現(xiàn)方式可能不同）     // 這里只是一個(gè)示例，可能需要在特定的視頻播放器API中查找替換字幕文本的方法     // 例如，如果視頻播放器使用一個(gè)特定的div來顯示字幕，你可以找到這個(gè)div并替換它的內(nèi)容     // document.querySelector('.subtitle-container').innerHTML = div.outerHTML;     console.log('字幕樣式已修改');   } };

video.addEventListener('timeupdate', () => {   const currentTime = video.currentTime;   // 假設(shè)你的字幕數(shù)據(jù)是一個(gè)數(shù)組，包含了每個(gè)字幕的開始時(shí)間和結(jié)束時(shí)間   const subtitles = [     { start: 0, end: 5, text: '這是第一句字幕' },     { start: 5, end: 10, text: '這是第二句字幕' },     // ... 更多字幕   ];    // 找到當(dāng)前應(yīng)該顯示的字幕   const currentSubtitle = subtitles.find(subtitle => currentTime >= subtitle.start && currentTime < subtitle.end);    if (currentSubtitle) {     // 顯示字幕     // 同樣，這里需要根據(jù)視頻播放器的字幕渲染方式來顯示字幕     // 例如，可以創(chuàng)建一個(gè)div元素，將字幕文本放入其中，然后添加到字幕容器中     // document.querySelector('.subtitle-container').textContent = currentSubtitle.text;     console.log('當(dāng)前字幕：', currentSubtitle.text);   } else {     // 清空字幕     // document.querySelector('.subtitle-container').textContent = '';     console.log('無字幕');   } });

const offset = 0.5; // 字幕偏移0.5秒  const currentSubtitle = subtitles.find(subtitle => currentTime + offset >= subtitle.start && currentTime + offset < subtitle.end);

fetch('your-subtitles.vtt')   .then(response => response.blob())   .then(blob => {     const reader = new FileReader();     reader.onload = function(event) {       const text = event.target.result;       // 解析WebVTT文件       parseWebVTT(text);     }     reader.onerror = function(event) {       console.error("文件讀取出錯(cuò): ", event);     }      // 嘗試使用不同的編碼格式讀取文件     const decoder = new TextDecoder('utf-8'); // 默認(rèn)使用UTF-8     reader.readAsText(blob, decoder);      // 如果UTF-8解碼失敗，可以嘗試其他編碼格式     // const decoder = new TextDecoder('gbk');     // reader.readAsText(blob, decoder);   });  function parseWebVTT(text) {   // 解析WebVTT文件的邏輯   // 例如，將WebVTT文本分割成不同的字幕塊，提取時(shí)間戳和文本內(nèi)容   const lines = text.split('n');   // ... 解析邏輯   console.log('WebVTT文件內(nèi)容：', lines); }