Recherche avancée
Médias (91)
-
Spitfire Parade - Crisis
15 mai 2011, par
Mis à jour : Septembre 2011
Langue : English
Type : Audio
-
Wired NextMusic
14 mai 2011, par
Mis à jour : Février 2012
Langue : English
Type : Video
-
Video d’abeille en portrait
14 mai 2011, par
Mis à jour : Février 2012
Langue : français
Type : Video
-
Sintel MP4 Surround 5.1 Full
13 mai 2011, par
Mis à jour : Février 2012
Langue : English
Type : Video
-
Carte de Schillerkiez
13 mai 2011, par
Mis à jour : Septembre 2011
Langue : English
Type : Texte
-
Publier une image simplement
13 avril 2011, par ,
Mis à jour : Février 2012
Langue : français
Type : Video
Autres articles (72)
-
MediaSPIP v0.2
21 juin 2013, parMediaSPIP 0.2 est la première version de MediaSPIP stable.
Sa date de sortie officielle est le 21 juin 2013 et est annoncée ici.
Le fichier zip ici présent contient uniquement les sources de MediaSPIP en version standalone.
Comme pour la version précédente, il est nécessaire d’installer manuellement l’ensemble des dépendances logicielles sur le serveur.
Si vous souhaitez utiliser cette archive pour une installation en mode ferme, il vous faudra également procéder à d’autres modifications (...) -
MediaSPIP version 0.1 Beta
16 avril 2011, parMediaSPIP 0.1 beta est la première version de MediaSPIP décrétée comme "utilisable".
Le fichier zip ici présent contient uniquement les sources de MediaSPIP en version standalone.
Pour avoir une installation fonctionnelle, il est nécessaire d’installer manuellement l’ensemble des dépendances logicielles sur le serveur.
Si vous souhaitez utiliser cette archive pour une installation en mode ferme, il vous faudra également procéder à d’autres modifications (...) -
MediaSPIP Player : les contrôles
26 mai 2010, parLes contrôles à la souris du lecteur
En plus des actions au click sur les boutons visibles de l’interface du lecteur, il est également possible d’effectuer d’autres actions grâce à la souris : Click : en cliquant sur la vidéo ou sur le logo du son, celui ci se mettra en lecture ou en pause en fonction de son état actuel ; Molette (roulement) : en plaçant la souris sur l’espace utilisé par le média (hover), la molette de la souris n’exerce plus l’effet habituel de scroll de la page, mais diminue ou (...)
Sur d’autres sites (7734)
-
rtmp : Set the client buffer time to 3s instead of 0.26s
13 juin 2012, par Samuel Pitoisetrtmp : Set the client buffer time to 3s instead of 0.26s
-
rtmp : Set the client buffer time to 3s instead of 0.26s
13 juin 2012, par Samuel Pitoisetrtmp : Set the client buffer time to 3s instead of 0.26s
-
Nextjs/React/JS How compress video file uploaded by user through input (client side preferred)
1er novembre 2022, par vana22I have made a basic app where the user can upload a video file through an input.
As you can see in the code i also retrieve the duration and the size of the initial video.


Now the question is, how i can compress the video file in the function "compressvid" so that the size of the video becomes massively smaller (at later stage i want to upload these videos to firebase firestore).
I'e read something about ffmpeg but wasn't able to figure out how to use it here.
I prefer it to be client side as the videos a client can upload are at max 30sec long.
If client side is not possible how would it work server side ?


import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { useState, useEffect } from 'react'

export default function Home() {

 const [videofile, setVideo] = useState("")
 const [viddur, setviddur] = useState("")


 useEffect(() => {
 // only run this if videofile exists
 if (videofile != "") {
 console.log("compress video now ")
 console.log(videofile.type)


 // get duration of video by creating a theoretical video component
 var video = document.createElement('video');
 video.preload = 'metadata';
 video.onloadedmetadata = function() {
 window.URL.revokeObjectURL(video.src);
 // here now can check if video is too long
 setviddur(video.duration)
 }
 video.src = URL.createObjectURL(videofile)
 
 }
 }, [videofile]);

 const clickedvideo = () => {
 console.log("clicked video")
 }

 const compressvid = () => {
 // here need to compress the video so that the size is smaller: preferred client-side; if that's not possible howis it posssible server side or with a cheap api
 }

 return (
 <div classname="{styles.container}">
 
 
 
 
 

 <main classname="{styles.main}">
 <h1 classname="{styles.title}">
 Video compressor
 </h1>
 <p>Size of video before: {videofile.size}</p>
 <p>Duration of video: {viddur}</p>
 <p>Size of video after: { }</p>
 <input classname="{styles.videoinput}" type="file" accept="video/mp4,video/x-m4v,video/*" />> setVideo(e.target.files[0])}>
 <div>
 {(videofile != "") ? <video autoplay="autoplay" loop="loop" src="{URL.createObjectURL(videofile)}" width="300px" height="300px"></video> : null}
 </div>
 </main>
 </div>
 )
}


I tried to compress a video uploaded by a user but didn't figure out how to solve it.


Syndiquer tout le site
