Text-To-Video/index.html at main · salscodess/Text-To-Video · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text to Video Generator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #f0f0f0;
            margin: 0;
        }
        textarea {
            padding: 10px;
            width: 80%;
            height: 100px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        button {
            padding: 10px 20px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #218838;
        }
        #videoContainer {
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        video {
            width: 80%;
            height: auto;
            margin: 10px 0;
            border: 2px solid #ccc;
            border-radius: 10px;
        }
        .text-overlay {
            position: absolute;
            bottom: 10px;
            left: 10px;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 10px;
            font-size: 18px;
            border-radius: 5px;
        }
        .video-wrapper {
            position: relative;
            display: inline-block;
        }
    </style>
</head>
<body>

    <h1>Text to Video Generator</h1>
    <textarea id="inputText" placeholder="Enter your text here..."></textarea>
    <button id="generateBtn">Generate Video Clips</button>

    <div id="videoContainer"></div>

    <script>
        const inputText = document.getElementById('inputText');
        const generateBtn = document.getElementById('generateBtn');
        const videoContainer = document.getElementById('videoContainer');

        generateBtn.addEventListener('click', async () => {
            const text = inputText.value;
            if (text) {
                const words = text.split(/\s+/);
                const videoUrls = [];

                for (let i = 0; i < words.length; i += 5) { // Grouping words
                    const query = words.slice(i, i + 5).join(' ');
                    const urls = await fetchVideos(query);
                    videoUrls.push(...urls);
                }

                displayVideos(videoUrls, text);
            } else {
                alert('Please enter some text.');
            }
        });

        async function fetchVideos(query) {
            try {
                const response = await fetch(`https://api.pexels.com/videos/search?query=${encodeURIComponent(query)}`, {
                    headers: {
                        Authorization: 'mPGRiwahlRDNvW42u23NQIIKHZEmtB5W7|dgCGcNWUXvzQOYaUvdbPYJ'
                });

                if (!response.ok) {
                    throw new Error('Network response was not ok ' + response.statusText);
                }

                const data = await response.json();
                const videoLinks = data.videos.map(video => video.video_files[0].link);
                return videoLinks;
            } catch (error) {
                console.error('Error fetching videos:', error);
                alert('Failed to fetch videos. Please try again later.');
                return []; // Return an empty array on error
            }
        }

        function displayVideos(videoUrls, providedText) {
            videoContainer.innerHTML = ''; // Clear previous videos
            videoUrls.forEach(url => {
                const wrapper = document.createElement('div');
                wrapper.classList.add('video-wrapper');

                const videoElement = document.createElement('video');
                videoElement.src = url;
                videoElement.controls = true;
                videoElement.autoplay = false;
                videoElement.muted = true;
                videoElement.load();

                // Create text overlay
                const textOverlay = document.createElement('div');
                textOverlay.classList.add('text-overlay');
                textOverlay.textContent = providedText;

                wrapper.appendChild(videoElement);
                wrapper.appendChild(textOverlay);

                videoContainer.appendChild(wrapper);
            });
        }
    </script>
</body>
</html>