|
|
@ -2,7 +2,7 @@
|
|
|
|
<html lang="en">
|
|
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
<head>
|
|
|
|
<meta charset="utf-8">
|
|
|
|
<meta charset="utf-8">
|
|
|
|
<title>Discord Embedder from AV1 server 1.0.22</title>
|
|
|
|
<title>Discord Embedder from AV1 server 1.0.18</title>
|
|
|
|
<base href="/">
|
|
|
|
<base href="/">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
{{ if (imageLink) { }}
|
|
|
|
{{ if (imageLink) { }}
|
|
|
@ -47,7 +47,7 @@ body {
|
|
|
|
text-rendering: optimizeSpeed;
|
|
|
|
text-rendering: optimizeSpeed;
|
|
|
|
line-height: 1.5;
|
|
|
|
line-height: 1.5;
|
|
|
|
font-size: 16px;
|
|
|
|
font-size: 16px;
|
|
|
|
padding: 1rem 0.5rem 3rem;
|
|
|
|
padding: 1rem 0.5rem;
|
|
|
|
font-family: sans-serif;
|
|
|
|
font-family: sans-serif;
|
|
|
|
background: var(--bg);
|
|
|
|
background: var(--bg);
|
|
|
|
color: var(--color);
|
|
|
|
color: var(--color);
|
|
|
@ -117,7 +117,14 @@ input[type=submit] {
|
|
|
|
background: var(--button-bg);
|
|
|
|
background: var(--button-bg);
|
|
|
|
color: var(--button-fg);
|
|
|
|
color: var(--button-fg);
|
|
|
|
padding: 0.25rem 1rem;
|
|
|
|
padding: 0.25rem 1rem;
|
|
|
|
margin: 0rem 0 2rem;
|
|
|
|
margin: 1rem 0 2rem;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
pre {
|
|
|
|
|
|
|
|
background: var(--bg-content-alt);
|
|
|
|
|
|
|
|
padding: 0.5rem;
|
|
|
|
|
|
|
|
white-space: break-spaces;
|
|
|
|
|
|
|
|
word-break: break-all;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.row {
|
|
|
|
.row {
|
|
|
@ -167,10 +174,6 @@ h1 {
|
|
|
|
margin-bottom: 1rem;
|
|
|
|
margin-bottom: 1rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
|
|
|
margin-bottom: 0.5rem;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.warning {
|
|
|
|
.warning {
|
|
|
|
font-size: 0.9rem;
|
|
|
|
font-size: 0.9rem;
|
|
|
|
color: #ffe69c;
|
|
|
|
color: #ffe69c;
|
|
|
@ -179,8 +182,8 @@ p {
|
|
|
|
|
|
|
|
|
|
|
|
.alert {
|
|
|
|
.alert {
|
|
|
|
font-size: 0.9rem;
|
|
|
|
font-size: 0.9rem;
|
|
|
|
margin: 0.5rem 0 1rem;
|
|
|
|
color: #f1aeb5;
|
|
|
|
color: hsl(353.7, 70.5%, 87%);
|
|
|
|
margin-bottom: 0.5rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.info {
|
|
|
|
.info {
|
|
|
@ -193,28 +196,16 @@ p {
|
|
|
|
text-decoration: underline;
|
|
|
|
text-decoration: underline;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.optional {
|
|
|
|
.row.optional {
|
|
|
|
margin: 0 -0.5rem 0.5rem;
|
|
|
|
background: #333;
|
|
|
|
|
|
|
|
margin: 1rem -0.5rem 0;
|
|
|
|
padding: 0rem 0.5rem 1rem;
|
|
|
|
padding: 0rem 0.5rem 1rem;
|
|
|
|
background: var(--bg-content-alt);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#testing {
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
align-items: stretch;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.hidden {
|
|
|
|
.hidden {
|
|
|
|
display: none;
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
pre {
|
|
|
|
|
|
|
|
padding: 0.5rem !important;
|
|
|
|
|
|
|
|
white-space: break-spaces;
|
|
|
|
|
|
|
|
word-break: break-all;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#previewVideo {
|
|
|
|
#previewVideo {
|
|
|
|
border: 1px solid white;
|
|
|
|
border: 1px solid white;
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -232,52 +223,43 @@ pre {
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{{ } }}
|
|
|
|
{{ } }}
|
|
|
|
<form action="/" method="post" enctype="multipart/form-data" class="inside">
|
|
|
|
<form action="/" method="post" enctype="multipart/form-data" class="inside">
|
|
|
|
<h1>Embed {{ if (videoLink && imageLink) { }} another {{ } }} video for discord:</h1>
|
|
|
|
<h1>Create/generate embed url</h1>
|
|
|
|
<p>Use this tool to generate links that forces discord to try and play a video or movie directly inside discord. By default, discord will not show video playback for video links that are too large or not in proper format. This tool forces discord to at least try.</p>
|
|
|
|
<p class="warning">Please don't try to use <b>youtube.com</b> links or file sharing sites that don't allow direct link to the video. They will show a download page and won't embed properly (for example <b>mediafire.com</b>, <b>megaupload</b>, <b>drive.google.com</b>, etc.)<br><b>Those will all not work</b>. (You can test if embedding works by clicking play below in the video player after filling out the video link.)</p>
|
|
|
|
|
|
|
|
<p class="info">Video upload sites that work are sites like <a href="https://catbox.moe/" target="_blank">catbox.moe</a> and other sites that allow direct link to video file.</p>
|
|
|
|
<p class="warning">Only sites and filesharing sites that have direct link to the video will work and play in discord. Youtube has it's own player and will not work. Many video sites will have their own player and will not work.</p>
|
|
|
|
<p class="alert"><b>HEVC/h.265 files will not embed or work</b>!</p>
|
|
|
|
|
|
|
|
<p class="alert">Video files of .mkv <b>will also not work</b>! Only files like *.mov, *.mp4 and *.webm will work.</p>
|
|
|
|
<p class="info">Video upload sites that work are sites like <a href="https://catbox.moe/" target="_blank">catbox.moe</a> and other sites that allow <b>direct link to video file</b> will work.</p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{{ if (error) { }}<p class="error">{{=error}}</p>{{ } }}
|
|
|
|
{{ if (error) { }}<p class="error">{{=error}}</p>{{ } }}
|
|
|
|
<p> </p>
|
|
|
|
<label>Video link*</label>
|
|
|
|
<label>Link to video file you want to play in discord*</label>
|
|
|
|
|
|
|
|
<input id="inputVideo" type="text" name="video" value="{{=inputVideo}}">
|
|
|
|
<input id="inputVideo" type="text" name="video" value="{{=inputVideo}}">
|
|
|
|
<p class="alert">
|
|
|
|
|
|
|
|
<b>.mkv</b> video files will <b>not work</b>! <b>HEVC/h.265</b> will also <b>not work</b>! File hosting sites like <b>mediafire/dropbox/google drive</b> will also <b>not work</b>!<br>
|
|
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
<div class="row optional">
|
|
|
|
<div class="row optional">
|
|
|
|
<div class="row-item">
|
|
|
|
<div class="row-item">
|
|
|
|
<label>Optional: Link to image to show before discord user presses play</label>
|
|
|
|
<label>Optional: Image link (recommended, defaults to black cover)</label>
|
|
|
|
<input id="inputImage" type="text" name="image" value="{{=inputImage}}">
|
|
|
|
<input id="inputImage" type="text" name="image" value="{{=inputImage}}">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<span class="row-inbetween">or</span>
|
|
|
|
<span class="row-inbetween">or</span>
|
|
|
|
<div class="row-item">
|
|
|
|
<div class="row-item">
|
|
|
|
<label>Optional: Upload image to show before discord user presses play</label>
|
|
|
|
<label>Optional: Upload image file (max 8MiB, recommended)</label>
|
|
|
|
<input type="file" name="media" type="image">
|
|
|
|
<input type="file" name="media">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="testing" class="hidden">
|
|
|
|
<input type="submit" value="Generate short url">
|
|
|
|
<p>Test area (does the video load and play? If not, it might not work on discord)</p>
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
|
|
Preview:
|
|
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
<pre id="generateurl">
|
|
|
|
|
|
|
|
{{=siteUrlBase}}?v=<video link>
|
|
|
|
|
|
|
|
</pre>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="center">
|
|
|
|
|
|
|
|
<video class="hidden" id="previewVideo" controls poster="" preload="none">
|
|
|
|
<video class="hidden" id="previewVideo" controls poster="" preload="none">
|
|
|
|
<source src="">
|
|
|
|
<source src="">
|
|
|
|
</video>
|
|
|
|
</video>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<pre class="optional" id="generateurl">{{=siteUrlBase}}?v=<video link></pre>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<input type="submit" value="Generate shorter url">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript" nonce="{{=nonce}}">
|
|
|
|
<script type="text/javascript" nonce="{{=nonce}}">
|
|
|
|
var defaultPoster = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABQAAAALQAQAAAADnBuD7AAAAh0lEQVR42u3BMQEAAADCIPuntsROYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACkDsTfAAFMFnd/AAAAAElFTkSuQmCC';
|
|
|
|
var defaultPoster = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABQAAAALQAQAAAADnBuD7AAAAh0lEQVR42u3BMQEAAADCIPuntsROYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACkDsTfAAFMFnd/AAAAAElFTkSuQmCC';
|
|
|
|
var baseSite = '{{=siteUrlBase}}';
|
|
|
|
var baseSite = '{{=siteUrlBase}}';
|
|
|
|
var existingVideoUrl = '{{=inputVideo}}';
|
|
|
|
|
|
|
|
var testing = document.getElementById('testing');
|
|
|
|
|
|
|
|
var generateurl = document.getElementById('generateurl');
|
|
|
|
var generateurl = document.getElementById('generateurl');
|
|
|
|
var inputVideo = document.getElementById('inputVideo');
|
|
|
|
var inputVideo = document.getElementById('inputVideo');
|
|
|
|
var inputImage = document.getElementById('inputImage');
|
|
|
|
var inputImage = document.getElementById('inputImage');
|
|
|
@ -297,20 +279,9 @@ pre {
|
|
|
|
previewVideo.classList.add('hidden')
|
|
|
|
previewVideo.classList.add('hidden')
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
generateurl.innerText = baseSite + '?v=' + encodeURIComponent(inputVideo.value) + (inputImage.value ? '&i=' + encodeURIComponent(inputImage.value) : '');
|
|
|
|
generateurl.innerText = baseSite + '?v=' + encodeURIComponent(inputVideo.value) + (inputImage.value ? '&i=' + encodeURIComponent(inputImage.value) : '');
|
|
|
|
|
|
|
|
previewVideo.poster = inputImage.value || defaultPoster;
|
|
|
|
previewVideo.pause();
|
|
|
|
previewVideo.children[0].src = inputVideo.value;
|
|
|
|
if (inputVideo.value !== existingVideoUrl) {
|
|
|
|
previewVideo.classList.remove('hidden')
|
|
|
|
previewVideo.setAttribute('poster', inputImage.value || defaultPoster);
|
|
|
|
|
|
|
|
previewVideo.children[0].setAttribute('src', inputVideo.value);
|
|
|
|
|
|
|
|
previewVideo.classList.remove('hidden');
|
|
|
|
|
|
|
|
testing.classList.remove('hidden');
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
previewVideo.removeAttribute('poster');
|
|
|
|
|
|
|
|
previewVideo.children[0].removeAttribute('src');
|
|
|
|
|
|
|
|
previewVideo.classList.add('hidden')
|
|
|
|
|
|
|
|
testing.classList.add('hidden');
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
previewVideo.load();
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|