They Tell a Tale

This is a same-name project of TzChien慈謙's song, They Tell a Tale, for designing an interactive MV. You can see the short demo here. For the whole story, please go tzchien.com to experience it.

The interactive MV is composed by several video pieces and questions prompted to audiences. The story of MV varies from person to person, depending on the user's answers.

How to compose your own MV

You need to structure the storyline as a tree.

         +- D
    +- B +
    |    +- E
 A -+
    |    +- E (Link to same node is available)
    +- C +
         +- B (Use same chunk is available)
         |
         +- A (Loop is available)

Each node(A, B, ..) is a small video file and every fork comes with a option for user to choose a branch, so the storyline goes by one path. More specifically, you need to define two type of nodes. One is video, and the other is a option. The video node is defined as:

video1 : {
  source : 'path/to/file.mp4',
  next : 'option1',
},

While the option node is defined as:

option1 : {
  text : 'Do you like it?',
  next : {
    Yes : 'video2',
    No : 'video3',
  },
  duration : 3000,
},

The setting is intuitive. The video1 and option1 are the id of nodes. If source is defined in the node, then it's video node. On the other hand, the text is necessary to be set for option node.

Next node

The next must be the id of some node for the video node, while it could be id or dictionary of id for the option node. If it's a dictionary, then it is a map to link options to its corresponding next node. Take option1 above as an example, the next node is video2/video3 when the answer is Yes/No.

There is no restriction for linking nodes. You can link video to video, video to option, option to video, or option to option.

Default next

The id of the first pair in the dictionary is the default id of next node.

Duration for option node

There is a duration setting for option node to limit the displayed time. If the duration is set to 3000, then this option will be displayed 3000ms and then jump to the next node directly.

Background video for option node

You can set a background video played during the option is displaying. Please see the backgroundVideo in the story.js.

Languages

You need to provide different sources for different languages. Remember to define the corresponding css for its font and modify the story.js to set this pair.

Examples

Please see the story.js and following source.js

• en-US
• zh-TW

Converting videos into MP4 format

ffmpeg.sh is used to convert video files into MP4 format. Put ffmpeg.sh with all the videos that need to be converted into a folder, then go to the folder and run bash ffmpeg.sh. The MP4 videos will be created after running the script.