This PR implements general video transcript annotation support based on the HTML <video> element and WebVTT or SRT format transcripts. WebVTT is the transcript format supported natively by browsers. SRT is a widely used and very similar text-based format, which is used by Canvas Studio.
There are several components to this:
A new HTML video transcript view to handles URLs of the form /video?url={url}&media_url={media_url}&transcript={transcript} where url is the canonical URL of the video, media_url is the URL to load the video from (currently only one is supported, but we could allow multiple to support different formats and resolutions in future) and transcript is the URL of a transcript in WebVTT or SRT format. The media_url is optional and if not provided, url is used as a default.
A new API view which takes a URL pointing to a WebVTT or SRT format transcript, fetches it, parses it using the webvtt library and then returns it to the frontend.
An alternate video player in the frontend which uses HTML <video> and <track> elements to render the video and subtitles, instead of the YouTube video player. The choice of player is controlled by a player configuration set by the backend.
You should then the video presented with the browser's native video player, and the transcript presented in the same way as for YouTube videos. This particular example is taken from an MDN demo. Note that it is expected that this particular video is low resolution.
This PR implements general video transcript annotation support based on the HTML
<video>element and WebVTT or SRT format transcripts. WebVTT is the transcript format supported natively by browsers. SRT is a widely used and very similar text-based format, which is used by Canvas Studio.There are several components to this:
/video?url={url}&media_url={media_url}&transcript={transcript}whereurlis the canonical URL of the video,media_urlis the URL to load the video from (currently only one is supported, but we could allow multiple to support different formats and resolutions in future) andtranscriptis the URL of a transcript in WebVTT or SRT format. Themedia_urlis optional and if not provided,urlis used as a default.<video>and<track>elements to render the video and subtitles, instead of the YouTube video player. The choice of player is controlled by aplayerconfiguration set by the backend.Testing:
Check out this branch, then go to http://localhost:9083/video?url=https%3A%2F%2Finteractive-examples.mdn.mozilla.net%2Fmedia%2Fcc0-videos%2Ffriday.mp4&transcript=https%3A%2F%2Finteractive-examples.mdn.mozilla.net%2Fmedia%2Fexamples%2Ffriday.vtt
You should then the video presented with the browser's native video player, and the transcript presented in the same way as for YouTube videos. This particular example is taken from an MDN demo. Note that it is expected that this particular video is low resolution.
Part of https://github.com/hypothesis/via/issues/1293