Video player with search (client-side)

Able Player can search a video's caption or subtitle files, with variables defined in data-search-div, data-search, and data-search-lang attributes on the media element. See the server-side search demo for more details about each of these attributes.

The current demo shows how this same functionality can be implemented in a client-side application using JavaScript. In this context, the only required attribute of the above three is data-search-div, which specifies the id of a container element in which to write the search results. Otherwise, Able Player is initiated as a variable, which enables us to assign values directly to Able Player's search-related variables based on user input, then call Able Player's showSearchResults() function to display the results. See the source code for details.

Also, in this example, data-include-transcript is set to "false", since there isn't room on this page for both search results and a transcript. A better design would accommodate both features.

Enter a search term below. (hint: "web mouse" is a good choice in English; or "web clicladores idénticos" in Español).