{"id":1962,"date":"2026-08-21T11:13:57","date_gmt":"2026-08-21T11:13:57","guid":{"rendered":"https:\/\/documentation.iqonic.design\/streamit-laravel\/?p=1962"},"modified":"2026-08-21T11:36:11","modified_gmt":"2026-08-21T11:36:11","slug":"how-smart-seek-works","status":"publish","type":"post","link":"https:\/\/documentation.iqonic.design\/streamit-laravel\/how-smart-seek-works\/","title":{"rendered":"How Smart Seek Works?"},"content":{"rendered":"
\n
\n\n\n\n

1. Overview<\/h2>\n\n\n\n

Smart Seek adds hover and drag preview thumbnails to the video seek bar, providing the same familiar experience found on platforms such as Netflix and YouTube.<\/p>\n\n\n\n

As viewers move along the progress bar, a preview image appears showing the scene at that point in the episode before they release the seek control.<\/p>\n\n\n\n

This makes it easier to navigate through an episode without relying only on timestamps, which is particularly useful for short-drama content where viewers frequently skip ahead to find a specific scene.<\/p>\n\n\n\n

\n\n\n\n

2. Key Highlights<\/h2>\n\n\n\n

Instant Scene Preview<\/h3>\n\n\n\n

Viewers see a preview thumbnail while dragging or hovering over the progress bar instead of only seeing a timestamp.<\/p>\n\n\n\n

Built for Vertical Video<\/h3>\n\n\n\n

Preview tiles are generated in portrait orientation by default, matching the 9:16<\/strong> format commonly used by short-drama content.<\/p>\n\n\n\n

Scales to Episode Length<\/h3>\n\n\n\n

The system automatically determines an appropriate number of preview frames based on the episode duration.<\/p>\n\n\n\n

Short episodes receive enough frames for smooth navigation, while longer episodes are capped to avoid unnecessary processing.<\/p>\n\n\n\n

Zero Impact on Initial Load Time<\/h3>\n\n\n\n

Preview images and timing data are fetched only when the viewer first interacts with the seek bar. They are not loaded during the initial player page load.<\/p>\n\n\n\n

Independent of Playback Quality<\/h3>\n\n\n\n

Smart Seek operates separately from the main video playback system.<\/p>\n\n\n\n

It does not affect:<\/p>\n\n\n\n

    \n
  • Adaptive streaming<\/li>\n\n\n\n
  • Video quality<\/li>\n\n\n\n
  • Buffering<\/li>\n\n\n\n
  • Playback performance<\/li>\n\n\n\n
  • The main video engine<\/li>\n<\/ul>\n\n\n\n

    Retroactive Processing<\/h3>\n\n\n\n

    Administrators can enable Smart Seek for an already-published episode and process only the preview data without re-encoding the original video.<\/p>\n\n\n\n

    Standards-Based Implementation<\/h3>\n\n\n\n

    Smart Seek uses a sprite sheet + WebVTT<\/strong> approach, making the generated preview data lightweight, easy to inspect, and straightforward to extend.<\/p>\n\n\n\n

    \n\n\n\n

    3. How It Works<\/h2>\n\n\n\n

    Smart Seek processing follows these steps:<\/p>\n\n\n\n

    Step 1: Trigger<\/h3>\n\n\n\n

    After the episode’s video, audio, and subtitle processing is completed, Smart Seek generation runs as an additional processing step when the feature is enabled for the episode.<\/p>\n\n\n\n

    Step 2: Sample Frames<\/h3>\n\n\n\n

    The server extracts still frames from the video at regular intervals.<\/p>\n\n\n\n

    The default interval is approximately 3 seconds<\/strong>, with adjustments for short clips and a maximum frame limit for very long episodes.<\/p>\n\n\n\n

    Step 3: Generate the Preview Sprite Sheet<\/h3>\n\n\n\n

    The extracted frames are combined into a single sprite-sheet image instead of being stored and delivered as individual image files.<\/p>\n\n\n\n

    Step 4: Generate WebVTT Timing Data<\/h3>\n\n\n\n

    A WebVTT file maps each point in the video timeline to the corresponding rectangular area of the sprite sheet.<\/p>\n\n\n\n

    This allows the player to determine which portion of the preview image should be displayed for a specific timestamp.<\/p>\n\n\n\n

    Step 5: Publish Preview Assets<\/h3>\n\n\n\n

    The generated sprite sheet and WebVTT timing file are stored with the episode’s processed output and served alongside the video stream.<\/p>\n\n\n\n

    Step 6: Display the Preview<\/h3>\n\n\n\n

    When a viewer first hovers over or drags the seek bar:<\/p>\n\n\n\n

    1. The browser loads the WebVTT timing data.<\/p>\n\n\n\n

    2. The player determines the appropriate preview frame.<\/p>\n\n\n\n

    3. The corresponding section of the sprite sheet is displayed.<\/p>\n\n\n\n

    4. The viewer sees the scene preview together with the current timestamp.<\/p>\n\n\n\n

    Because the frames are stored in a single sprite sheet, the player does not need to request a separate image for every preview point.<\/p>\n\n\n\n

    \n\n\n\n

    4. Setup & Usage<\/h2>\n\n\n\n

    Smart Seek uses the same FFmpeg installation<\/strong> required by the Short Drama transcoding system.<\/p>\n\n\n\n

    No additional server-side software is required.<\/p>\n\n\n\n

    If FFmpeg is already configured correctly for transcoding, Smart Seek can be enabled without installing additional dependencies.<\/p>\n\n\n\n

    Enabling Smart Seek on an Episode<\/h3>\n\n\n\n

    1. Go to Short Drama \u2192 Episodes \u2192 Create<\/strong> or edit an existing episode.<\/p>\n\n\n\n

    2. Under Processing Options<\/strong>, enable:Enable smart seek (timeline hover previews)<\/strong>
    <\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    3. Save the episode.<\/p>\n\n\n\n

      \n
    • For a new episode, Smart Seek runs as part of the normal processing workflow.<\/li>\n\n\n\n
    • For an existing published episode, saving triggers lightweight preview processing without re-encoding the video.<\/li>\n<\/ul>\n\n\n\n

      4. Wait for processing to complete.<\/p>\n\n\n\n

      5. Open the episode’s watch page and move the cursor over or drag the seek bar.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      6. Confirm that the preview thumbnail appears at different points on the timeline.<\/p>\n\n\n\n

      Viewer Experience<\/h3>\n\n\n\n

      No additional action is required from viewers.<\/p>\n\n\n\n

      When Smart Seek is enabled for an episode:<\/p>\n\n\n\n

        \n
      • Desktop users can hover over the progress bar.<\/li>\n\n\n\n
      • Users can drag the progress bar to preview different scenes.<\/li>\n\n\n\n
      • A preview thumbnail is displayed together with the corresponding timestamp.<\/li>\n<\/ul>\n\n\n\n
        \n\n\n\n

        5. Configuration Settings<\/h2>\n\n\n\n

        Smart Seek provides optional .env<\/code> configuration values.<\/p>\n\n\n\n

        The feature works with the default values if these settings are not customized.<\/p>\n\n\n\n

        Setting (.env<\/code> key)<\/th>Default<\/th>Description<\/th><\/tr><\/thead>
        SHORT_DRAMA_SMART_SEEK_INTERVAL<\/code><\/td>3<\/code> seconds<\/td>Interval between captured preview frames. Lower values create more granular previews but increase processing requirements.<\/td><\/tr>
        SHORT_DRAMA_SMART_SEEK_MIN_FRAMES<\/code><\/td>24<\/code><\/td>Minimum number of preview frames generated, including for very short episodes.<\/td><\/tr>
        SHORT_DRAMA_SMART_SEEK_MAX_FRAMES<\/code><\/td>120<\/code><\/td>Maximum number of preview frames generated to limit processing time for long episodes.<\/td><\/tr>
        SHORT_DRAMA_SMART_SEEK_ORIENTATION<\/code><\/td>vertical<\/code><\/td>Preview tile orientation. vertical<\/code> is recommended for portrait short-drama content.<\/td><\/tr>
        SHORT_DRAMA_SMART_SEEK_WIDTH<\/code><\/td>108<\/code> px<\/td>Width of each preview tile.<\/td><\/tr>
        SHORT_DRAMA_SMART_SEEK_HEIGHT<\/code><\/td>192<\/code> px<\/td>Height of each preview tile. The default dimensions provide a 9:16 aspect ratio.<\/td><\/tr>
        SHORT_DRAMA_SMART_SEEK_COLUMNS<\/code><\/td>4<\/code><\/td>Number of preview tiles placed in each row of the sprite sheet.<\/td><\/tr>
        SHORT_DRAMA_SMART_SEEK_QUALITY<\/code><\/td>4<\/code><\/td>JPEG quality setting used when generating preview frames. Lower values provide higher quality with the configured FFmpeg behavior.<\/td><\/tr>
        SHORT_DRAMA_SMART_SEEK_CLEANUP_FRAMES<\/code><\/td>true<\/code><\/td>Removes individual sampled frames after they have been combined into the sprite sheet, retaining only the final preview assets.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
        \n\n\n\n

        6. Limitations & Notes<\/h2>\n\n\n\n

        Per-Episode Configuration<\/h3>\n\n\n\n

        Smart Seek must be enabled individually for each episode.<\/p>\n\n\n\n

        There is currently no global switch for automatically enabling Smart Seek across the entire catalog.<\/p>\n\n\n\n

        FFmpeg Dependency<\/h3>\n\n\n\n

        Smart Seek depends on the same FFmpeg installation used by the Short Drama transcoding system.<\/p>\n\n\n\n

        If FFmpeg is not configured correctly, Smart Seek processing will fail in the same way as other FFmpeg-based processing tasks.<\/p>\n\n\n\n

        Previously Processed Episodes<\/h3>\n\n\n\n

        Episodes processed before Smart Seek was enabled will not automatically contain preview assets.<\/p>\n\n\n\n

        However, Smart Seek can be enabled later and processed without re-encoding the original video.<\/p>\n\n\n\n

        Very Short Episodes<\/h3>\n\n\n\n

        Very short episodes are subject to the configured minimum frame count.<\/p>\n\n\n\n

        As a result, preview frames may be generated closer together than the configured interval.<\/p>\n\n\n\n

        Additional Storage<\/h3>\n\n\n\n

        The generated sprite sheet and WebVTT timing file add a small amount of storage per episode.<\/p>\n\n\n\n

        With the default configuration, the combined preview assets are typically well under 1 MB per episode<\/strong>, depending on the episode content and generated image data.<\/p>\n\n\n\n

        \n\n\n\n

        7. Processing Flow<\/h2>\n\n\n\n
        \"\"<\/figure>\n\n\n\n
        \n\n\n\n

        8. Storage & Playback Behavior<\/h2>\n\n\n\n

        Smart Seek generates two primary assets:<\/p>\n\n\n\n

        Sprite Sheet<\/h3>\n\n\n\n

        Contains multiple preview frames arranged into a single image.<\/p>\n\n\n\n

        WebVTT File<\/h3>\n\n\n\n

        Contains the timing information required to associate each video timestamp with a specific region of the sprite sheet.<\/p>\n\n\n\n

        During playback, these assets remain separate from the primary video stream.<\/p>\n\n\n\n

        Therefore, enabling Smart Seek does not modify the original video files or adaptive streaming playlists.<\/p>\n\n\n\n

        \n\n\n\n

        9. Performance Considerations<\/h2>\n\n\n\n

        Smart Seek is designed to keep additional processing and playback overhead low.<\/p>\n\n\n\n

        During Processing<\/h3>\n\n\n\n

        The system:<\/p>\n\n\n\n

          \n
        • Extracts only the required number of preview frames.<\/li>\n\n\n\n
        • Limits the total number of frames using the configured maximum.<\/li>\n\n\n\n
        • Combines frames into a sprite sheet.<\/li>\n\n\n\n
        • Removes temporary individual frames when cleanup is enabled.<\/li>\n<\/ul>\n\n\n\n

          During Playback<\/h3>\n\n\n\n

          The system:<\/p>\n\n\n\n

            \n
          • Does not load preview assets during the initial page load.<\/li>\n\n\n\n
          • Loads the timing information when the viewer interacts with the seek bar.<\/li>\n\n\n\n
          • Uses a single sprite sheet instead of requesting individual images for every timestamp.<\/li>\n<\/ul>\n\n\n\n

            This keeps Smart Seek independent from the main streaming and playback pipeline.<\/p>\n\n\n\n

            \n\n\n\n

            10. Troubleshooting<\/h2>\n\n\n\n

            Preview Does Not Appear<\/h3>\n\n\n\n

            Check the following:<\/p>\n\n\n\n

            1. Confirm that Enable smart seek<\/strong> is enabled for the episode.<\/p>\n\n\n\n

            2. Confirm that episode processing has completed successfully.<\/p>\n\n\n\n

            3. Verify that FFmpeg is configured correctly.<\/p>\n\n\n\n

            4. Check whether the Smart Seek processing job completed successfully.<\/p>\n\n\n\n

            5. Clear the browser cache and reload the watch page.<\/p>\n\n\n\n

            6. Verify that the generated WebVTT and sprite-sheet assets exist in the episode’s processed output.<\/p>\n\n\n\n

              \n
            1. <\/li>\n<\/ol>\n\n\n\n

              Processing Fails<\/h3>\n\n\n\n

              If Smart Seek processing fails:<\/p>\n\n\n\n

              1. Check the application logs.<\/p>\n\n\n\n

              2. Verify FFmpeg availability.<\/p>\n\n\n\n

              3. Verify that the processed video file exists and is readable.<\/p>\n\n\n\n

              4. Check storage permissions.<\/p>\n\n\n\n

              5. Verify available disk space.<\/p>\n\n\n\n

              6. Confirm that the configured Smart Seek values are valid.<\/p>\n\n\n\n

                \n
              1. <\/li>\n<\/ol>\n\n\n\n

                Video Playback Is Unaffected<\/h3>\n\n\n\n

                A Smart Seek processing failure does not require re-encoding the original video.<\/p>\n\n\n\n

                Smart Seek is an additional preview feature and operates independently of the primary video playback pipeline.<\/p>\n\n\n\n

                \n\n\n\n

                11. Conclusion<\/h2>\n\n\n\n

                Smart Seek provides a platform-grade scrubbing experience for Short Drama episodes by displaying visual scene previews while viewers navigate the timeline.<\/p>\n\n\n\n

                It:<\/p>\n\n\n\n

                  \n
                • Uses the existing FFmpeg infrastructure.<\/li>\n\n\n\n
                • Supports portrait 9:16<\/strong> preview tiles.<\/li>\n\n\n\n
                • Generates lightweight sprite-sheet preview assets.<\/li>\n\n\n\n
                • Uses WebVTT for timeline mapping.<\/li>\n\n\n\n
                • Loads preview data only when required.<\/li>\n\n\n\n
                • Does not affect adaptive streaming or playback quality.<\/li>\n\n\n\n
                • Can be enabled retroactively for existing episodes.<\/li>\n\n\n\n
                • Requires no additional server software.<\/li>\n<\/ul>\n\n\n\n

                  Smart Seek can therefore be enabled across the catalog without modifying or re-encoding the original video content, while giving viewers a significantly more intuitive way to navigate through episodes.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

                  1. Overview Smart Seek adds hover and drag preview thumbnails to the video seek bar, providing the same familiar experience found on platforms such as Netflix and YouTube. As viewers move along the progress bar, a preview image appears showing the scene at that point in the episode before they release the seek control. This […]<\/p>\n","protected":false},"author":11,"featured_media":0,"parent":1880,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1962","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"featured_image_src":null,"author_info":{"display_name":"laraveladminiq","author_link":"https:\/\/documentation.iqonic.design\/streamit-laravel\/author\/laraveladminiq\/"},"children":[],"_links":{"self":[{"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/posts\/1962","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/comments?post=1962"}],"version-history":[{"count":3,"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/posts\/1962\/revisions"}],"predecessor-version":[{"id":1975,"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/posts\/1962\/revisions\/1975"}],"up":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/posts\/1880"}],"wp:attachment":[{"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/media?parent=1962"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/categories?post=1962"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/tags?post=1962"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}