Outil de découpe de vidéo

Cut Add Audio Remove Audio Add Video Remove Video Add Text Add Effect Export const fileInput = document.getElementById('fileInput'); const cutButton = document.getElementById('cutButton'); const addAudioButton = document.getElementById('addAudioButton'); const removeAudioButton = document.getElementById('removeAudioButton'); const addVideoButton = document.getElementById('addVideoButton'); const removeVideoButton = document.getElementById('removeVideoButton'); const addTextButton = document.getElementById('addTextButton'); const addEffectButton = document.getElementById('addEffectButton'); const exportButton = document.getElementById('exportButton'); const video = document.getElementById('video'); const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); let editedVideoBlob = null; // Upload and display the video fileInput.addEventListener('change', (event) => { const file = event.target.files[0]; const fileURL = URL.createObjectURL(file); video.src = fileURL; }); // Cut and trim the video cutButton.addEventListener('click', () => { // Set the start and end times for the cut based on the currentTime of the video element const startTime = video.currentTime; const endTime = video.duration; // Create a new Blob object from the frame of the video at the start time const frame = context.getImageData(0, 0, canvas.width, canvas.height); const frameBlob = new Blob([frame], { type: 'image/jpeg' }); // Create a new video element and set its src attribute to the Blob const cutVideo = document.createElement('video'); cutVideo.src = URL.createObjectURL(frameBlob); // Set the currentTime of the new video element to the start time and the duration to the end time minus the start time cutVideo.currentTime = startTime; cutVideo.duration = endTime - startTime; // Update the edited video Blob with the new video element editedVideoBlob = new Blob([cutVideo], { type: 'video/mp4' }); }); // Add and remove audio tracks addAudioButton.addEventListener('click', () => { // Use the MediaStream API to capture audio from a microphone or other audio input device navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => { // Use the AudioContext API to create an audio track from the captured audio and add it to the video element const audioCtx = new AudioContext(); const audioTrack = audioCtx.createMediaStreamSource(stream); audioTrack.connect(audioCtx.destination); video.srcObject = stream; }); }); removeAudioButton.addEventListener('click', () => { // Use the AudioContext API to remove the audio track from the video element by muting it or setting its volume to zero const audioCtx = new AudioContext(); const audioTrack = audioCtx.createMediaStreamSource(video.srcObject); audioTrack.gain.value = 0; }); // Add and remove video tracks addVideoButton.addEventListener('click', () => { // Use the MediaStream API to capture video from a webcam or other video input device navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => { // Use the VideoTrack API to create a video track from the captured video and add it to the video element const videoTrack = stream.getVideoTracks()[0]; video.srcObject = stream; }); }); removeVideoButton.addEventListener('click', () => { // Use the VideoTrack API to remove the video track from the video element by setting its enabled property to false const videoTrack = video.srcObject.getVideoTracks()[0]; videoTrack.enabled = false; }); // Add and modify text overlays addTextButton.addEventListener('click', () => { // Use the CanvasRenderingContext2D.fillText() method to add text // Add and modify text overlays addTextButton.addEventListener('click', () => { // Use the CanvasRenderingContext2D.fillText() method to add text overlays to the video element context.fillText('Text overlay', 10, 10); }); modifyTextButton.addEventListener('click', () => { // Use the CanvasRenderingContext2D.font and CanvasRenderingContext2D.fillStyle properties to modify the font and color of the text overlays context.font = '24px Arial'; context.fillStyle = 'red'; }); // Add and modify visual effects addEffectButton.addEventListener('click', () => { // Use the CanvasRenderingContext2D.filter property to apply visual effects to the video element, such as blurring, sharpening, or colorizing context.filter = 'blur(5px)'; }); modifyEffectButton.addEventListener('click', () => { // Use the CanvasRenderingContext2D.filter property to modify the visual effects applied to the video element context.filter = 'brightness(50%)'; }); // Export the edited video exportButton.addEventListener('click', () => { // Use the Blob constructor and the URL.createObjectURL() method to create a URL for the edited video const editedVideoUrl = URL.createObjectURL(editedVideoBlob); // Use an element with the download attribute to trigger a download of the edited video downloadLink.href = editedVideoUrl; downloadLink.style.display = 'inline'; });