190 lines
6.7 KiB
HTML
190 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Formulario de Subida de Videos</title>
|
|
<!-- Uix CSS -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uix@1.1.0/dist/uix.min.css">
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #121212;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
.container {
|
|
max-width: 800px;
|
|
margin: 20px auto;
|
|
padding: 20px;
|
|
background-color: #1f1f1f;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.form-group input,
|
|
.form-group select {
|
|
width: 100%;
|
|
padding: 8px;
|
|
border: 1px solid #333;
|
|
border-radius: 4px;
|
|
background-color: #333;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
.form-group button {
|
|
background-color: #555;
|
|
border: none;
|
|
color: #e0e0e0;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.form-group button:hover {
|
|
background-color: #777;
|
|
}
|
|
|
|
.thumbnail-preview {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.thumbnail-preview img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border: 1px solid #333;
|
|
border-radius: 4px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Formulario de Subida de Videos</h1>
|
|
<form id="videoForm">
|
|
<div class="form-group">
|
|
<label for="name">Nombre:</label>
|
|
<input type="text" id="name" name="name" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="description">Descripción:</label>
|
|
<input type="text" id="description" name="description">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="source">Origen:</label>
|
|
<select id="source" name="source">
|
|
<option value="local">Local</option>
|
|
<option value="youtube">YouTube</option>
|
|
<option value="vimeo">Vimeo</option>
|
|
<option value="twitch">Twitch</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group" id="urlGroup" style="display: none;">
|
|
<label for="url">URL:</label>
|
|
<input type="text" id="url" name="url">
|
|
</div>
|
|
<div class="form-group" id="fileGroup" style="display: none;">
|
|
<label for="file">Archivo:</label>
|
|
<input type="file" id="file" name="file" accept="video/*">
|
|
</div>
|
|
<div class="form-group">
|
|
<button type="button" id="getThumbnail">Obtener Miniatura</button>
|
|
</div>
|
|
<div class="form-group thumbnail-preview" id="thumbnailPreview">
|
|
<!-- Miniatura se mostrará aquí -->
|
|
</div>
|
|
<div class="form-group">
|
|
<button type="submit">Enviar</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById('source').addEventListener('change', function () {
|
|
var source = this.value;
|
|
var urlGroup = document.getElementById('urlGroup');
|
|
var fileGroup = document.getElementById('fileGroup');
|
|
|
|
if (source === 'local') {
|
|
urlGroup.style.display = 'none';
|
|
fileGroup.style.display = 'block';
|
|
} else {
|
|
urlGroup.style.display = 'block';
|
|
fileGroup.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
document.getElementById('getThumbnail').addEventListener('click', function () {
|
|
var source = document.getElementById('source').value;
|
|
var url = document.getElementById('url').value;
|
|
var file = document.getElementById('file').files[0];
|
|
var thumbnailPreview = document.getElementById('thumbnailPreview');
|
|
|
|
thumbnailPreview.innerHTML = '';
|
|
|
|
if (source === 'local' && file) {
|
|
var reader = new FileReader();
|
|
reader.onload = function (e) {
|
|
var video = document.createElement('video');
|
|
video.src = e.target.result;
|
|
video.style.display = 'none';
|
|
|
|
video.addEventListener('loadeddata', function () {
|
|
var canvas = document.createElement('canvas');
|
|
canvas.width = video.videoWidth;
|
|
canvas.height = video.videoHeight;
|
|
var ctx = canvas.getContext('2d');
|
|
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
|
|
|
|
var img = document.createElement('img');
|
|
img.src = canvas.toDataURL();
|
|
thumbnailPreview.appendChild(img);
|
|
});
|
|
};
|
|
reader.readAsDataURL(file);
|
|
} else if (source !== 'local' && url) {
|
|
var img = document.createElement('img');
|
|
var thumbnailUrl = getThumbnailUrl(url, source); // Implement this function based on the source
|
|
img.src = thumbnailUrl;
|
|
thumbnailPreview.appendChild(img);
|
|
}
|
|
});
|
|
|
|
function getThumbnailUrl(url, source) {
|
|
// Implement this function based on the source
|
|
// Example placeholders for URLs
|
|
var thumbnailUrls = {
|
|
'youtube': 'https://img.youtube.com/vi/' + extractYouTubeVideoId(url) + '/0.jpg',
|
|
'vimeo': 'https://vumbnail.com/' + extractVimeoVideoId(url) + '.jpg',
|
|
'twitch': 'https://static-cdn.jtvnw.net/previews-ttv/live_user_' + extractTwitchUserId(url) + '-1920x1080.jpg'
|
|
};
|
|
return thumbnailUrls[source] || '';
|
|
}
|
|
|
|
function extractYouTubeVideoId(url) {
|
|
var match = url.match(/(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?v=([^&]+)/);
|
|
return match ? match[1] : '';
|
|
}
|
|
|
|
function extractVimeoVideoId(url) {
|
|
var match = url.match(/(?:https?:\/\/)?(?:www\.)?vimeo\.com\/(\d+)/);
|
|
return match ? match[1] : '';
|
|
}
|
|
|
|
function extractTwitchUserId(url) {
|
|
var match = url.match(/(?:https?:\/\/)?(?:www\.)?twitch\.tv\/(\w+)/);
|
|
return match ? match[1] : '';
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|