Show subtitle into another element HTML5 -
i have following code playing video , showing subtitle track.
<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>
is possible show subtitles inside <div id="subtitle"> </div>
instead of player?
add javascript after <video>
element
<script> loadtexttrack({videoid:'vtest', // id of video tag kind:'subtitles', // kind of track srclang:'en', // language of source file (optional) targetid:'subtitle'}); // id of element insert timed text </script>
define 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>
Comments
Post a Comment