Question

我有以下代碼來播放視頻並顯示其字幕軌道。

<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>而不是播放器內的字幕？

Answer 1

添加該JavaScript後<video>元件

<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"> 

#subtitle{width: 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>