Skip to content

feat: auto-fetch transcripts from language #741

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tsi merged 6 commits into from
Nov 27, 2024
Merged

feat: auto-fetch transcripts from language #741

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0696d84
feat: auto-fetch transcripts from language
tsi Nov 26, 2024
9091c92
chore: update tests
tsi Nov 27, 2024
4efcb79
Merge branch 'edge' into ME-18357-transcript-from-language
tsi Nov 27, 2024
0740ad2
feat: auto-fetch transcripts from language
tsi Nov 27, 2024
9121b9f
feat: auto-fetch transcripts from language
tsi Nov 27, 2024
942c822
chore: esm examples
tsi Nov 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 1 addition & 5 deletions docs/subtitles-and-captions.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,6 @@
},
captions: {
label: 'English Paced',
language: 'en',
maxWords: 4,
default: true,
},
Expand Down Expand Up @@ -200,7 +199,6 @@
},
captions: {
label: 'KARAOKE',
language: 'en',
wordHighlight: true,
maxWords: 5,
timeOffset: -0.2,
Expand Down Expand Up @@ -454,7 +452,6 @@ <h3 class="mt-4">Example Code:</h3>
},
captions: {
label: 'English Paced',
language: 'en',
maxWords: 4,
default: true
},
Expand Down Expand Up @@ -497,7 +494,6 @@ <h3 class="mt-4">Example Code:</h3>
},
captions: {
label: 'KARAOKE',
language: 'en',
wordHighlight: true,
maxWords: 5,
timeOffset: -0.2,
Expand All @@ -510,7 +506,7 @@ <h3 class="mt-4">Example Code:</h3>
const urlTranscriptPlayer = cloudinary.videoPlayer('url-transcript', {
cloudName: 'demo'
});

urlTranscriptPlayer.source('elephants', {
textTracks: {
captions: {
Expand Down
57 changes: 32 additions & 25 deletions src/plugins/paced-transcript/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,18 @@ import { getCloudinaryUrl, extendCloudinaryConfig } from 'plugins/cloudinary/com
function pacedTranscript(config) {
const player = this;
const source = player.cloudinary.source();
const baseUrl = getCloudinaryUrl(
source.publicId(),
extendCloudinaryConfig(player.cloudinary.cloudinaryConfig(), { resource_type: 'raw' })
);

const options = {
kind: config.kind || 'captions',
label: config.label || 'Captions',
default: config.default,
srclang: config.srclang || 'en',
src: config.src || getCloudinaryUrl(
source.publicId(),
extendCloudinaryConfig(player.cloudinary.cloudinaryConfig(), { resource_type: 'raw' })
) + '.transcript',
src: config.src || baseUrl + (config.srclang ? '.' + config.srclang : '') + '.transcript',
fallbackSrc: config.src || baseUrl + '.transcript',
maxWords: config.maxWords,
wordHighlight: config.wordHighlight,
timeOffset: config.timeOffset || 0
Expand All @@ -23,30 +25,35 @@ function pacedTranscript(config) {

// Load the transcription file
const initTranscript = async () => {
let transcriptResponse;
try {
const transcriptResponse = await fetch(options.src);
const transcriptData = await transcriptResponse.json();
const captions = parseTranscript(transcriptData);

const captionsTrack = player.addRemoteTextTrack({
kind: options.kind,
label: options.label,
srclang: options.srclang,
default: options.default,
mode: options.default ? 'showing' : 'disabled'
});

// required for Safari to display the captions
// https://github.com/videojs/video.js/issues/8519
await new Promise(resolve => setTimeout(resolve, 100));

captions.forEach(caption => {
captionsTrack.track.addCue(new VTTCue(caption.startTime, caption.endTime, caption.text));
});

transcriptResponse = await fetch(options.src);
if (!transcriptResponse.ok) {
throw new Error(`loading transcription from ${options.src} failed, trying fallback URL`);
}
} catch (error) {
console.error('Error loading transcription file:', error);
console.error(error);
transcriptResponse = await fetch(options.fallbackSrc);
}
if (!transcriptResponse.ok) return;
const transcriptData = await transcriptResponse.json();
const captions = parseTranscript(transcriptData);

const captionsTrack = player.addRemoteTextTrack({
kind: options.kind,
label: options.label,
srclang: options.srclang,
default: options.default,
mode: options.default ? 'showing' : 'disabled'
});

// required for Safari to display the captions
// https://github.com/videojs/video.js/issues/8519
await new Promise(resolve => setTimeout(resolve, 100));

captions.forEach(caption => {
captionsTrack.track.addCue(new VTTCue(caption.startTime, caption.endTime, caption.text));
});
};

// Generate captions from the transcription data
Expand Down