chapter videos

[vc_row][vc_column][vc_empty_space height=”50px”][vc_column_text]

[/vc_column_text][/vc_column][/vc_row][vc_row type=”color” bg_color=”#e8e8e8″ vertical_align=”yes” column_gap=”no” padding_top=”” margin_top=”0″ margin_bottom=”0″ min_height=”220″][vc_column width=”1/2″][vc_empty_space height=”30px”][vc_column_text css=”.vc_custom_1447767126218{margin-bottom: -10px !important;}”]

Chapter and customize a video

[/vc_column_text][vc_column_text css=”.vc_custom_1447767304529{margin-right: 5% !important;}”]

Learn how to create and customize interactive menu in many ways (horizontally, with chapters)

[/vc_column_text][/vc_column][vc_column width=”1/2″][vc_empty_space height=”50px”][vc_column_text css=”.vc_custom_1447767203970{margin-left: 5% !important;}”]

[/vc_column_text][/vc_column][/vc_row][vc_row padding_top=””][vc_column width=”5/6″][vc_single_image image=”123″ img_size=”full” alignment=”center”][vc_empty_space height=”10px”][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

First step: Chapter interactive way for video

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text]Preparation of medias:

Initially, you will import your media library in your editor.

Here, we have created a progress bar (made by a black rectangle whose length adapts gradually), markers separating chapter (transparent background, each corresponding to a quarter of my scene) and a tooltip.

Also remember to prepare your text block of chapters and the content of your tooltips (if needed).

Follow the video tutorial ?.
Remember to activate subtitles on the video[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_video link=”https://vimeo.com/107920477″][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height=”50px”][vc_separator color=”custom” accent_color=”#e8e8e8″][vc_empty_space height=”30px”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

Create a progress bar depending on the length of each chapter

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text]Remember to activate subtitles on the video
[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_video link=”https://vimeo.com/107920479″][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height=”50px”][vc_separator color=”custom” accent_color=”#e8e8e8″][vc_empty_space height=”10px”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

Add a tooltip during a rollover on a chapter

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text]Remember to activate subtitles on the video
[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_video link=”https://vimeo.com/107920478″][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height=”50px”][vc_separator color=”custom” accent_color=”#e8e8e8″][vc_empty_space height=”10px”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

Small refinement: change the opacity of the chapter title being played

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text]Remember to activate subtitles on the video
[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_video link=”https://vimeo.com/107920480″][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width=”1/6″][vc_empty_space height=”50px”][vc_widget_sidebar sidebar_id=”sidebar-1″][/vc_column][/vc_row][vc_row padding_top=”0″ padding_bottom=”0″][vc_column][vc_empty_space][vc_single_image image=”132″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row type=”color” bg_color=”#e8e8e8″ vertical_align=”yes” column_gap=”no” padding_top=”” margin_top=”0″ margin_bottom=”0″ min_height=”220″][vc_column width=”1/3″][vc_empty_space][vc_column_text]

More
tutorials:

[/vc_column_text][/vc_column][vc_column width=”1/3″][vc_empty_space height=”65px”][vc_column_text]

[/vc_column_text][/vc_column][vc_column width=”1/3″][vc_empty_space height=”65px”][vc_column_text]

[/vc_column_text][/vc_column][/vc_row]

Saving

Log in with your credentials

or    

Forgot your details?