I am using https://plyr.io/ to have a video player with captions. (Documentation: https://github.com/sampotts/plyr).
Below is the steps to reproduce caption issue with video player with example code:
In the page load initialize the video player in jquery document load.
<video controls
crossorigin
playsinline
id="player">
</video>inside jquery page load:
const video = document.querySelector('video');
const player = new Plyr(video, {
captions: {active:false},
});- After page load upload the .mp4 file and set to the video player like below:
player.source = {
type: 'video',
title: mvFileName,
sources: [
{
src: mvUrl,
type: mvfileContentType,
size: 720,
}
],
poster: posterPath,
};Till here i could able to set the .mp4 file to the video and it is playing the video fine.
- Then i upload the subtitle file(.vtt) and set to this video player like below:
const track = document.createElement('track');
Object.assign(track, {
kind: "captions",
label: $('#hdnMVSubttleLangName').val(),
srclang: $('#hdnMVSubttleShortLang').val(),
src: jsonResponse.SubtitleUrl,
});
player.media.appendChild(track);After this code when i inspect the video i could find like the track tag set inside the video tag with subtitle path like below:
<video crossorigin="" data-poster="/Content/Movies/MoviePoster/47eb9kRPz4g=MV.png" playsinline="" src="/Content/Movies/47eb9kRPz4g=MV.mp4"><source src="/Content/Movies/47eb9kRPz4g=MV.mp4" type="video/mp4" size="720">
<track kind="captions" label="English" srclang="en" src="/Content/Movies/MovieSubtitle/vdoSubtle.vtt">
</video>After setting subtitle just after used below code to make the caption active:
player.captions.active = true;Issue: Now in the video caption icon not enabled, Also in settings, I could see caption option available.
Also, Please suggest your best approach, If in above used any code is wrong.
Need help