Showing posts with label jwplayer. Show all posts
Showing posts with label jwplayer. Show all posts

Monday 25 July 2016

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

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.

Friday 22 July 2016

How to add chapter in jwplayer video?

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.