Get started with Captionator CDN

BSD-2-Clause licensed

Library adds automated captions to HTML5 videos .

Tags:
  • Captionator
  • captionator.js
  • js

Stable version

Copied!

How to start using Captionator CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with Captionator CDN - cdnhub.io</title>
    <style>
        #video {
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <video id="video" width="640" height="360" controls preload="auto">
        <source src="video.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <script src="https://cdn.cdnhub.io/Captionator/0.6/js/captionator-min.js"></script>
    <script>
        const video = document.getElementById('video');
        const track = new webkitSpeechRecognition();

        track.continuous = false;
        track.interimResult = false;

        track.onresult = function(event) {
            const captionator = new window.Captionator('caption', {
                language: 'en-US',
                fontSize: 16,
                padding: 10,
                maxWidth: 'calc(100% - 20px)',
                zIndex: 9999,
                style: {
                    backgroundColor: '#fff',
                    border: '1px solid #ccc',
                    borderRadius: 5,
                    position: 'fixed',
                    bottom: '20px',
                    left: '20px',
                    boxSizing: 'border-box'
                }
            });

            const text = event.results[0][0].transcript;
            captionator.addText(text);
        };

        track.start();

        video.addEventListener('play', () => {
            track.start();
        });

        video.addEventListener('pause', () => {
            track.stop();
        });
    </script>
</body>
</html>
Copied!
Copied!

All versions