Tracking HTML5 Video Closed Captions Visibility State

Question

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?

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