How to add Subtitles, Caption, Chapters and Descriptions in jwplayer video

Question: What is Subtitles, Captions, Chapters and Descriptions?
Subtitles: Translation of the dialogue like movie subtitles.
Captions: Similar to Subtitles but may include sound effects.
Chapters: Display the marker in video player bar to help the user for navigation.
Descriptions Or thumbnails: Similar to Subtitles but may include sound effects.


Question: How to add Subtitles, Captions, Chapters and Descriptions in JwPlayer?

 
<script src="//content.jwplatform.com/libraries/bFyELn2w.js"></script>
<div id="videoPlayerId2">
</div>
<script type="text/javascript">
    var playerObj = jwplayer("videoPlayerId2"); 
    playerObj.setup({
        image: "//content.jwplatform.com/thumbs/q1fx20VZ-640.jpg",
        file: "//content.jwplatform.com/videos/q1fx20VZ-640.mp4",
        tracks: [            
            
            /* subtitle **/
            {file: '//content.jwplatform.com/tracks/XtwSLSdq.txt',kind: 'subtitles'},
            
            /* captions **/
            {file: '//content.jwplatform.com/tracks/XtwSLSdq.txt',kind: 'captions'},
            
            /* Chapters **/
            {file: '//content.jwplatform.com/tracks/XtwSLSdq.txt',kind: 'chapters'},
            
            /* Descriptions **/
            { file: "//content.jwplatform.com/strips/3p683El7-120.vtt", kind: "thumbnails" },
            

        ],
        width: 640,
        height: 400
    }); 
</script> 

Demo

Question: Give the chapter sample file?

1
00:00:00,000 --> 00:01:42,000
Opening credits

2
00:01:42,000 --> 00:04:44,000
A dangerous quest

3
00:04:44,000 --> 00:05:50,000
The attack

4
00:05:50,000 --> 00:08:24,000
In pursuit

5
00:08:24,000 --> 00:10:13,000
Showdown in the cage

6
00:10:13,000 --> 00:12:24,000
Eye to eye

7
00:12:24,000 --> 00:14:48,000
Ending Credits

Question: Give the subtitle/captions sample file?

1
00:00:00,000 --> 00:01:42,000
Opening credits

2
00:01:42,000 --> 00:04:44,000
A dangerous quest

3
00:04:44,000 --> 00:05:50,000
The attack

4
00:05:50,000 --> 00:08:24,000
In pursuit

5
00:08:24,000 --> 00:10:13,000
Showdown in the cage

6
00:10:13,000 --> 00:12:24,000
Eye to eye

7
00:12:24,000 --> 00:14:48,000
Ending Credits

Question: Give the Descriptions sample file?

00:00.000 --> 00:51.833
3p683El7-120.jpg#xywh=0,0,120,67

00:51.833 --> 01:43.667
3p683El7-120.jpg#xywh=120,0,120,67

01:43.667 --> 02:35.500
3p683El7-120.jpg#xywh=240,0,120,67

02:35.500 --> 03:27.334
3p683El7-120.jpg#xywh=360,0,120,67

03:27.334 --> 04:19.167
3p683El7-120.jpg#xywh=0,67,120,67

04:19.167 --> 05:11.001
3p683El7-120.jpg#xywh=120,67,120,67

05:11.001 --> 06:02.834
3p683El7-120.jpg#xywh=240,67,120,67

06:02.834 --> 06:54.668
3p683El7-120.jpg#xywh=360,67,120,67

Here 3p683El7-120.jpg is image path, placed parallel with vtt file.

Best Related Posts are Following:

1. How to add chapter in jwplayer video?.
2. How to remove the YouTube Logo from the Video Player?.
3. How to embed muted youtube video with autoplay.
4. How to create an RSS feed from URLs.
5. Upload Image from URL to S3 in Zend Framework.

How to add chapter in jwplayer video?

Question: How to add marker in jwplayer video?

 
<script src="//content.jwplatform.com/libraries/bFyELn2w.js"></script>
<div id="videoPlayerId">
</div>
<script type="text/javascript">
    var playerObj = jwplayer("videoPlayerId");


    playerObj.setup({
        image: "//content.jwplatform.com/thumbs/q1fx20VZ-640.jpg",
        file: "//content.jwplatform.com/videos/q1fx20VZ-640.mp4",
        tracks: [{
                file: '//content.jwplatform.com/tracks/XtwSLSdq.txt',
                kind: 'chapters'
            }],
        width: 640,
        height: 400
    }); 
</script> 

Demo

Question: Give the chapter sample file?

1
00:00:00,000 --> 00:01:42,000
Opening credits

2
00:01:42,000 --> 00:04:44,000
A dangerous quest

3
00:04:44,000 --> 00:05:50,000
The attack

4
00:05:50,000 --> 00:08:24,000
In pursuit

5
00:08:24,000 --> 00:10:13,000
Showdown in the cage

6
00:10:13,000 --> 00:12:24,000
Eye to eye

7
00:12:24,000 --> 00:14:48,000
Ending Credits

Question: What are 3 option in chapter?
identifier (optional )
Its for personal use.

Cue timings (required)
What are timing (start-end) to show the chapter/market.

Chapter title (required)
What title when want to show when click on that marker or chatper.

Best Related Posts are Following:

1. How to embed muted youtube video with autoplay.
2. How to create an RSS feed from URLs.
3. Upload Image from URL to S3 in Zend Framework.
4. Youtube v3 API Sample API Requests and Response - Search Videos - Get Video Details.
5. Web Services interview questions and answers for fresher.
6. Share count and Share URL of Facebook, Twitter, LinkedIn and Pinterest.
7. Get Youtube video-details and comments using PHP.
8. How to create webservice in php with SOAP Technology.
9. Facebook comments Integration in website.
10. How to setup your twitter App