6

I am attempting to determine if the TextTrack element of a html video is currently showing or hidden.

I took a look at the html specifications and at first glance, the texttracks.mode property would work perfectly according to: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#text-track-hidden

I tested this property with the following html and code in google chrome version 35.0.1916.153:

HTML:

<video>
    <track id="en" kind="subtitles" src="transcript.vtt"></track>
    <source src = "samplevideo.mp4">
</video>

Code:

$(video)[0].textTracks[0].mode

Initially the code returns a "hidden", as expected, and upon clicking the transcript button on the video player and rerunning the code, it returns "showing".

If I toggle the player off after these steps and rerun the code, it still returns "showing" despite the transcripts being hidden on the video.

Is there a better way to detect the visible / non-visible state of transcripts on an html5 video player?

Humayun Shabbir
  • 2,961
  • 4
  • 20
  • 33
Modulo
  • 61
  • 5
  • It's possible that this is a bug. It works in IE 11 – soktinpk Jul 16 '14 at 19:58
  • What browser and version are you using? – U007D Jul 17 '14 at 14:36
  • It is not a [W3C Standard](http://dev.w3.org/html5/webvtt/#h2_sotd) nor is it on the W3C Standards Track. – Krish Jul 18 '14 at 05:48
  • 2
    @krish It is a W3C standard: see http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#text-track-mode Also, I've confirmed that this works in IE11 but not in chrome. – soktinpk Jul 28 '14 at 01:30
  • Can you use jQuery to detect whether the subtitles are visible like so? if($( "track#en:visible" )) { // do tracking } else { // do other tracking } – ReLeaf Sep 16 '14 at 15:31

1 Answers1

1
<video id="video" controls preload="metadata">
<source src="video/sintel-short.mp4" type="video/mp4">
<source src="video/sintel-short.webm" type="video/webm">
<track label="English" kind="captions" srclang="en" src="captions/vtt/sintel-en.vtt" default>
<track label="Deutsch" kind="captions" srclang="de" src="captions/vtt/sintel-de.vtt">
<track label="Español" kind="captions" srclang="es" src="captions/vtt/sintel-es.vtt">
</video>
lalita chiddre
  • 9
  • 1