Introduction

THEOplayer supports playing only a selected part of a video-on-demand stream, rather than playing it from start to finish. This can be used for example to watch a single game-changing event from a sports match, highlight an important part of a long video presentation, or skip straight to the best part of a song's video clip.

API

The start and end of the clipping window can be controlled through the following properties of the player API:

  • startTime and endTime, expressed in seconds
  • startFrame and endFrame, expressed in number of frames of the active video quality

These properties are optional, and you don't need to specify both startTime and endTime. For example, you can set just startTime = 30 to have the video start at 30 seconds and play the rest of the video normally.

Basic setup

The following example shows a video clipped to start at 30 seconds and end at 60 seconds.

 
theoplayer.onReady = function () {
    var player = theoplayer.player(0);
    player.startTime = 30;
    player.endTime = 60;
};

Clipping in playlist

Clipping can also be used in playlists by specifying the same startTime/endTime or startFrame/endFrame properties on the playlist entry definition. See the playlists support page for details about configuring clipping in the playlist configuration.

The following example shows a playlist with two video clips. The first video is clipped using timestamps, the second video using frame numbers.

 
theoplayer.onReady = function () {
    var video = document.createElement('video');
    video.controls = 'controls';
    video.preload = 'auto';
    document.body.appendChild(video);

    var player = theoplayer(video, {
        playlist : {
            sources : [{
                src : '//cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny_metadata.m3u8',
                poster : '//cdn.theoplayer.com/video/big_buck_bunny/poster.jpg',
                title : 'Big Buck Bunny',
                startTime : 243.6,
                endTime : 275.9
            }, {
                src : '//cdn.theoplayer.com/video/star_wars_episode_vii-the_force_awakens_official_comic-con_2015_reel_(2015)/stream-2000/index.m3u8',
                poster : '//cdn.theoplayer.com/video/star_wars_episode_vii-the_force_awakens_official_comic-con_2015_reel_(2015)/poster.jpg',
                title : 'Star Wars Comic-Con 2015 Reel',
                startFrame : 1730,
                endFrame : 2325
           }]
        }
    });
};

Example: clipping for social sharing

An example use case could be to let your users generate a link to a particular clip in a video to share on social media. This allows users to directly link to their favorite part from one of your videos, and have their friends watch that part without having to seek through the video themselves.

One way of implementing this could be to generate a URL with additional GET parameters for the start and end time, and have your server-side code generate the appropriate in-line JavaScript to set up the requested clipping. For example, in PHP you could do something like this:

<script>
theoplayer.onReady = function () {
    var player = theoplayer.player(0);
    player.startTime = <?php echo $_GET['startTime'] ?>;
    player.endTime = <?php echo $_GET['endTime'] ?>;
};
</script>

Warning: the code example above is only for demonstration purposes. Injecting raw user input into in-line JavaScript can lead to cross-site scripting (XSS) exploits. It is recommended that your server-side code validates the GET parameters before injecting them, for example to make sure that the parameters actually represent a valid time.

Support Table

This feature is supported on all browsers supported by THEOplayer.

Internet Explorer 10+

Internet Explorer 10+

Firefox

Firefox

Chrome

Chrome

Safari

Safari

Opera

Opera

Edge

Edge

Windows Phone

Windows Phone

Android

Android

iOS

iOS

Vivaldi

Vivaldi