<body><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar.g?targetBlogID\x3d8211560\x26blogName\x3dTech+Tips,+Tricks+%26+Trivia\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26navbarType\x3dBLUE\x26layoutType\x3dCLASSIC\x26searchRoot\x3dhttp://mvark.blogspot.com/search\x26blogLocale\x3den\x26v\x3d2\x26homepageUrl\x3dhttp://mvark.blogspot.com/\x26vt\x3d-5147029996388199615', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe" }); } }); </script>

Tech Tips, Tricks & Trivia

by 'Anil' Radhakrishna
An architect's notes, experiments, discoveries and annotated bookmarks.

Search from over a hundred HOW TO articles, Tips and Tricks


HOW TO get subtitles from a HTML5 video player

If you prefer to learn about the content of a video by reading its transcript rather than watch a video, the way to get at the caption file (if it is available) when the video is available through a HTML5 video player is to look at the HTML source (right click on web page and choose View Page Source from the context menu) and grab the file name.

You may look at HTML code like this corresponding to the video player when you look at the source -

<video id="video1" controls autoplay>
<source src="
http://ie.microsoft.com/testdrive/Videos/BehindIE9ModernWebStandards/Video.mp4"  >
<track id='track1' label='English captions' src="entrack.vtt" kind='subtitles' srclang='en' default >  
</video>

The file specified for the track element is the subtitles file.

Internet Explorer supports two formats for closed captioning, WebVTT and TTML. In IE11, support for Simple Delivery Profile (SDP) caption styling was added. SDP gives some pretty cool abilities to place the text within the video frame, change text color, and background, and control stroke color and width.

Labels: ,

Tweet this | Google+ it | Share on FB

« Home | Next »
| Next »
| Next »
| Next »
| Next »
| Next »
| Next »
| Next »
| Next »
| Next »

»

Post a Comment