THEO Blog

Frame-Accurate Clipping in HLS: Share Your Best Moments

People love watching videos, but sometimes they don't have the time to watch a long video. They are looking for a quick answer from a how-to video, or want to watch the key points from a long presentation. People don't want to spend time finding the interesting bit: they just want to get straight to the point - especially on mobile. THEOplayer allows publishers to easily create and share only the interesting bit with their viewers using the newly added clipping feature.


Common clipping solutions

While many people will watch a football game live and in full, they don't want to re-watch the whole thing from start to finish the next day just to see the goals. This can be done by 'clipping' the video: playing only the part of the video between two points in time

However, doing this fast and efficient is not always an easy task for content publishers:

  • With common clipping solutions, publishers are required to generate a separate media asset for every clip they want to share with their viewers. This requires additional video processing, duplicates data in their video hosting solutions and leads to inefficient content distribution.
  • With a progressively downloaded MP4 video, users start downloading from the beginning of the file and must wait until the player has downloaded all data up to the time of their interest. This can be somewhat alleviated by using pseudo-streaming, where the player can add an offset parameter to the request (e.g. as a HTTP byte range request) to only request the data starting at the desired time point. However, this requires support from the server for such requests.
  • With VOD (Video-On-Demand) content in HLS, the player can already seek quickly to any point in a video and only download the necessary data. This allows users to seek to the time of the goal and start watching right away. No additional server support is required, just a regular HTTP server will do. However, users still need to find and seek to the correct time, and the player will keep downloading data beyond the end of the interesting part.

Clipping with THEOplayer

THEOplayer's new clipping feature (available in the latest version 1.6) allows for fast, efficient and frame-accurate clipping in HLS video-on-demand streams. Publishers can specify a start time and end time for the clip, which causes the player to limit video playback between these two times. The player will immediately seek to the start of the clip, and will only download data for HLS fragments that are part of the clip.

This approach provides multiple advantages both for the viewer and the publisher:

  • Easily share with viewers the most interesting parts of longer HLS videos.
  • Viewers can immediately start watching the highlighted part of the video, without having to seek back and forth in the video.
  • Publishers can create frame-accurate clips using their original HLS stream, without having to manually re-encode a clipped version of their original video for every clip.
  • Only the parts of the video belonging to the clip are downloaded, which saves bandwidth for both the viewer and the publisher.
  • The timeline on the control bar of THEOplayer is automatically trimmed (pre- and post-clip are removed), showing to the viewer only the relevant clipped section of the original media source.
Combine clipping with other THEOplayer features to create stunning user experiences, such as:
  • Creating a list of the top 5 highlights of this week's football games, by using clipping in playlist.
  • Creating a perfect loop using frame-accurate start and end points, by using start and end frames and configuring the player to loop.

Example

Configuring clipping is as simple as setting startTime and endTime properties with the desired start and end times. Alternatively, the start and end points of the clip can be specified in number of frames with startFrame and endFrame, allowing for frame-accurate control over the clip.

How does frame-accurate clipping work
The illustrated example can be realized with the following simple code snippet:

<video controls src="http://mysite.com/path/to/myvideo.m3u8" />
<script>
theoplayer.onReady = function () {
var player = theoplayer.player(0);
player.startTime = 10;
player.endTime = 30;
};
</script>

For more information on how to use clipping, visit the THEOplayer documentation.

Get Started


Find the best moments with THEOplayer's frame seeking tool

Subscribe by email