Recherche avancée
Autres articles (7)
-
Encoding and processing into web-friendly formats
13 avril 2011, parMediaSPIP automatically converts uploaded files to internet-compatible formats.
Video files are encoded in MP4, Ogv and WebM (supported by HTML5) and MP4 (supported by Flash).
Audio files are encoded in MP3 and Ogg (supported by HTML5) and MP3 (supported by Flash).
Where possible, text is analyzed in order to retrieve the data needed for search engine detection, and then exported as a series of image files.
All uploaded files are stored online in their original format, so you can (...) -
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 (...) -
Supporting all media types
13 avril 2011, parUnlike most software and media-sharing platforms, MediaSPIP aims to manage as many different media types as possible. The following are just a few examples from an ever-expanding list of supported formats : images : png, gif, jpg, bmp and more audio : MP3, Ogg, Wav and more video : AVI, MP4, OGV, mpg, mov, wmv and more text, code and other data : OpenOffice, Microsoft Office (Word, PowerPoint, Excel), web (html, CSS), LaTeX, Google Earth and (...)
Sur d’autres sites (2466)
-
FFmpeg-wasm unpredictable errors with next js
21 juillet, par hjtomiI use ffmpeg-wasm in next-js.


Whenever I execute an ffmpeg command it has a chance that it throws a runtime error "memory access out of bounds". In this case I created a page that has an file selection html element and a button that converts each image to
.jpegformat with the following command :

await ffmpeg.exec(['-i', originalFileName, '-q:v', '5', convertedFileName]);


I have tried the same process with different images, extensions, sizes, restarting the application, restarting the computer, different browsers, mobile/desktop and sometimes it works, sometimes it doesn't. I feel like there is something that is out of my control.


Maybe something that has to do with webassembly itself.


In each runtime it has a 50-50 chance that ffmpeg will work or not.


I have tried changing the target extension to different types.


I have tried changing the ffmpeg command entirely to make it do something else.


Writing the files to the virtual file system works as expected.


I am on windows 10 using next-js version 15.3.5 and ffmpeg version 0.12.10


'use client';

import * as React from 'react';
import { FFmpeg } from '@ffmpeg/ffmpeg'; // Import FFmpeg
import { fetchFile, toBlobURL } from '@ffmpeg/util'; // Import fetchFile

export default function Page() {
 const [files, setFiles] = React.useState([]);
 const [error, setError] = React.useState<string null="null">(null);

 // FFmpeg related states and ref
 const ffmpegRef = React.useRef<ffmpeg null="null">(null);
 const [ffmpegLoaded, setFFmpegLoaded] = React.useState(false);
 const [isConvertingImages, setIsConvertingImages] = React.useState(false);
 const [videoGenerationProgress, setVideoGenerationProgress] = React.useState<string>('');

 // --- Load FFmpeg on component mount ---
 React.useEffect(() => {
 const loadFFmpeg = async () => {
 const baseURL = "https://unpkg.com/@ffmpeg/core@0.12.10/dist/umd";
 try {
 const ffmpeg = new FFmpeg();
 // Set up logging for FFmpeg progress
 ffmpeg.on('log', ({ message }) => {
 if (message.includes('frame=')) {
 setVideoGenerationProgress(message);
 }
 });
 await ffmpeg.load({
 coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
 wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, "application/wasm"),
 });
 ffmpegRef.current = ffmpeg;
 setFFmpegLoaded(true);
 console.log('FFmpeg loaded successfully!');
 } catch (err) {
 console.error('Failed to load FFmpeg:', err);
 setError('Failed to load video processing tools.');
 }
 };

 loadFFmpeg();
 }, []);

 // --- Internal file selection logic ---
 const handleFileChange = (e: React.ChangeEvent<htmlinputelement>) => {
 if (e.target.files && e.target.files.length > 0) {
 const newFiles = Array.from(e.target.files).filter(file => file.type.startsWith('image/')); // Only accept images
 setFiles(newFiles);
 setError(null);
 }
 };

 // --- Handle Image conversion ---
 const handleConvertImages = async () => {
 if (!ffmpegLoaded || !ffmpegRef.current) {
 setError('FFmpeg is not loaded yet. Please wait.');
 return;
 }
 if (files.length === 0) {
 setError('Please select images first to generate a video.');
 return;
 }

 setIsConvertingImages(true);
 setError(null);
 setVideoGenerationProgress('');

 try {
 const ffmpeg = ffmpegRef.current;
 const targetExtension = 'jpeg'; // <--- Define your target extension here (e.g., 'png', 'webp')
 const convertedImageNames: string[] = [];

 // Convert all uploaded images to the target format
 for (let i = 0; i < files.length; i++) {
 const file = files[i];
 // Give the original file a unique name in FFmpeg's VFS
 const originalFileName = `original_image_${String(i).padStart(3, '0')}.${file.name.split('.').pop()}`;
 // Define the output filename with the target extension
 const convertedFileName = `converted_image_${String(i).padStart(3, '0')}.${targetExtension}`;
 convertedImageNames.push(convertedFileName);

 // Write the original file data to FFmpeg's virtual file system
 await ffmpeg.writeFile(`${originalFileName}`, await fetchFile(file));
 console.log(`Wrote original ${originalFileName} to FFmpeg FS`);

 setVideoGenerationProgress(`Converting ${file.name} to ${targetExtension.toUpperCase()}...`);

 await ffmpeg.exec(['-i', originalFileName, '-q:v', '5', convertedFileName]); // <------

 console.log(`Converted ${originalFileName} to ${convertedFileName}`);

 // Delete the original file from VFS to free up memory
 await ffmpeg.deleteFile(originalFileName);
 console.log(`Deleted original ${originalFileName} from FFmpeg FS`);
 }

 setFiles([]);

 setVideoGenerationProgress(`All images converted to ${targetExtension.toUpperCase()}.`);
 } catch (err) {
 console.error('Error converting images:', err);
 setError(`Failed to convert images: ${err instanceof Error ? err.message : String(err)}`);
 } finally {
 setIsConvertingImages(false);
 }
 };

 return (
 <div classname="min-h-screen bg-gray-100 flex items-center justify-center p-4 relative overflow-hidden">
 <div classname="bg-white p-8 rounded-lg shadow-xl w-full max-w-md z-10 relative"> {/* Ensure content is above overlay */}
 <h2 classname="text-2xl font-semibold text-gray-800 mb-6 text-center">Select your images</h2>

 {/* Regular File Input Area (still needed for click-to-select) */}
 > document.getElementById('file-input')?.click()}
 >
 
 
 <svg classname="mx-auto h-12 w-12 text-gray-400" fill="none" viewbox="0 0 24 24" stroke="currentColor">
 <path strokelinecap="round" strokelinejoin="round" strokewidth="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
 </svg>
 <p classname="mt-2 text-sm text-gray-600">
 <span classname="font-medium text-blue-600">Click to select</span>
 </p>
 <p classname="text-xs text-gray-500">Supports multiple formats</p>
 </div>

 {/* Selected Files Display */}
 {files.length > 0 && (
 <div data-testid="selected-files-display" classname="selected-files-display mt-4 p-3 bg-blue-50 border border-blue-200 rounded-md text-sm text-blue-800">
 <p classname="font-semibold mb-2">Selected Files ({files.length}):</p>
 <ul classname="max-h-40 overflow-y-auto">
 {files.map((file) => (
 <li key="{file.name}" classname="flex items-center justify-between py-1">
 <span>{file.name}</span>
 </li>
 ))}
 </ul>
 </div>
 )}

 {/* Error Message */}
 {error && (
 <div classname="mt-4 p-3 bg-red-50 border border-red-200 rounded-md text-sm text-red-800">
 {error}
 </div>
 )}

 {/* Image conversion Progress/Status */}
 {isConvertingImages && (
 <div classname="mt-4 p-3 bg-purple-50 border border-purple-200 rounded-md text-sm text-purple-800 text-center">
 <p classname="font-semibold">Converting images</p>
 <p classname="text-xs mt-1">{videoGenerationProgress}</p>
 </div>
 )}
 {!ffmpegLoaded && (
 <div classname="mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded-md text-sm text-yellow-800 text-center">
 Loading video tools (FFmpeg)... Please wait.
 </div>
 )}

 {/* Convert images button */}
 
 Convert images
 
 </div>
 
 );
}
</htmlinputelement></string></ffmpeg></string>

The next js page above


-
How do I merge video, audio and subtitles together in ffmpeg via python ?
5 juin 2024, par user14609171I have been trying to merge a video, audio and subtitle stream in ffmepg but, since it is my first time trying it out, I am having a bit of trouble figuring out how to do so.


Goal : The output I am looking for a the video in the background with the subtitles overlayed in the center of the screen with the audio from the input stream, which in this case is an mp3 file.


These are my input streams :


video_input_stream = ffmpeg.input(background_video)
audio_input_stream = ffmpeg.input(audio)
subtitle_input_stream = ffmpeg.input(subtitle_file)


and I have successfully added sound to video like so :


ffmpeg.concat(video_with_subtitles, audio_input_stream, v=1, a=1)



and also subtitles like so :


ffmpeg.output(video_with_subtitles, output_video, vf=f"subtitles={subtitle_file}")


but not at the same time !


Thank you for helping.


-
Ubuntu ffmepg watermark position
8 juillet 2015, par Arnas Pečelisso I have command :
ffmpeg -i prepared/video.mp4 -i units/video_watermark.png -filter_complex overlay=main_w-overlay_w-10:main_h-overlay_h-10 -codec:a copy moved/video_test.mp4which should describe watermark position on bottom right but the watermark appears on the bottom center. what i’m doing wrong ?
also I tried this command :
ffmpeg -i prepared/video.mp4 -vf "movie=units/video_watermark.png [watermark]; [in][watermark] overlay=main_w-overlay_w-10:main_h-overlay_h-10 [out]" moved/output.mp4but with it watermark was not added, video was corrupted becouse of response :
[aac @ 0x3556540] The encoder ’aac’ is experimental but experimental codecs are not enabled, add ’-strict -2’ if you want to use it.
where is the clue ?
Syndiquer tout le site
