A Simple Way to Display Optimal Segment from your Videos

Creating engaging and informative content requires marketers and developers to capture users' attention within seconds. Short videos are perfect for this purpose.

Perfect, but challenging due to the costly and complicated production process, including capturing, editing, storage, and distribution.

With TwicPics, storage and distribution challenges are greatly simplified: one single master file is used to generate the necessary variants (format, size and aspect ratio) for optimal display on all possible devices.

In addition, if you're a TwicPics Components user, you effortlessly display short videos while applying best practices: CLS optimization, LQIP, pixel perfect, smart crop and compression.

However, short videos can sometimes be too lengthy or include irrelevant information. This can lead to disinterest and disengagement among viewers.

It's then crucial to be able to select the most relevant parts of a video without the need for additional editing using complicated third-party software.

Since version 0.17.3, the TwicVideo component provides the ability to select a specific video section for display.

Let's see how to make use of this feature.

Display a short video with TwicVideo Component

Videos used here are:

• https://assets.twicpics.com/videos/demo-twicpics/purple-shirt.mp4 (mp4 - 1280 x 720 px - 3.7MB)
• https://assets.twicpics.com/videos/demo-twicpics/skater.mp4 (mp4 - 1280 x 720 px - 8.51MB)
• https://assets.twicpics.com/videos/demo-twicpics/skater-standing.mp4 (mp4 - 1280 x 720 px - 2.2MB)

As a reminder, displaying a video with the TwicVideo component is as simple as:

import { TwicVideo } from '@twicpics/components/react'
export const TwicSample = () => {
  return (
    <main>
      <TwicVideo
        src="video/purple-shirt.mp4"
        intrinsic="1280x720" /* master intrinsic size: avoids upscaling and improves performance */
      />
    </main>
  )
}

Here we get a squared variant of our master video file. The result is ideally compressed. Its dimensions are adjusted to the display context (dimensions and pixel density). The CLS is optimized and a LQIP improves the user experience when the playback starts.

One master file to rule them all?

Without modifying the intrinsic framing of our master video file, we can change its rendered aspect ratio by simply specifying the value of the ratio property, just as:

import { TwicVideo } from '@twicpics/components/react'
export const TwicSample = () => {
  return (
    <main>
      <TwicVideo
        src="video/purple-shirt.mp4"
        ratio="2.35" /* displays video with a cinemascope aspect-ratio */
        intrinsic="1280x720" /* master intrinsic size: avoids upscaling and improves performance */
      />
    </main>
  )
}

This time we get a wide format video. It has been smartly and automatically cropped.

Here is an example of using the same master video file with 4 different renders:

Nice but if we look at the latest version, the area of interest goes outside the box from the eleventh second. This is where we should modify the portion of video to be displayed using new TwicVideo properties.

One master file to rule them all

The properties of the TwicVideo that allow to select the displayed part of the video are :

• from: moves the starting point of the video
• to: moves the end point of the video
• duration: limits the duration of the video

Expected values for these props are expressed in seconds and must be positive.

Let's take the last variant.

In order to cut the part that goes outside the field let's modify it as follows:

import { TwicVideo } from '@twicpics/components/react'
export const TwicSample = () => {
  return (
    <main>
      <TwicVideo
        src="video/purple-shirt.mp4"
        preTransform="focus=50px30p/crop=300x300"
        intrinsic="1280x720" /* master intrinsic size */
        from="3" /* start playing the video at the 3rd second */
        to="10.5" /* end at 10.5 seconds */
      />
    </main>
  )
}

And that's it:

Here we get 2 variants of the same master file. 2 variants with their own timeline.

This way we have been able to remove the area that was going out of the tightened frame, without having to produce a specific master file.

Another use case

Being able to exclude a bad framing from the display is interesting. But we can also imagine another use case for properties from, to and duration.

Something like that:

Here we have created teasing videos menu where each thumbnail displays a shortened timeline. Once a video is selected, it plays in its entirety.

This example allows us to present the 4th property added in version 0.17.3 of TwicVideo, namely posterFrom.

posterFrom determines which frame of the source video should be used as a poster/preview.

As in:

import { TwicVideo } from '@twicpics/components/react'
export const TwicSample = () => {
  return (
    <main>
      <TwicVideo
        src="video/purple-shirt.mp4"
        preTransform="focus=50px30p/crop=300x300"
        intrinsic="1280x720" /* master intrinsic size */
        from="6" /* start playing the video at the 6th second */
        duration="3" /* playing the video for a duration of 3 seconds */
        posterFrom="8" /* display the frame corresponding to the 8th second as LQIP */
      />
    </main>
  )
}

Conclusion

Since version 0.17.3, TwicVideo allows to select the part of a video to be displayed. In addition, it is also possible to choose the image displayed as a placeholder.

By utilizing the duration, from, to, and posterFrom property, marketers and developers can ensure their videos are engaging and relevant, reducing the risk of disinterest or distraction among users. All from a single master video file, reducing storage, transfer and editing costs.

If you want to learn more about the challenges of posting video content, this article is a wealth of information.

Finally, feel free to check out our live demos. The demos showcase a variety of additional features available through TwicPics Components.

TwicPics Components are free and open-source. Don't hesitate to test them for yourself. The only requirement to use them is to have a TwicPics account. If you don't already have one, you can easily create your own TwicPics account for free.