Recherche avancée
Autres articles (48)
-
Support audio et vidéo HTML5
10 avril 2011MediaSPIP utilise les balises HTML5 video et audio pour la lecture de documents multimedia en profitant des dernières innovations du W3C supportées par les navigateurs modernes.
Pour les navigateurs plus anciens, le lecteur flash Flowplayer est utilisé.
Le lecteur HTML5 utilisé a été spécifiquement créé pour MediaSPIP : il est complètement modifiable graphiquement pour correspondre à un thème choisi.
Ces technologies permettent de distribuer vidéo et son à la fois sur des ordinateurs conventionnels (...) -
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 (...) -
De l’upload à la vidéo finale [version standalone]
31 janvier 2010, parLe chemin d’un document audio ou vidéo dans SPIPMotion est divisé en trois étapes distinctes.
Upload et récupération d’informations de la vidéo source
Dans un premier temps, il est nécessaire de créer un article SPIP et de lui joindre le document vidéo "source".
Au moment où ce document est joint à l’article, deux actions supplémentaires au comportement normal sont exécutées : La récupération des informations techniques des flux audio et video du fichier ; La génération d’une vignette : extraction d’une (...)
Sur d’autres sites (5634)
-
Error using FFmpeg.wasm for audio files in react : "ffmpeg.FS('readFile', 'output.mp3') error. Check if the path exists"
25 février 2021, par Rayhan MemonI'm currently building a browser-based audio editor and I'm using ffmpeg.wasm (a pure WebAssembly/JavaScript port of FFmpeg) to do it.


I'm using this excellent example, which allows you to uploaded video file and convert it into a gif :


import React, { useState, useEffect } from 'react';
import './App.css';

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
const ffmpeg = createFFmpeg({ log: true });

function App() {
 const [ready, setReady] = useState(false);
 const [video, setVideo] = useState();
 const [gif, setGif] = useState();

 const load = async () => {
 await ffmpeg.load();
 setReady(true);
 }

 useEffect(() => {
 load();
 }, [])

 const convertToGif = async () => {
 // Write the file to memory 
 ffmpeg.FS('writeFile', 'test.mp4', await fetchFile(video));

 // Run the FFMpeg command
 await ffmpeg.run('-i', 'test.mp4', '-t', '2.5', '-ss', '2.0', '-f', 'gif', 'out.gif');

 // Read the result
 const data = ffmpeg.FS('readFile', 'out.gif');

 // Create a URL
 const url = URL.createObjectURL(new Blob([data.buffer], { type: 'image/gif' }));
 setGif(url)
 }

 return ready ? (
 
 <div classname="App">
 { video && 

 }


 <input type="file" />> setVideo(e.target.files?.item(0))} />

 <h3>Result</h3>

 <button>Convert</button>

 { gif && <img src="http://stackoverflow.com/feeds/tag/{gif}" width="250" style='max-width: 300px; max-height: 300px' />}

 </div>
 )
 :
 (
 <p>Loading...</p>
 );
}

export default App;


I've modified the above code to take an mp3 file recorded in the browser (recorded using the npm package 'mic-recorder-to-mp3' and passed to this component as a blobURL in the global state) and do something to it using ffmpeg.wasm :


import React, { useContext, useState, useEffect } from 'react';
import Context from '../../store/Context';
import Toolbar from '../Toolbar/Toolbar';
import AudioTranscript from './AudioTranscript';

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

//Create ffmpeg instance and set 'log' to true so we can see everything
//it does in the console
const ffmpeg = createFFmpeg({ log: true });

const AudioEditor = () => {
 //Setup Global State and get most recent recording
 const { globalState } = useContext(Context);
 const { blobURL } = globalState;

 //ready flag for when ffmpeg is loaded
 const [ready, setReady] = useState(false);

 const [outputFileURL, setOutputFileURL] = useState('');

 //Load FFmpeg asynchronously and set ready when it's ready
 const load = async () => {
 await ffmpeg.load();
 setReady(true);
 }

 //Use UseEffect to run the 'load' function on mount
 useEffect(() => {
 load();
 }, []);

 const ffmpegTest = async () => {
 //must first write file to memory as test.mp3
 ffmpeg.FS('writeFile', 'test.mp3', await fetchFile(blobURL));

 //Run the FFmpeg command
 //in this case, trim file size down to 1.5s and save to memory as output.mp3
 ffmpeg.run('-i', 'test.mp3', '-t', '1.5', 'output.mp3');

 //Read the result from memory
 const data = ffmpeg.FS('readFile', 'output.mp3');

 //Create URL so it can be used in the browser
 const url = URL.createObjectURL(new Blob([data.buffer], { type: 'audio/mp3' }));
 setOutputFileURL(url);
 }

 return ready ? ( 
 <div>
 <audiotranscript></audiotranscript>
 <toolbar></toolbar>
 <button>
 Edit
 </button>
 {outputFileURL && 
 
 }
 </div>
 ) : (
 <div>
 Loading...
 </div>
 )
}

export default AudioEditor;


This code returns the following error when I press the edit button to call the ffmpegTest function :



I've experimented, and when I tweak the culprit line of code to :


const data = ffmpeg.FS('readFile', 'test.mp3');


the function runs without error, simply returning the input file. So I assume there must be something wrong with ffmpeg.run() line not storing 'output.mp3' in memory perhaps ? I can't for the life of me figure out what's going on...any help would be appreciated !


-
FFMPEG 4.2.4, Python 3.9 : "ffmpeg : error while loading shared libraries : libopenh264.so.5 : cannot open shared object file : No such file or directory"
7 mars 2021, par WilanI'm using ffmpeg 4.2.4 and Python 3.9


Currently getting error :

ffmpeg: error while loading shared libraries: libopenh264.so.5: cannot open shared object file: No such file or directory

Tried the solutions from these links but they didn't work :

ffmpeg : error while loading shared libraries : libopenh264.so.5

Ffmpeg error in linux

If anyone has any idea how to fix it, or needs any more information, please let me know.


-
Getting the "Invalid data found when processing input" error when I try to convert a raw pcm file to mp3 ?
10 août 2023, par JironI tried to convert a file from pcm into mp3 with ffmpeg and the npm package fluent-ffmpeg. This is my code :


const ffmpeg = require('fluent-ffmpeg');

function convert(input, output, callback) {
 ffmpeg(input)
 .output(output)
 .on('end', function() { 
 console.log('conversion ended');
 callback(null);
 }).on('error', function(err){
 console.log('error: ' + err);
 callback(err);
 }).run();
 }

 convert('./test.pcm', './converted.mp3', function(err){
 if(!err) {
 console.log('conversion complete');
 }
});


But every time I execute the script, I get this error :


error: Error: ffmpeg exited with code 1: ./test.pcm: Invalid data found when processing input


When I tired running :


ffmpeg -f s16le -ar 48k -ac 2 -i test.pcm converted.mp3


Everything worked though. Is there something wrong with the npm package ? Is there something I missed out or something I did wrong on my code ?


Edit :


My code works when I try to convert an mp3 to a wav file (for example). So it's only struggling with pcm files.


Syndiquer tout le site
