Cargue y almacene videos en MySQL PHP [Completo]

Cargue y almacene videos. Almacenar el nombre de los archivos multimedia en la base de datos MySQL, es fácil recuperar, los archivos cargados por el usuario o en la categoría específica de nuestro servidor web.

¿Qué recursos necesitamos para que funcione el ejemplo?

El principal es el lenguaje PHP que se encargara de conectarse a MySQL y subir el video al servidor.

Lenguaje de marcas HTML5
Base de datos MySQL para almacenar los nombres de los videos subidos
Framework BootStrap

Cargue y almacene videos en MySQL PHP [Completo]

Tabla de contenidos

Cargue y almacene videos: Componentes

En este artículo, haremos un ejemplo de cómo cargar y almacenar un vídeo en la tabla de base de datos MySQL usando el lenguaje PHP PDO.

A) Base de datos: Estructura de la tabla

Para este ejemplo usaremos una base de datos y una tabla con nombre videos. Por lo tanto, en esta tabla contendrá las siguientes columnas: ID, nombre, ubicación.

CREATE TABLE `videos` (
`id` int(11) NOT NULL,
`nombre` varchar(255) NOT NULL,
`ubicacion` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;


ALTER TABLE `videos`
ADD PRIMARY KEY (`id`);


ALTER TABLE `videos`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

B) Configuración: Conexión a MySQL con PDO

Primeramente crearemos un archivo con nombre config.php en el cual programaremos la conexión PDO con las credenciales de MySQL, veamos el fichero completo a continuación.

<?php
$host = "localhost";
$dbname = "db_video";
$username = "root";
$password = "";

try {
$db = new PDO("mysql:host={$host};dbname={$dbname}", $username, $password);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $exception){
die("Connection error: " . $exception->getMessage());
}

function format_uri( $string, $separator = '-' )
{
$accents_regex = '~&([a-z]{1,2})(?:acute|cedil|circ|Grave|lig|orn|ring|slash|th|tilde|uml);~i';
$special_cases = array( '&' => 'and', "'" => '');
$string = mb_strtolower( trim( $string ), 'UTF-8' );
$string = str_replace( array_keys($special_cases), array_values( $special_cases), $string );
$string = preg_replace( $accents_regex, '$1', htmlentities( $string, ENT_QUOTES, 'UTF-8' ) );
$string = preg_replace("/[^a-z0-9]/u", "$separator", $string);
$string = preg_replace("/[$separator]+/u", "$separator", $string);
return $string;
}
?>

C) Subir y almacenar un vídeo

En este paso hay que preparar el terreno y lo primero que haremos será crear un directorio nuevo con el nombre de vídeos en la raíz del proyecto o ejemplo.

HTML5

Aquí usando HTML5 crearemos un formulario que nos permitirá subir el video al servidor usando la etiqueta <form> y no olvidar el importante atributo enctype='multipart/form-data' que nos permitirá subir el video.

PHP

La información enviada desde el formulario como la extensión de archivo, comprobar el tamaño del archivo que no sea mayor que 5MB, estas validaciones lo harán PHP.

Usaremos el método POST para subir los videos al servidor web.

<!DOCTYPE html>
<html lang="es" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<title>Subir videos con PHP y MySQL</title>

<?php 
include("config.php");

if(isset($_POST['video_upload'])){
$maxsize = 5242880; // 5MB
$nombre_file = $_FILES['file_video']['name'];
//
$image_info = explode(".", $nombre_file); 
$nombre =format_uri($image_info[0]);
$image_type = end($image_info);
$file_video = $nombre."-".rand(10,999).".".$image_type;
//
$target_dir = "videos/";
$target_file = $target_dir.$file_video;

// Obtenemos la extension del archivo
$videoFileType = strtolower(pathinfo($nombre_file,PATHINFO_EXTENSION));

// extensiones validados
$extensions_arr = array("mp4","avi","3gp","mov","mpeg");

// Revisar extension
if( in_array($videoFileType,$extensions_arr) ){

// Revisar el tamaño del archivo
if(($_FILES['file_video']['size'] >= $maxsize) || ($_FILES["file_video"]["size"] == 0)) {
$error= "Archivo demasiado grande. El archivo debe ser menor que 5MB.";
}else{
// Subir
if(move_uploaded_file($_FILES['file_video']['tmp_name'],$target_file)){
// Insertar registro
$nombre = htmlentities($_POST['nombre']);

$query = $db->prepare("INSERT INTO `videos`(`nombre`, `ubicacion`)
VALUES (:nombre,:ubicacion)");
$query->bindParam(":nombre", $nombre);
$query->bindParam(":ubicacion", $file_video);
$query->execute();
if($query->rowCount() > 0){
header("location: index.php?estado=ok");
}
}
}

}else{
$error= "la extension del archivo es invalido.";
}

}
?>
</head>
<body class="d-flex flex-column h-100">

<header>
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container">
<a class="navbar-brand" href="#">BaulPHP</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">Portada <span class="sr-only">(current)</span></a>
</li> 
<li class="nav-item active">
<a class="nav-link" href="ver_videos.php">Ver videos <span class="sr-only">(current)</span></a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Busqueda</button>
</form>
</div>
</div>
</nav>
</header>

<!-- Begin page content -->
<hr>
<main role="main" class="flex-shrink-0">

<div class="container">
<div class="row">
<h3 class="mt-5">Subir videos con PHP y MySQL </h3>
</div>
<hr> 
<?php
if(isset($error)){
echo '<div class="alert alert-danger" role="alert"> '.$error.'</div>';
}
?>
<?php
if(isset($_GET["estado"])){
echo '<div class="alert alert-success" role="alert"> Video subido correctamente</div>';
}
?> 
<div class="row">

<form method="post" action="" enctype='multipart/form-data'>
<div class="form-group">
<label for="exampleInputEmail1">Nombre de Video</label>
<input name="nombre" type="text" class="form-control" id="exampleInputEmail1" placeholder="Ingrese nombre">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Video</label>
<!--inicio-->
<div class="custom-file mt-3 mb-3">
<input name="file_video" type="file" class="custom-file-input" id="customFile" required>
<label class="custom-file-label selected" for="customFile"></label>
</div>
<script>
// Add the following code if you want the name of the file appear on select
$(".custom-file-input").on("change", function() {
var fileName = $(this).val().split("\\").pop();
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>
<!--End:inicio-->
</div>
<button type="submit" class="btn btn-primary" name='video_upload'>Subir Video</button>
</form>

</div>
</div>
</main>
<footer class="footer mt-auto py-3">
<div class="container">
<span class="text-muted">Pie de pagina.</span>
</div>
</footer>
<!-- Aquí va el contenido de tu web -->

<!-- JavaScript -->

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>

D) Ver vídeos subidos

Si deseamos corroborar si la subida del video fue exitosa podemos usar este punto. Por lo tanto, obtendremos una lista de registros de la tabla de vídeos.
Para visualizar los videos subidos, tenemos que hacer uso de la etiqueta <video> y en elemento ponemos la variable $location en el atributo src de la mencionada etiqueta.

Código completo

<?php
include("config.php");
?>
<!DOCTYPE html>
<html lang="es" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<title>Subir videos con PHP y MySQL</title>

</head>
<body class="d-flex flex-column h-100">

<header>
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container">
<a class="navbar-brand" href="#">BaulPHP</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">Portada <span class="sr-only">(current)</span></a>
</li> 
<li class="nav-item active">
<a class="nav-link" href="ver_videos.php">Ver videos <span class="sr-only">(current)</span></a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Busqueda</button>
</form>
</div>
</div>
</nav>
</header>

<!-- Begin page content -->
<hr>
<main role="main" class="flex-shrink-0">

<div class="container">
<div class="row">
<h3 class="mt-5">Ver videos subidos con PHP y MySQL </h3>
</div>
<hr> 
<div class="row">
<?php
$query = $db->prepare("SELECT * FROM videos ORDER BY id DESC");
$query->execute();
$data = $query->fetchAll();
foreach ($data as $row):
$ubicacion = $row['ubicacion'];
echo "<div class='col-md-3'>";
echo "<video src='videos/".$ubicacion."' controls width='100%' height='200px' >";
echo "</div>";
endforeach;
?>

</div>
</div>
</main>
<footer class="footer mt-auto py-3">
<div class="container">
<span class="text-muted">Pie de pagina.</span>
</div>
</footer>
<!-- Aquí va el contenido de tu web -->

<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>

Cargue y almacene videos: Conclusión

Hemos aprendido a almacenar el archivo de vídeo en un directorio e insertar la ubicación del archivo en una tabla de base de datos MySQL.

Visualizar el archivo subido al servidor utilizando la etiqueta <video> elemento.

Validación al subir videos al servidor y de establecer el tamaño máximo del archivo para la validación del tamaño del archivo. Sin embargo, es importante asegurar de comprobar las directivas del núcleo de PHP post_max_size y upload_max_filesize en el archivo php.ini.

Espero que este articulo le haya sido de ayuda en sus proyectos. Si le resultó útil este tutorial, no se olvide de compartir.

Descargar: Subir videos usando PHP & MySQL

1 archivo(s) 6.15 KB

Descargar