Yes. This is in principle not different from using it on a single video: a startTime and an endTime must be given for each video and applied when the video is loaded/played.
Let’s expand slightly the idea. You can have 2 use cases:
In this case, you can apply the Clip API without any further precaution or modification. You can find an example at the page Video clipping in THEOplayer (see below). Please remember to make sure that clipping happens after the source is set (e.g.: use a durationchange
event).
In this case, some adjustment is needed to be able to provide and read the right custom start and end time for each content. One possible way to do it is to simply pass such data together with the source data and read it directly from there when clipping the video, like in the example below.
// an array is provided, containing multiple player.source. Each source contains startTime and endTime.
var playlist = [
{
source: {
sources: {
src: "https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny_metadata.m3u8",
startTime: 100,
endTime: 150,
},
title: "Big Buck Bunny",
description: "Big Buck Bunny",
poster: "https://cdn.theoplayer.com/video/big_buck_bunny/poster.jpg",
},
},
{
source: {
sources: {
src: "https://cdn.theoplayer.com/video/star_wars_episode_vii-the_force_awakens_official_comic-con_2015_reel_(2015)/index.m3u8",
startTime: 120,
endTime: 180,
},
title: "Star Wars Reel",
description: "Star Wars Reel",
poster:
"https://cdn.theoplayer.com/video/star_wars_episode_vii-the_force_awakens_official_comic-con_2015_reel_(2015)/poster.jpg",
},
},
{
source: {
sources: {
src: "https://cdn.theoplayer.com/video/tears_of_steel/index.m3u8",
startTime: 50,
endTime: 150,
},
title: "Tears of Steel",
description: "Tears of Steel",
poster: "https://cdn.theoplayer.com/video/tears_of_steel/poster.jpg",
},
},
]
// the desired source is set in the player -
// this is not reported here as it depends on your implementation,
// but an example can be seen in the resources linked below.
// For the purpose of this example
// player.source = playlist[0];
// the following lines make sure that
// when the first playing event is fired for each (new) content
// clipping times are read from directly within the player.source
function firstplaying() {
player.clip.startTime = player.source.sources.startTime
player.clip.endTime = player.source.sources.endTime
THEOplayer.players[0].removeEventListener("durationchange", firstplaying)
}
THEOplayer.players[0].addEventListener("sourcechange", function () {
THEOplayer.players[0].removeEventListener("durationchange", firstplaying)
THEOplayer.players[0].addEventListener("durationchange", firstplaying)
})
Notes:
The following resources provide more information:
API reference - Clip API
Clipping - How-to guide