Video Playback Spec πŸ§ͺ

Define what events you want triggered in advance

Named events

Goals, easier code.

Less code interaction.

Better integration with existing specs, like chapters.

Chapters

Youtube

  1. Timestamps in Description: Chapters are created using timestamps listed in the video's description.

  2. Starting Point: The first timestamp must start at 0:00, and the chapter title should typically be "Intro" or any other suitable title the creator wants to use.

  3. Format: Timestamps are written in the MM:SS format for videos under an hour, and HH:MM:SS for videos over an hour. After the timestamp, the creator provides a space, followed by the chapter name.

  4. Minimum Duration: For a video to have chapters, it must have at least three timestamps listed, and each chapter must be at least 10 seconds long.

// Some code
0:00 Intro
1:23 Part 1: Basics
3:45 Part 2: Advanced Topics

{ "snippet": { ... "description": "0:00 Intro\n1:23 Part 1: Basics\n3:45 Part 2: Advanced Topics" ... } }

Some events are automatic

stop

play

pause

buffer

seek

This is primarily for special, named events that relate to certain parts of your video.

Import Youtube's standard?

// Some code 
<script type="sygnal/sa5-video">
show-button: 15.28s
navigate: 98%
pause: pause
</script>

Use the videos.list method with the snippet part.

// Some code
const description = "0:00 Intro\n1:23 Part 1: Basics\n3:45 Part 2: Advanced Topics"; // This would come from the API.
const regex = /(\d{1,2}:\d{2}(?:\:\d{2})?)\s(.+)/g;
let match;
const chapters = [];

while (match = regex.exec(description)) {
    chapters.push({
        timestamp: match[1],
        title: match[2]
    });
}

console.log(chapters);

Chapters

Also supported by;

  1. YouTube

  2. Loom

  3. Apple Podcasts & iTunes: Chapters can be added to podcasts, which allows listeners to skip to specific segments of the episode.

  4. Overcast: A popular podcast player that supports chapters.

  5. Podcast Chapters: A macOS app specifically designed to add chapters to podcasts.

  6. MKVToolNix: It's a tool for Matroska (MKV) files, and one of its features is to create or edit chapters.

  7. Auphonic: An online audio and podcast processing tool that supports chapter markers.

  8. Podlove Web Player: A web-based podcast player that supports chapters.

  9. Simple Chapters: An open standard for adding chapter information to MP4s and MP3s.

  10. M4A files: The M4A file format, primarily used by Apple for songs without DRM protection in iTunes, supports chapters.

  11. Audible: The audiobook platform uses chapter functionality, allowing listeners to navigate between different sections of the book.

JSON Approach

Too verbose, dislike.

<script type="sygnal/sa5-video">
{
    "events": [
        {
            "type": "time",
            "value": 15.28,
            "action": "show-button"
        },
        {
            "type": "percentage",
            "value": 98,
            "action": "navigate"
        },
        {
            "type": "state",
            "value": "pause",
            "action": "pause"
        }
    ]
}
</script>

Last updated