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

How to remove the YouTube Logo from the Video Player?

Question: How to remove the YouTube Logo from the Video Player?

<iframe height="300" src="//www.youtube.com/embed/myaqHeNEO04?modestbranding=1" width="400"></iframe>

Demo

Question: How to autoplay the youtube video when embed in website?

<iframe height="300" src="//www.youtube.com/embed/myaqHeNEO04?modestbranding=1&amp;autoplay=1" width="400"></iframe>

Demo

Question: How to Stop autoplay the youtube video when embed in website?

<iframe height="300" src="//www.youtube.com/embed/myaqHeNEO04?modestbranding=1&amp;autoplay=0" width="400"></iframe>

Demo

Question: How to remove related videos from the end of an embedded youtube video?

<iframe height="300" src="//www.youtube.com/embed/myaqHeNEO04?modestbranding=1&amp;autoplay=0&amp;rel=0" width="400"></iframe>

Demo

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?.

How to embed muted youtube video with autoplay

Question:How to Embed muted youtube video with autoplay?

<iframe allowfullscreen="" frameborder="0" height="300px" id="ytplayer" src="https://www.youtube-nocookie.com/embed/2gcfHpGpsOw?rel=0&amp;enablejsapi=1&amp;autoplay=1&amp;controls=1&amp;showinfo=0&amp;loop=1&amp;iv_load_policy=3" type="text/html" width="400px"></iframe>
<script>
var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('ytplayer', {
        events: {
            'onReady': onPlayerReady
        }
    });
}

function onPlayerReady(event) {
    player.mute();
    player.playVideo();
}    
    </script>

Question:How to Embed muted youtube video without autoplay?

<iframe allowfullscreen="" frameborder="0" height="300px" id="ytplayer" src="https://www.youtube-nocookie.com/embed/2gcfHpGpsOw?rel=0&amp;enablejsapi=1&amp;autoplay=0&amp;controls=1&amp;showinfo=0&amp;loop=1&amp;iv_load_policy=3" type="text/html" width="400px"></iframe>
<script>
var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('ytplayer', {
        events: {
            'onReady': onPlayerReady
        }
    });
}

function onPlayerReady(event) {
    player.mute();
    player.playVideo();
}    
    </script>

Demo

Best Related Posts are Following:

1. How to integrate facebook like button in website?.
2. How to add multiple og image tag for open graph API.
3. Facebook SDK does not loading all.js.
4. How to logout from facebook with javascritp SDK - FB.logout.
5. Facebook SDK javascript - Facebook Login Check, Get Login Details, Share URL and POST to Profile.
6. Facebook Login Integration - Multiple Facebook IDs for the same user[Solved].
7. Share count and Share URL of Facebook, Twitter, LinkedIn and Pinterest.
8. Disable facebook notification popup after Click on Facebook Like Button.
9. How to share Embed youtube video on facebook From my website.
10. How to Find a Facebook Profile From an Image URL.
11. How to integrate Facebook open Graph API in Website.

Upload Image from URL to S3 in Zend Framework

$imageURL = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidv97qmJwUu4M0TAG5vrIuRLFN1YpSwJnDp6huR_eRyN3OeV2tKg_7hyK9adAH3ex6bAys6LZur073vkHRl3833KjuuoVwlaq3b1XfvqGUBKJo3TZZh54KkqgtAVGv9yQdSLkkCK47L-G2/s1600/Upload+image+from+URL+to+S3+in+Zend+Framework.png';
$extension = 'png';

$myAwsKey = 'AKIAP3APTHAC2DQLGJA'; //S3 AWS Key
$myAwsSecretKey = 'YJiKlVFERFuF/sadfzgS2jgj6z/Qhjkhsh'; //S3 Secret Key
$s3Media = 's3mediafolder'; //S3 Folder path

$s3 = new Zend_Service_Amazon_S3($myAwsKey, $myAwsSecretKey);
$uploadTo = 'clientProfileImages/thumb/205_test_push.png';

try {
    $s3->putFile($imageURL, "$s3Media/$uploadTo", array(
        Zend_Service_Amazon_S3::S3_ACL_HEADER => Zend_Service_Amazon_S3::S3_ACL_PUBLIC_READ,
        'x-amz-storage-class' => 'REDUCED_REDUNDANCY',
        'ContentType' => $extension
    ));
} catch (Exception $e) {
    echo $e->getMessage();
    die;
}
echo 'Image Uploaded Successfully in S3';

Best Related Posts are Following:

1. How to use view helper in zend framework?.
2. Zend Framework Remember me login Form.
3. How to install Zend Framework 2 in windows.
4. How to redirect http to https in Zend Framework.
5. Zend framework Disable the layout and Change the Layout in ZF1.
6. Zend Framework How to delete a table row from foreach loop.
7. Zend framework pagination with array adapter - with code snippets.
8. Youtube v3 API Sample API Requests and Response - Search Videos - Get Video Details.
9. How to set authorization header in Curl using zend framework.
10. How to delete the Zend Cache files from server.
11. How to send an email using Email Template in Zend Framework.
12. Get Youtube video-details and comments using PHP.
13. How to send Attachment in Email in zend framework1 - Send PDF File.
14. How to send Email in Zend Framework - HTML Email.
15. Send Email from Gmail SMTP using Zend Framework.
16. Google trends api php - How to get hot trends.
17. Multiple column ordering in Zend Framework.
18. Current time zone for a city- Free API.
19. Zend Gdata Youtube API - Search Video - View Video Detail.
20. Download Videos from Amazon S3 - PHP.
21. How to set Cron in Zend Framework?.
22. Zend Cache Tutorial - Zend Framework 1.12.
23. Zend Framework Interview Questions and Answers for Experienced.
24. Zend Framework Interview Questions and Answers.
25. Zend Framework - Free Google Analytics API.
26. Zend_Filter_Input - Zend_Filter - Zend Framework.
27. PHP Upload File In Amazon S3 Bucket - Code Snippets.
28. Difference Between Zend framework 2 VS Zend framework 1.
29. Zend Database Query - Zend Profiler Example - Code Snippets.