在另一个元素 HTML5 中显示字幕

Posted 2023-03-07

【中文标题】在另一个元素 HTML5 中显示字幕

【英文标题】：Show subtitle into another element HTML5

【发布时间】：2016-04-25 11:05:09

【问题描述】：

我有以下代码用于播放视频并显示其字幕轨道。

<video id="vTest" class="playr_video" controls preload="metadata">
       <source src='upc-tobymanley.theora.ogg' type='video/ogg'>
       <source src='upc-tobymanley.mp4' type='video/mp4'>
       <track label="English subtitles" kind="subtitles" srclang="en" src="upc-video-subtitles-en.vtt" default>
   </video>
<div id="subtitle"> </div>

是否可以在<div id="subtitle"> </div>中显示字幕而不是播放器？

【参考方案1】：

在<video>元素之后添加这个javascript

<script>

loadTextTrack(videoId:'vTest', // the ID of the video tag
               kind:'subtitles', // the kind of track
               srclang:'en', // the language of the source file (optional)
               targetId:'subtitle'); // the ID of the element into which to insert the timed text
</script>

定义一些CSS

<style type="text/css">

#subtitlewidth: 480px; position: absolute; top: 280px;padding: 3px 10px; text-align:  center; color:#fff;background-color:#000; font-family:  Helvetica,Arial,sans-serif; font-size: 0.9em; font-weight: bold;min-height:3.6em;

</style>

【讨论】：

已测试，抛出错误“ReferenceError: loadTextTrack is not defined”

将这两行添加到 部分.....

未捕获的错误：语法错误，无法识别的表达式：track[kind=subtitles][srclang=opt['srclang']] 我收到此错误，请问为什么？