Recherche avancée
Médias (16)
-
#7 Ambience
16 octobre 2011, par
Mis à jour : Juin 2015
Langue : English
Type : Audio
-
#6 Teaser Music
16 octobre 2011, par
Mis à jour : Février 2013
Langue : English
Type : Audio
-
#5 End Title
16 octobre 2011, par
Mis à jour : Février 2013
Langue : English
Type : Audio
-
#3 The Safest Place
16 octobre 2011, par
Mis à jour : Février 2013
Langue : English
Type : Audio
-
#4 Emo Creates
15 octobre 2011, par
Mis à jour : Février 2013
Langue : English
Type : Audio
-
#2 Typewriter Dance
15 octobre 2011, par
Mis à jour : Février 2013
Langue : English
Type : Audio
Autres articles (43)
-
Emballe médias : à quoi cela sert ?
4 février 2011, parCe plugin vise à gérer des sites de mise en ligne de documents de tous types.
Il crée des "médias", à savoir : un "média" est un article au sens SPIP créé automatiquement lors du téléversement d’un document qu’il soit audio, vidéo, image ou textuel ; un seul document ne peut être lié à un article dit "média" ; -
HTML5 audio and video support
13 avril 2011, parMediaSPIP uses HTML5 video and audio tags to play multimedia files, taking advantage of the latest W3C innovations supported by modern browsers.
The MediaSPIP player used has been created specifically for MediaSPIP and can be easily adapted to fit in with a specific theme.
For older browsers the Flowplayer flash fallback is used.
MediaSPIP allows for media playback on major mobile platforms with the above (...) -
MediaSPIP v0.2
21 juin 2013, parMediaSPIP 0.2 is the first MediaSPIP stable release.
Its official release date is June 21, 2013 and is announced here.
The zip file provided here only contains the sources of MediaSPIP in its standalone version.
To get a working installation, you must manually install all-software dependencies on the server.
If you want to use this archive for an installation in "farm mode", you will also need to proceed to other manual (...)
Sur d’autres sites (8328)
-
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


-
create animated FFMPEG video
23 octobre 2015, par Ashish TondakHi,
I am having trouble in creating a video with some transition effects on images
using FFMPEG commands.I have used this command to overlay multiple images with a background image and an audio file.
Working Fine :
ffmpeg -loop 1 -framerate 1 -i bg2.jpg -framerate 1/5 -i img%03d.jpg -i audio.mp3 -filter_complex overlay=(W-w)/2 :(H-h)/2:shortest=1,format=yuv420p -c:v libx264 -r 30 -c:a aac -strict experimental -b:a 192k -movflags +faststart -shortest bg_audio_images.mp4
But Now i want to have some effects to be added with this like some animation on images other than moving from left to right.. if i can move upside down or add zoom in effect on each image as they go left to right.
OR you can share me ideas on how people writing complex commands/using filter complex for animations.
Thanks a lot..
S/D Ashish Tondak -
FFmpeg on iPhone - Modifying Video Orientation
6 avril 2015, par Matthew McGooganI’m messing with h264 videos loaded with FFmpeg on the iPhone 3GS. The problem is any videos recorded in "Portrait" orientation have a transformation matrix applied to them causing them to display rotated 90 degrees counter-clock.
From what I understand thus far, I just need to modify the transform matrix in the ’tkhd’ atom. The problem is I am having trouble accessing or modifying this data. I checked out the FFmpeg implementation for :
static int mov_read_tkhd(MOVContext *c, ByteIOContext *pb, MOVAtom atom)which clearly shows how the matrix is accessed in avformat but when I try to access the header bytes using the same functions I am not getting any rational values. Even if I were to successfully pull the matrix I’m not sure how to replace it ? FFmpeg has functions for retrieving and appending to the track header but nothing for replace it seems ?
Any help would be greatly appreciated.
Thanks,
Matt.
Syndiquer tout le site
