Skip to content

Commit 15cfa61

Browse files
dazzatronusdazzatronus
committed
chore: update styling and content
1 parent d5c08c7 commit 15cfa61

File tree

3 files changed

+228
-57
lines changed

3 files changed

+228
-57
lines changed

‎web/app.js‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ function initialiseVideo(src) {
3131
player.download = src;
3232

3333
$('#status').removeClass('d-flex').addClass('d-none');
34-
$('#player').show();
34+
$('#player').removeClass('d-none');
3535

3636
player.play();
3737
}
@@ -87,8 +87,8 @@ function updateStatus(status) {
8787
$('#status .fas').attr('class', 'fas fa-cloud-download-alt fa-2x');
8888
$('#status p').text('IMPORTING FILE');
8989
} else if (status === 'processing') {
90-
$('#status .fas').attr('class', 'fas fa-server fa-2x');
91-
$('#status p').text('PROCESSING');
90+
$('#status .fas').attr('class', 'fas fa-cogs fa-2x');
91+
$('#status p').text('CONVERTING');
9292
} else if (status === 'ready') {
9393
$('#status .fas').attr('class', 'fas fa-check-circle fa-2x');
9494
$('#status p').text('READY');
@@ -112,7 +112,7 @@ function updateStatus(status) {
112112
*/
113113
function displayError(error) {
114114
if (typeof error === 'string') {
115-
$('#errors').text(error).removeClass('d-hide').addClass('d-block');
115+
$('#errors').html(error).removeClass('d-hide').addClass('d-block');
116116
return;
117117
}
118118

@@ -121,12 +121,12 @@ function displayError(error) {
121121
if (error.status === 400) {
122122
var response = error.responseJSON;
123123
if (typeof response.data === 'string') {
124-
$('#errors').text(response.data).removeClass('d-hide').addClass('d-block');
124+
$('#errors').html(response.data).removeClass('d-hide').addClass('d-block');
125125
} else {
126-
$('#errors').text(unknownError).removeClass('d-hide').addClass('d-block');
126+
$('#errors').html(unknownError).removeClass('d-hide').addClass('d-block');
127127
}
128128
} else {
129-
$('#errors').text(unknownError).removeClass('d-hide').addClass('d-block');
129+
$('#errors').html(unknownError).removeClass('d-hide').addClass('d-block');
130130
}
131131
}
132132

@@ -136,7 +136,7 @@ function displayError(error) {
136136
function resetErrors() {
137137
$('input, label, select').removeClass('text-danger is-invalid');
138138
$('.invalid-feedback').remove();
139-
$('#errors').text('').removeClass('d-block').addClass('d-none');
139+
$('#errors').html('').removeClass('d-block').addClass('d-none');
140140
}
141141

142142
/**
@@ -158,7 +158,7 @@ function resetVideo() {
158158
progress = 0;
159159

160160
$('.json-container').html('');
161-
$('#json').hide();
161+
$('#json').addClass('d-none');
162162
}
163163

164164
/**
@@ -237,7 +237,7 @@ function prettyPrintJson(obj) {
237237
* @param json
238238
*/
239239
function initialiseJson(json) {
240-
$('#json').show();
240+
$('#json').removeClass('d-none');
241241
$('.json-container').html(prettyPrintJson(json));
242242
}
243243

@@ -354,6 +354,11 @@ function uploadFileToS3(file, presignedPostData, element) {
354354
var $filePlaceholder = $parent.children('.file-placeholder');
355355
var $filePlaceholderName = $filePlaceholder.children('.name');
356356

357+
if (file.size > 262144000) {
358+
displayError('File size exceeds 250MB limit. <a href="https://dashboard.shotstack.io/register" target="_blank" class="text-brand">Sign up to use the API</a> to convert larger files.');
359+
return;
360+
}
361+
357362
var formData = new FormData();
358363
Object.keys(presignedPostData.fields).forEach((key) => {
359364
formData.append(key, presignedPostData.fields[key]);

‎web/index.html‎

Lines changed: 169 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,17 @@
66
<meta name="robots" content="noindex">
77

88
<link
9-
rel="stylesheet"
9+
rel="preload"
1010
href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;600&family=Kanit:wght@600&display=swap"
11+
as="style"
12+
onload="this.onload=null;this.rel='stylesheet'"
1113
/>
14+
<noscript>
15+
<link
16+
rel="stylesheet"
17+
href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;600&family=Kanit:wght@600&display=swap"
18+
/>
19+
</noscript>
1220
<link
1321
rel="stylesheet"
1422
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
@@ -30,24 +38,57 @@
3038
<link rel="stylesheet" href="https://shotstack.io/assets/css/main.css" />
3139
<link rel="stylesheet" href="styles.css" />
3240

33-
<title>Convert MP4 to MOV Shotstack Demo</title>
41+
<title>MP4 to MOV Converter (Online & API) - Shotstack</title>
3442
<meta
3543
name="description"
36-
content="Convert an MP4 video to MOV format using the Shotstack Ingest API. This demo shows you how to upload a video and convert it."
44+
content="Convert MP4 to MOV online for free. Upload a file or paste a URL, preview, and download your MOV. Open-source demo powered by Shotstack Ingest API."
3745
/>
46+
<link rel="canonical" href="https://shotstack.io/demo/mp4-to-mov/" />
47+
48+
<script type="application/ld+json">
49+
{
50+
"@context": "https://schema.org",
51+
"@type": "WebApplication",
52+
"name": "MP4 to MOV Converter",
53+
"url": "https://shotstack.io/demo/mp4-to-mov/",
54+
"applicationCategory": "Multimedia",
55+
"operatingSystem": "Web",
56+
"description": "Use our free demo to convert MP4 to MOV online in minutes - ideal for QuickTime and editing tools. Works with all browsers. This demo is developed using the Shotstack Ingest API.",
57+
"provider": {
58+
"@type": "Organization",
59+
"name": "Shotstack"
60+
},
61+
"offers": {
62+
"@type": "Offer",
63+
"price": "0",
64+
"priceCurrency": "USD",
65+
"description": "Free tier"
66+
},
67+
"potentialAction": {
68+
"@type": "Action",
69+
"name": "Convert Video",
70+
"description": "Convert MP4 video to MOV format",
71+
"target": "https://shotstack.io/demo/mp4-to-mov/"
72+
}
73+
}
74+
</script>
3875
</head>
3976
<body>
4077
<div class="container content my-4">
78+
<header>
79+
<h1 class="display-4">MP4 to MOV Converter</h1>
80+
<p class="lead">Use our free demo to convert MP4 to MOV online in minutes - ideal for QuickTime and editing tools. Works with all browsers. This demo is developed using the Shotstack Ingest API.</p>
81+
</header>
4182
<div class="row">
42-
<div class="col-5">
83+
<div class="col-lg-5 mb-4 mb-lg-0">
4384
<form class="jumbotron" method="post">
4485
<div class="form-group video-group">
4586
<label><b>Source video</b></label>
4687
<small class="form-text text-muted float-right">
4788
Max file size: 250MB
4889
</small>
4990
<div class="row mb-3">
50-
<div class="col-6">
91+
<div class="col-sm-6 col-12 mb-2 mb-sm-0">
5192
<button
5293
type="button"
5394
class="btn btn-secondary w-100 upload-button toggle-button"
@@ -65,11 +106,11 @@
65106
<i class="fas fa-upload upload-icon"></i> Upload
66107
</button>
67108
</div>
68-
<div class="col-6">
109+
<div class="col-sm-6 col-12">
69110
<button
70111
type="button"
71112
class="btn btn-secondary w-100 url-button toggle-button"
72-
data-toggle="collapse"
113+
data-bs-toggle="collapse"
73114
href="#urlExpand"
74115
role="button"
75116
aria-expanded="false"
@@ -122,14 +163,14 @@
122163
</a>
123164
</div>
124165
</div>
125-
<div class="col-7 video-container">
166+
<div class="col-lg-7 video-container">
126167
<div id="instructions" class="row justify-content-center align-items-center">
127168
<div class="col-12 text-center jumbotron border">
128169
<p>Your converted MP4 to MOV file will play here.</p>
129170
</div>
130171
</div>
131172
<div id="status" class="row justify-content-center align-items-center d-none">
132-
<div class="col-6 text-center">
173+
<div class="col-sm-6 text-center">
133174
<i class="fas fa-2x"></i>
134175
<p></p>
135176
<div class="progress" style="height: 2px">
@@ -141,11 +182,11 @@
141182
aria-valuemax="100"
142183
></div>
143184
</div>
144-
<small>Hold tight, processing may take a minute...</small>
185+
<small>Hold tight, converting may take a minute...</small>
145186
</div>
146187
</div>
147-
<video id="player" playsinline controls></video>
148-
<div id="json" class="row">
188+
<video id="player" playsinline controls class="d-none mb-0"></video>
189+
<div id="json" class="row d-none mt-3">
149190
<div class="col mt-4">
150191
<p class="text-center">
151192
<a
@@ -159,7 +200,7 @@
159200
</a>
160201
<a
161202
class="btn btn-primary ml-2"
162-
data-toggle="collapse"
203+
data-bs-toggle="collapse"
163204
href="#jsonExpand"
164205
role="button"
165206
aria-expanded="false"
@@ -177,16 +218,127 @@
177218
</div>
178219
</div>
179220
</div>
221+
222+
<div class="row mt-5">
223+
<div class="col-12">
224+
<h2 class="h3 text-brand fw-bold mb-3">How to convert MP4 to MOV?</h2>
225+
<p><strong>Step 1:</strong> Upload a video or paste a link/URL.</p>
226+
<p><strong>Step 2:</strong> Click the convert video button to start your MP4 to MOV process.</p>
227+
<p><strong>Step 3:</strong> Your MOV file will be available for preview and download after processing. Enjoy!</p>
228+
</div>
229+
</div>
230+
231+
<div class="row mt-4">
232+
<div class="col-12">
233+
<h2 class="h3 text-brand fw-bold mb-3">About MP4 and MOV (what changes when you convert)</h2>
234+
<p>MP4 and MOV are both video containers. MP4 is widely used for web delivery; MOV is Apple's QuickTime container and is common in editing workflows. Converting MP4→MOV changes the container format. This demo uses the best approach: if your source codec is MOV-compatible, it copies without re-encoding; otherwise, it converts to H.264 for broad compatibility. Audio is handled similarly to ensure compatibility with QuickTime and most editors.</p>
235+
</div>
236+
</div>
237+
238+
<div class="row mt-4">
239+
<div class="col-12">
240+
<h2 class="h3 text-brand fw-bold mb-3">When to use MOV instead of MP4</h2>
241+
<p>Choose MOV when you need maximum compatibility with Apple tools (QuickTime, Final Cut Pro) or when a client or editor specifically requests a .mov. For general web playback and smaller files, MP4 is usually the better choice. If your goal is simple viewing or sharing online, keep MP4; if your workflow involves QuickTime-centric review or handoff to an editor, use MOV.</p>
242+
</div>
243+
</div>
244+
245+
<div class="row mt-4">
246+
<div class="col-12">
247+
<h2 class="h3 text-brand fw-bold mb-3">Privacy & security</h2>
248+
<p>Files are securely transferred over HTTPS and stored temporarily only to complete your conversion. We automatically delete source files and outputs shortly after processing. Your content is not used to train models.</p>
249+
<p>The open-source code for this project is available on <a href="https://github.com/shotstack/mp4-to-mov-demo" target="_blank">GitHub</a>. It can serve as a foundation for anyone looking to create their own automated media conversion tool.</p>
250+
</div>
251+
</div>
252+
253+
<div class="row mt-4">
254+
<div class="col-12">
255+
<h2 class="h3 text-brand fw-bold mb-3">Do more with Shotstack (for frequent conversions)</h2>
256+
<p>If you only need the occasional MP4→MOV, this demo is perfect. If you're converting lots of files, or need editor-friendly outputs on a schedule, <a href="https://shotstack.io/product/video-editing-api/" target="_blank">Shotstack's APIs</a> can automate it - queue jobs, process at scale, receive webhooks when they finish, and deliver files via CDN.</p>
257+
<p><a href="https://dashboard.shotstack.io/register" target="_blank">Sign up</a> and get started for free (no credit card needed).</p>
258+
</div>
259+
</div>
260+
261+
<div class="row mt-4">
262+
<div class="col-12">
263+
<h2 class="h3 text-brand fw-bold mb-4 pb-2 section-divider">Frequently asked questions (FAQs)</h2>
264+
265+
<div class="accordion faq-accordion" id="faqAccordion">
266+
<div class="accordion-item">
267+
<h3 class="accordion-header">
268+
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1" aria-expanded="true" aria-controls="faq1">
269+
Does converting MP4 to MOV improve video quality?
270+
</button>
271+
</h3>
272+
<div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
273+
<div class="accordion-body">
274+
No - changing containers doesn't increase quality. This demo automatically copies your source codec if it's compatible with MOV, or converts to H.264 if needed. Quality depends on your source file and what conversion (if any) occurs.
275+
</div>
276+
</div>
277+
</div>
278+
279+
<div class="accordion-item">
280+
<h3 class="accordion-header">
281+
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2" aria-expanded="false" aria-controls="faq2">
282+
Can I get a ProRes MOV from this demo?
283+
</button>
284+
</h3>
285+
<div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
286+
<div class="accordion-body">
287+
The demo outputs a MOV file with the same codec as the source video. If the codec is incompatible it will default to H.264.
288+
</div>
289+
</div>
290+
</div>
291+
292+
<div class="accordion-item">
293+
<h3 class="accordion-header">
294+
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3" aria-expanded="false" aria-controls="faq3">
295+
Can I convert MP4 to MOV from a Google Drive/Dropbox link?
296+
</button>
297+
</h3>
298+
<div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
299+
<div class="accordion-body">
300+
Use a direct download URL. If the link requires you to be logged in or expires quickly, download the file locally and upload it here.
301+
</div>
302+
</div>
303+
</div>
304+
305+
<div class="accordion-item">
306+
<h3 class="accordion-header">
307+
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq4" aria-expanded="false" aria-controls="faq4">
308+
What's the file size limit?
309+
</button>
310+
</h3>
311+
<div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
312+
<div class="accordion-body">
313+
250MB per file in the demo. For larger files or batches, use the Shotstack Ingest API directly.
314+
</div>
315+
</div>
316+
</div>
317+
318+
<div class="accordion-item">
319+
<h3 class="accordion-header">
320+
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq5" aria-expanded="false" aria-controls="faq5">
321+
Is MOV better for Final Cut or QuickTime?
322+
</button>
323+
</h3>
324+
<div id="faq5" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
325+
<div class="accordion-body">
326+
MOV is the native QuickTime container and works well in Apple tools. For simple playback or web delivery, MP4 is typically smaller. Choose based on your workflow.
327+
</div>
328+
</div>
329+
</div>
330+
</div>
331+
</div>
332+
</div>
333+
180334
</div>
181335
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
182336
<script
183-
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
184-
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
337+
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
338+
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
185339
crossorigin="anonymous"
186340
></script>
187-
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
188341
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
189-
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.5.4/umd/popper.min.js"></script>
190342
<script src="app.js"></script>
191343
</body>
192344
</html>

0 commit comments

Comments
 (0)