Add Video Chapters and Frontend Player for VODs
This adds ability to add chapters to both video assets and video configs, also allows for video-configs to be used in libraries via vue component so that we can collect analytics and frontends do not have to rebuild videojs players.
NOTE- Generated text in VTT files cannot be localized.
To do this:
- Add a video config
- click generate web vtt near bottom right
- make a chapters vtt from that modal by adding chapters with start and end time in seconds
- Once done click generate webvtt which will prompt you to save to local filesystem
- Then upload that vtt to upload vtt filepicker in the bottom right
- Refresh the page and you should see the chapters working as expected in the player
To view this player in a library add a library, then add a library asset of html. In the code block add this script below
<div id="video-config-provider">
<video-config-provider="[NEWLY_CREATED_VIDEO_CONFIG_ID]">
</video-config-provider>
</div>
<script>
$(function(){new Vue({el: '#video-config-provider'})})
</script>
OTHER HELPFUL NOTES-
Ability to add ‘Chapters’ to VODs
- Chapters in VODs allow markers to be added to specific timestamps of a video, allowing attendees to jump to each specific chapter marker.
- Chapters are set up in Dashboard and can be found on the side navigation.
- Streaming > Video Configs > ‘+ Add Video Config’ > Top right ‘Create Chapters VTT File’
- Chapters are indicated by seconds after the beginning of a video. To add chapters you need to know at what second of the video you want the chapter to start and end.
- Once you add the chapters you will need to save the new file as a VTT and upload in the edit screen of that configuration.
- On the attendee web, the chapter selection can be found towards the bottom right of the video player.