diff --git a/docs/subtitles-and-captions.html b/docs/subtitles-and-captions.html index 4f5b2da6..f1af2aa0 100644 --- a/docs/subtitles-and-captions.html +++ b/docs/subtitles-and-captions.html @@ -26,207 +26,13 @@ @@ -239,86 +45,6 @@
- - <video - id="player" - controls - class="cld-video-player" - crossorigin="anonymous" - width="500"> - </video> - - <!-- ... a few more <video> tags --> - - - - // Initialize players - var player = cloudinary.videoPlayer('player', { - cloud_name: 'prod' - }); - - player.source( - 'video/examples/big_buck_bunny_trailer_720p', - { - info: { title: 'SRT & VTT from URL' }, - textTracks: { - options: { - theme: "videojs-default" - }, - captions: { - label: 'VTT from URL', - default: true, - url: 'https://res.cloudinary.com/prod/raw/upload/video/examples/big_buck_bunny_trailer_720p.vtt' - }, - subtitles: [ - { - label: 'SRT from URL', - url: 'https://res.cloudinary.com/prod/raw/upload/video/examples/big_buck_bunny_trailer_720p.srt' - } - ] - } - } - ); - - // Playlist - var playlist = cloudinary.videoPlayer('playlist', { - cloud_name: 'demo' - }); - - var source1 = { - publicId: 'video-player/stubhub', - info: { title: 'Subtitles & Captions playlist' }, - textTracks: { - captions: { - label: 'English captions', - language: 'en', - default: true, - url: 'https://res.cloudinary.com/demo/raw/upload/v1636972013/video-player/vtt/Meetup_english.vtt' - }, - subtitles: [ - { - label: 'German subtitles', - language: 'de', - url: 'https://res.cloudinary.com/demo/raw/upload/v1636970250/video-player/vtt/Meetup_german.vtt' - }, - { - label: 'Russian subtitles', - language: 'ru', - url: 'https://res.cloudinary.com/demo/raw/upload/v1636970275/video-player/vtt/Meetup_russian.vtt' - } - ] - } - }; - - var source2 = { - publicId: 'video-player/outdoors', - info: { title: 'Outdoors', subtitle: 'Outdoors movie with captions' }, - textTracks: { - captions: { - label: 'English captions', - language: 'en', - default: true, - url: 'https://res.cloudinary.com/demo/raw/upload/v1636971261/video-player/vtt/outdoors.vtt', - } - } - }; - - var source3 = { - publicId: 'video-player/dog', - info: { title: 'Dog', subtitle: 'Video of a dog, no captions' } - }; - - var playlistSources = [source1, source2, source3]; - - var playlistOptions = { - autoAdvance: true, - repeat: true, - presentUpcoming: 8 - }; - - playlist.playlist(playlistSources, playlistOptions); - - // Paced - const pacedPlayer = cloudinary.videoPlayer('paced', { - cloudName: 'prod' - }); - - const publicId = 'video/examples/cloudinary-marketing'; - - const textTracks = { - options: { - // theme: "", // one of 'default', 'videojs-default', 'yellow-outlined', 'player-colors' & '3d' - // fontFace: "", // any Google font - // fontSize: "", // any CSS value - // gravity: "", // i.e. 'top-left', 'center' etc - // box: { // Object of x/y/width/height - // x: "0%", - // y: "0%", - // width: "100%", - // height: "100%" - // }, - // style: { // Styles key-value object - // color: "hotpink" - // } - }, - captions: { - label: 'English Paced', - maxWords: 4, - default: true, - } - } - pacedPlayer.source(publicId, { - textTracks - }); - - // Karaoke - const karaokePlayer = cloudinary.videoPlayer('karaoke', { - cloudName: 'prod' - }); - - karaokePlayer.source('video/examples/cld-imagine_1080p', { - textTracks: { - options: { - fontFace: 'Lobster', - fontSize: '200%', - gravity: 'top', - wordHighlightStyle: { - color: 'white', - 'text-shadow': `2px 2px 0px violet, - 4px 4px 0px indigo, - 6px 6px 0px blue, - 8px 8px 0px green, - 10px 10px 0px yellow, - 12px 12px 0px orange, - 14px 14px 0px red` - } - }, - captions: { - label: 'KARAOKE', - wordHighlight: true, - maxWords: 8, - url: 'https://res.cloudinary.com/prod/raw/upload/v1/video/examples/cld-imagine_1080p.transcript', - default: true - } - } - }); - - // Auto-translated transcript - const translatedTranscriptPlayer = cloudinary.videoPlayer('translated-transcript', { - cloudName: 'prod' - }); - - translatedTranscriptPlayer.source('video/examples/cloudinary-marketing-pm', { - textTracks: { - captions: { - label: "Original", - default: true, - }, - subtitles: [ - { - label: "English", - language: "en-US", - }, - { - label: "Polish", - language: "pl-PL", - }, - { - label: "Hebrew", - language: "he-IL", - }, - { - label: "Italian", - language: "it-IT", - }, - { - label: "Ukrainian", - language: "uk-UA", - } - ] - } - }); - - - -
- <video - id="player" - controls - class="cld-video-player" - crossorigin="anonymous" - width="500"> - </video> - - <!-- ... a few more <video> tags --> -
- - // Initialize players - var player = cloudinary.videoPlayer('player', { - cloud_name: 'prod' - }); - - player.source( - 'video/examples/big_buck_bunny_trailer_720p', - { - info: { title: 'SRT & VTT from URL' }, - textTracks: { - options: { - theme: "videojs-default" - }, - captions: { - label: 'VTT from URL', - default: true, - url: 'https://res.cloudinary.com/prod/raw/upload/video/examples/big_buck_bunny_trailer_720p.vtt' - }, - subtitles: [ - { - label: 'SRT from URL', - url: 'https://res.cloudinary.com/prod/raw/upload/video/examples/big_buck_bunny_trailer_720p.srt' - } - ] - } - } - ); - - // Playlist - var playlist = cloudinary.videoPlayer('playlist', { - cloud_name: 'demo' - }); - - var source1 = { - publicId: 'video-player/stubhub', - info: { title: 'Subtitles & Captions playlist' }, - textTracks: { - captions: { - label: 'English captions', - language: 'en', - default: true, - url: 'https://res.cloudinary.com/demo/raw/upload/v1636972013/video-player/vtt/Meetup_english.vtt' - }, - subtitles: [ - { - label: 'German subtitles', - language: 'de', - url: 'https://res.cloudinary.com/demo/raw/upload/v1636970250/video-player/vtt/Meetup_german.vtt' - }, - { - label: 'Russian subtitles', - language: 'ru', - url: 'https://res.cloudinary.com/demo/raw/upload/v1636970275/video-player/vtt/Meetup_russian.vtt' - } - ] - } - }; - - var source2 = { - publicId: 'video-player/outdoors', - info: { title: 'Outdoors', subtitle: 'Outdoors movie with captions' }, - textTracks: { - captions: { - label: 'English captions', - language: 'en', - default: true, - url: 'https://res.cloudinary.com/demo/raw/upload/v1636971261/video-player/vtt/outdoors.vtt', - } - } - }; - - var source3 = { - publicId: 'video-player/dog', - info: { title: 'Dog', subtitle: 'Video of a dog, no captions' } - }; - - var playlistSources = [source1, source2, source3]; - - var playlistOptions = { - autoAdvance: true, - repeat: true, - presentUpcoming: 8 - }; - - playlist.playlist(playlistSources, playlistOptions); - - // Paced - const pacedPlayer = cloudinary.videoPlayer('paced', { - cloudName: 'prod' - }); - - const publicId = 'video/examples/cloudinary-marketing'; - - const textTracks = { - options: { - // theme: "", // one of 'default', 'videojs-default', 'yellow-outlined', 'player-colors' & '3d' - // fontFace: "", // any Google font - // fontSize: "", // any CSS value - // gravity: "", // i.e. 'top-left', 'center' etc - // box: { // Object of x/y/width/height - // x: "0%", - // y: "0%", - // width: "100%", - // height: "100%" - // }, - // style: { // Styles key-value object - // color: "hotpink" - // } - }, - captions: { - label: 'English Paced', - maxWords: 4, - default: true, - } - } - pacedPlayer.source(publicId, { - textTracks - }); - - // Karaoke - const karaokePlayer = cloudinary.videoPlayer('karaoke', { - cloudName: 'prod' - }); - - karaokePlayer.source('video/examples/cld-imagine_1080p', { - textTracks: { - options: { - fontFace: 'Lobster', - fontSize: '200%', - gravity: 'top', - wordHighlightStyle: { - color: 'white', - 'text-shadow': `2px 2px 0px violet, - 4px 4px 0px indigo, - 6px 6px 0px blue, - 8px 8px 0px green, - 10px 10px 0px yellow, - 12px 12px 0px orange, - 14px 14px 0px red` - } - }, - captions: { - label: 'KARAOKE', - wordHighlight: true, - maxWords: 8, - url: 'https://res.cloudinary.com/prod/raw/upload/v1/video/examples/cld-imagine_1080p.transcript', - default: true - } - } - }); - - // Auto-translated transcript - const translatedTranscriptPlayer = cloudinary.videoPlayer('translated-transcript', { - cloudName: 'prod' - }); - - translatedTranscriptPlayer.source('video/examples/cloudinary-marketing-pm', { - textTracks: { - captions: { - label: "Original", - default: true, - }, - subtitles: [ - { - label: "English", - language: "en-US", - }, - { - label: "Polish", - language: "pl-PL", - }, - { - label: "Hebrew", - language: "he-IL", - }, - { - label: "Italian", - language: "it-IT", - }, - { - label: "Ukrainian", - language: "uk-UA", - } - ] - } - }); - - -