• Skip to content
  • Skip to primary sidebar
  • Skip to footer

Foliovision

Making the web work for you

Main navigation

  • Weblog
    • FV Player
    • WordPress
    • Video of the Week
    • Case Studies
    • Business
  • About
    • Testimonials
    • Meet the Team
    • We Support
    • Careers
    • Contact
    • Pricing
  • Products
  • Support
    • FV Player Docs
    • Pro Support
  • Login
  • Basket is empty
Affordable VAST/VPAID for Wordpress has arrived. Serve ads with your videos starting today!
    • Docs
      • Installation
      • Configuration
      • User guide
      • Downgrading
      • Changelog
    • FAQ
    • Support
      • Free Support
      • Pro Support
    • PRO

    Timeline Previews

    In this guide you will find:

    • What are Timeline Previews
    • Timeline previews with FV Player Coconut
    • Creating the VTT file and Sprite Image
    • How to Insert Timeline Previews into FV Player Pro

    What are Timeline Previews

    Timeline previews, also called preview thumbnails, are small compressed pictures that pop up when you hover over the timeline, showing you what is in the exact moment of the video. This feature gives you the ability to quickly browse through the content of a video without having to guess by clicking and waiting for the video to load again. Timeline previews come in handy especially for longer videos.


    Preview thumbnail of 02:14 while the video is stopped at 00:02
     

    This feature is only available for users of FV Player Pro. FV Player Pro uses previews obtained from VTT files. Therefore, you will have to get and insert the VTT files into the shortcode editor.

    There are two ways to do this: 

    Timeline previews with FV Player Coconut

    If you are encoding your videos via FV Player Coconut, timeline previews get created and loaded up automatically. Therefore, if you do not wish to use timeline previews in a given video encoded by FV Player Coconut, you will have to erase the .vtt file from the video editor manually. 

    DEMO:

    video
    Link

    Creating the VTT File and Sprite Images

    If you are not using FV Player Coconut, you can insert the files manually. We advise you use services or software to create these files. It is better not to create these files manually, as having to screenshot your videos to create sprite images and write an VTT file pointing to them is not only incredibly time consuming, but absolutely unnecessary too.

    You can use software, such as Video Thumbnails Maker, Thumbnailme or AMT. These services will scan and automatically create both sprite images and VTT files that link to them.

    In the context of timeline previews, sprite image is a collage of frames, from which the VTT file can fetch the preview images and give them the correct timing and size. It saves you the space of having to upload each one separately.


    A sprite image

    VTT format is easy to comprehend and can be authored by a simple text editor. This is what the beginning of the VTT file for the video underneath looks like. These entries are the coordinates to first 4 pictures in the sprite image:

    WEBVTT
    
    1
    00:00:00.000 --> 00:00:01.000
    160p-00001.jpg#xywh=0,0,284,160
    
    2
    00:00:01.000 --> 00:00:02.000
    160p-00001.jpg#xywh=284,0,284,160
    
    3
    00:00:02.000 --> 00:00:03.000
    160p-00001.jpg#xywh=568,0,284,160
    
    4
    00:00:03.000 --> 00:00:04.000
    160p-00001.jpg#xywh=852,0,284,160
    

    This one links to the sprite image above, called “160-p-0001.jpg”, which is hosted in the WordPress library of the same site. The first two numbers are the coordinates to the frame in a sprite image, the other two are size dimensions of the preview image.

    If you were to link the VTT file to an externally hosted picture, you would link it to a web address.

    Then you just upload the generated VTT file and sprite images to your WordPress media library, or upload it somewhere else and insert the link.

    Note: If you need to load the previews from a different domain than your website, you will need to enable CORS headers on it. You will learn how to do that in this guide.

    DEMO:

    video
    Link

    How to Insert Timeline Previews into FV Player Pro

    To upload or insert the link to your VTT file, open the FV Player Pro shortcode editor and go to the Subtitle tab. 


    Timeline previews in the FV Player shortcode editor

    If you encode your videos with FV Player Coconut, there will already be a link to the .vtt file. Otherwise, insert your link into the field or click “Add VTT” and upload your file. 

    Share
    Tweet
    Share
    0 Shares

    Reader Interactions

    Primary Sidebar

    Advanced

    1. Download | Buy
    2. Basic Setup
    3. FV Player Demos
    4. Advanced
      1. Troubleshooting Javascript Errors
      2. How to use FV Player Database
      3. How to use FV Player Widget
      4. Integrations/Compatibility Options
      5. Setting up Video Custom Fields
      6. Timeline Previews
      7. Using Google Universal Analytics
      8. Using Google Analytics 4 with FV Player
      9. Using Matomo Analytics with FV Player
      10. AB Loop Function
      11. How to Use Subtitles
      12. How to Use Multiple Audio Tracks with FV Player
      13. Interactive Video Transcript
      14. Using LearnDash And Video Progression with FV Player
      15. How to Use Custom Start/End Time
      16. Optimizing FV Player Loading
      17. Sticky Video
      18. CSS Tips and Fixes
      19. Using FV Player with Minify Plugins
      20. How To Use FV Player With Tutor LMS
      21. How to Use the Speed Buttons
      22. Using FV Player with Chromecast
      23. Using FV Player with Sub-domains and Multi-Domains
      24. FV Player Profile Videos
      25. Using Video SEO With FV Player Videos
      26. Video Downloading With Simple History Support
      27. Email Subscription Form Pop-ups
      28. How to create membership site with RCP and FV Player
      29. Using FV Player With AMP
      30. How To Use The Shortcode Conversion tool
      31. Popular Membership Plugins Compatible with FV Player
      32. Staging Sites For Developers
      33. Programmer's Guide
      34. Setting Up the HTML Pop-up Feature
      35. Changelog
      36. Incompatible Plugins and Scripts
    5. Video Hosting
    6. Securing Your Video
    7. Ads
    8. VAST/VPAID Ads
    9. Additional Services
    10. Legal
    11. Settings
    12. FV Player Pay Per View

    Footer

    Our Plugins

    • FV WordPress Flowplayer
    • FV Thoughtful Comments
    • FV Simpler SEO
    • FV Antispam
    • FV Gravatar Cache
    • FV Testimonials

    Free Tools

    • Pandoc Online
    • Article spinner
    • WordPress Password Finder
    • Delete LinkedIn Account
    • Responsive Design Calculator
    Foliovision logo
    All materials © 2022 Foliovision s.r.o. | Panská 12 - 81101 Bratislava - Slovakia | info@foliovision.com
    • This Site Uses Cookies
    • Privacy Policy
    • Terms of Service
    • Site Map
    • Contact
    • Tel. +1 518 412 4600

    We are using cookies to give you the best experience on our website.

    You can find out more about which cookies we are using or switch them off in settings.

    Powered by  GDPR Cookie Compliance
    Privacy Overview

    This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

    Necessary Cookies

    Strictly Necessary Cookie allow you to log in and download your software or post to forums.

    We use the WordPress login cookie and the session cookie.

    If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

    Support Cookies

    Foliovision.com uses self-hosted Rocket.chat and self-hosted Freescout support desk to provide support for FV Player users. These cookies allow our visitors to chat with us and/or submit support tickets.

    We are delighted to recommend self-hosted Rocket.chat and especially Freescout to other privacy-conscious independent publishers who would prefer to self-host support.

    Please enable Strictly Necessary Cookies first so that we can save your preferences!

    3rd Party Cookies

    This website uses Google Analytics and Statcounter to collect anonymous information such as the number of visitors to the site, and the most popular pages.

    Keeping this cookie enabled helps us to improve our website.

    We reluctantly use Google Analytics as it helps us to test FV Player against popular Google Analytics features. Feel free to turn off these cookies if they make you feel uncomfortable.

    Statcounter is an independent Irish stats service which we have been using since the beginning of recorded time, sixteen years ago.

    Please enable Strictly Necessary Cookies first so that we can save your preferences!