Recherche avancée
Médias (3)
-
Exemple de boutons d’action pour une collection collaborative
27 février 2013, par
Mis à jour : Mars 2013
Langue : français
Type : Image
-
Exemple de boutons d’action pour une collection personnelle
27 février 2013, par
Mis à jour : Février 2013
Langue : English
Type : Image
-
Collections - Formulaire de création rapide
19 février 2013, par
Mis à jour : Février 2013
Langue : français
Type : Image
Autres articles (111)
-
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 (...) -
Amélioration de la version de base
13 septembre 2013Jolie sélection multiple
Le plugin Chosen permet d’améliorer l’ergonomie des champs de sélection multiple. Voir les deux images suivantes pour comparer.
Il suffit pour cela d’activer le plugin Chosen (Configuration générale du site > Gestion des plugins), puis de configurer le plugin (Les squelettes > Chosen) en activant l’utilisation de Chosen dans le site public et en spécifiant les éléments de formulaires à améliorer, par exemple select[multiple] pour les listes à sélection multiple (...) -
Mise à jour de la version 0.1 vers 0.2
24 juin 2013, parExplications des différents changements notables lors du passage de la version 0.1 de MediaSPIP à la version 0.3. Quelles sont les nouveautés
Au niveau des dépendances logicielles Utilisation des dernières versions de FFMpeg (>= v1.2.1) ; Installation des dépendances pour Smush ; Installation de MediaInfo et FFprobe pour la récupération des métadonnées ; On n’utilise plus ffmpeg2theora ; On n’installe plus flvtool2 au profit de flvtool++ ; On n’installe plus ffmpeg-php qui n’est plus maintenu au (...)
Sur d’autres sites (9290)
-
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.


-
Adjust client implementations for new demo file size restrictions.
24 mai 2015, par blueimpAdjust client implementations for new demo file size restrictions.
-
How to make a nonstreamable mp4 streamable from a JS browser client ?
14 mai 2020, par Daniel KobeFor my service we are sending videos that need processing. Unfortunately some of the videos are non streamable. By that I mean the metadata information is at the end of the file and not the beginning. With ffmpeg you can make a video streamable with this command :
ffmpeg -i source.mp4 -a:v copy -a:c copy -movflags faststart output.mp4


Is there anyway I can replicate ffmpegs
faststartlogic from a JS client ?


I see that there are libaries like
ffmpeg.jsbut I was hoping to avoid having a huge library in the code.

Syndiquer tout le site
