Search terms are provided to the player using the data-search attribute. In this hypothetical example, we have entered the search term "web mouse" into a search field. On the search results page, the data-search attribute of the <video> element is populated "web mouse" on page. Also the data-search-div attribute is populated with the id of an external <div> in which to display the search results. Finally, data-include-transcript is set to "false", since there isn't room on this page for both search results and a transcript (although the latter is optional).
To search a video's caption or subtitle file in Able Player, add two or three attributes to the HTML media element:
This works as follows in a server-side application:
The current demo assumes a user has already submitted a search for the word "you".
In this example, data-search-ignore-caps is enabled, so the search results include all instances of "you", regardless of case.
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.
See also the client-side search demo. For additional demos see the Index of Able Player Examples.