Sub-chapters

[jbonlinea]

Hi guys,

I've seen that chapters are now implemented in the player api, cool #551

The sad part is that we can't set sub chapters !

This is not a pure player.js ehencement, but having the ability to add a "level" on the generated json file would enable us to set display and seekto subchapters easily !

It would be great 👍

Cheers

EDIT :

coupe of years ago I implemented a chapter/subchapter system where

• a html list contained my chapters name and index and were given a CSS class .chapters like such <li class="chapters" data-chapter='0'>MyChap</li>
• a js array containing the chapters timecode like such : var chapTime =[18, 37.5, 74, 190];
• an js event listener to get when someone clicked on a DOM element of CSS class .chapters, that trigged a function using the api and seekTo() method with the timecode value from the array

It works like a charm but seems a bit obsolete now, while still not replaceble by the new vimeo chapter feature because of the lack of subchapters !

Now that vimeo has chapters, there are two way I could see the sub-chapter implementation

actual json

Chapters: [
{
"startTime": 107,
"title": "chap1",
"index": 1
},
{
"startTime": 142,
"title": "SubChap1",
"index": 2
},
{
"startTime": 220,
"title": "SubChap2",
"index": 3
},
{
"startTime": 355,
"title": "Chap2",
"index": 4
},
]

json of the first implementation

Chapters: [
{
"startTime": 107,
"title": "chap1",
"index": 1
"level": 0
},
{
"startTime": 142,
"title": "SubChap1",
"index": 2
"level": 1
},
{
"startTime": 220,
"title": "SubChap2",
"index": 3
"level": 1
},
{
"startTime": 355,
"title": "Chap2",
"index": 4
"level": 0
},
]

json of the second implementation

Chapters: [
{
"startTime": 107,
"title": "chap1",
"index": 1
"children": [
    {
      "startTime": 142,
      "title": "SubChap1",
      "index": 2
     "children" [{and so on}]
    ,}
    {
      "startTime": 220,
      "title": "SubChap2",
      "index": 3
     "children" [{and so on}]
    ,}
]
},
{
"startTime": 355,
"title": "Chap2",
"index": 4
},
]

Also what would be great is if you could provide example in the api demo where the video's chapters would be listed and clickable to seek to it.

I have found and will find my way without it, but I think it would be beneficial for everyone if a clean implementation is offered.

Cheers

Regards

[fisherinnovation]

Thanks for the feedback. Marking as a feature request for now.

[jbonlinea]

Hi

Is there any chance to know if you would rather go for the first or second type of implementation ? As I'll code id for myself, but would rather do it the way that'll match yours in the future.

Also, is there any chance for you to add a option to toggle the display of the chapter ON/OFF.
This may look an awekward request, but there is a rationale behind it.
I need to trigg a cetain js function at various time of the video.
I could use cuepoints to do that, and chapters to create front end user clickable chapters.
But
It happens that the moments I want to trig this js function include every chapter start time, plus some other moment.
I could "duplicate" my chapter start time in cuepoint, which is a useless pain to create, plus harden the maintenance if I change a chapter time.
I could also trigg my function on chapter change, and on certain cuepoint, which would split my function triggers in two place (some in the chapters and some in the cuepoints) ; more over as the function needs to get some parameters (related to elapsed time) it would basically requires two js function doing the same stuff, but based on differents parameters the get because they are trigged diferently... not so nice

I may seems like a strange need, but think of anything you may want to do along video reading, which always occurs when a chapter "stricto sensus" starts.

Thus, simple idea, chapters have a true/false display option like such

Chapters: [
{
"startTime": 107,
"title": "chap1",
"index": 1,
"display": true
},
]

Cheers