{"id":20829,"date":"2025-01-13T13:35:41","date_gmt":"2025-01-13T12:35:41","guid":{"rendered":"https:\/\/www.transcrya.com\/?page_id=20829"},"modified":"2025-08-05T15:47:05","modified_gmt":"2025-08-05T13:47:05","slug":"ma-video-a-sous-titrer-2","status":"publish","type":"page","link":"https:\/\/www.transcrya.com\/?page_id=20829","title":{"rendered":"ma video a sous-titrer 2"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"20829\" class=\"elementor elementor-20829\" data-elementor-settings=\"[]\">\n\t\t\t\t\t\t\t<div class=\"elementor-section-wrap\">\n\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-9c844b4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"9c844b4\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a4a01cd\" data-id=\"a4a01cd\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8c9b6cf elementor-widget elementor-widget-text-editor\" data-id=\"8c9b6cf\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e94d7c2 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"e94d7c2\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-5935f6c\" data-id=\"5935f6c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f39cd48 elementor-widget elementor-widget-html\" data-id=\"f39cd48\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\n    #video-container {\r\n        position: sticky;\r\n        display: inline-block;\r\n        width: 600px;\r\n    }\r\n    .subtitle {\r\n        position: absolute;\r\n        bottom: 20px;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        color: white;\r\n        background-color: rgba(0, 0, 0, 0.7);\r\n        padding: 5px;\r\n        font-size: 18px;\r\n        cursor: pointer;\r\n        display: none;\r\n    }\r\n    .editing {\r\n        background-color: rgba(255, 255, 255, 0.8);\r\n        border: 1px solid #ccc;\r\n        color: black;\r\n    }\r\n    #save-subtitles {\r\n        margin-top: 20px;\r\n        padding: 10px 20px;\r\n        background-color: #0073aa;\r\n        color: white;\r\n        border: none;\r\n        cursor: pointer;\r\n    }\r\n    #save-subtitles:hover {\r\n        background-color: #005f8d;\r\n    }\r\n    #subtitles-table {\r\n        margin-top: 20px;\r\n        width: 100%;\r\n        border-collapse: collapse;\r\n    }\r\n    #subtitles-table th, #subtitles-table td {\r\n        padding: 8px;\r\n        text-align: left;\r\n    }\r\n    #subtitles-table tr:hover {\r\n        background-color: #f5f5f5;\r\n    }\r\n    .editable {\r\n        cursor: pointer;\r\n        color: #0073aa;\r\n    }\r\n<\/style>\r\n\r\n <script>\r\n        \/\/ Variables globales\r\n        let subtitlesData = [];\r\n        let subtitleElements = [];\r\n\r\n        document.addEventListener(\"DOMContentLoaded\", function () {\r\n            const textAreaDiv = document.getElementById(\"my-text-area\");\r\n\r\n            if (textAreaDiv) {\r\n                const videoUrl = textAreaDiv.textContent.trim(); \/\/ R\u00e9cup\u00e8re l'URL du MP4\r\n                if (videoUrl) {\r\n                    setVideoSource(videoUrl);\r\n                    const srtUrl = videoUrl.replace(\/\\.mp4$\/, \".srt\"); \/\/ G\u00e9n\u00e8re l'URL du fichier SRT\r\n                    loadSubtitles(srtUrl); \/\/ Charge les sous-titres avec cette URL\r\n                } else {\r\n                    console.error(\"Impossible de charger la vid\u00e9o et les sous-titres : URL introuvable.\");\r\n                }\r\n            }\r\n        });\r\n\r\n        \/\/ Met \u00e0 jour la source de la vid\u00e9o\r\n        function setVideoSource(videoUrl) {\r\n            const videoElement = document.getElementById(\"video\");\r\n            if (videoElement) {\r\n                videoElement.src = videoUrl;\r\n            }\r\n        }\r\n\r\n        \/\/ Charger les sous-titres SRT \u00e0 partir de l\u2019URL g\u00e9n\u00e9r\u00e9e\r\n        function loadSubtitles(srtUrl) {\r\n            fetch(srtUrl)\r\n                .then(response => response.text())\r\n                .then(text => {\r\n                    text = text.replace(\/\\\\\/g, ''); \/\/ Supprime tous les \\\r\n                    subtitlesData = parseSRT(text);\r\n                    console.log(\"Sous-titres charg\u00e9s:\", subtitlesData);\r\n                    displaySubtitlesOnVideo(subtitlesData);\r\n                    populateSubtitlesTable(subtitlesData); \/\/ Remplir le tableau avec les sous-titres\r\n                })\r\n                .catch(error => console.error(\"Erreur de chargement des sous-titres:\", error));\r\n        }\r\n\r\n        \/\/ Fonction pour analyser le fichier SRT\r\n        function parseSRT(data) {\r\n            const subtitles = [];\r\n            const lines = data.split(\/\\r?\\n\/);\r\n            let currentSubtitle = null;\r\n\r\n            for (let i = 0; i < lines.length; i++) {\r\n                let line = lines[i].trim();\r\n\r\n                if (!line) continue;\r\n\r\n                if (!isNaN(line)) {\r\n                    if (currentSubtitle) subtitles.push(currentSubtitle);\r\n                    currentSubtitle = { index: parseInt(line), timestamp: \"\", text: \"\" };\r\n                } else if (line.includes(\"-->\")) {\r\n                    currentSubtitle.timestamp = line.trim();\r\n                } else {\r\n                    currentSubtitle.text += (currentSubtitle.text ? \" \" : \"\") + line;\r\n                }\r\n            }\r\n\r\n            if (currentSubtitle) subtitles.push(currentSubtitle);\r\n            \r\n            console.log(\"Sous-titres analys\u00e9s:\", subtitles); \/\/ Debugging\r\n            return subtitles;\r\n        }\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\/\/ Fonction pour afficher les sous-titres au bon moment\r\nfunction showSubtitles() {\r\n    const video = document.getElementById('video');\r\n    const currentTime = video.currentTime;\r\n\r\n    subtitlesData.forEach((subtitle, index) => {\r\n        if (!subtitle.timestamp) return; \/\/ Ignore si pas de timestamp\r\n\r\n        const [start, end] = subtitle.timestamp.split(' --> ').map(time => {\r\n            const [hours, minutes, seconds] = time.split(':');\r\n            const [secs, millis] = seconds.split(',');\r\n            return parseInt(hours) * 3600 + parseInt(minutes) * 60 + parseInt(secs) + parseInt(millis) \/ 1000;\r\n        });\r\n\r\n        const subtitleElement = subtitleElements[index];\r\n\r\n        if (currentTime >= start && currentTime <= end) {\r\n            subtitleElement.style.display = 'block';\r\n        } else {\r\n            subtitleElement.style.display = 'none';\r\n        }\r\n    });\r\n}\r\n\r\n\r\n\r\n        \/\/ Fonction pour sauvegarder les sous-titres\r\n        function saveSubtitles() {\r\n            const srtContent = generateSRT(subtitlesData);\r\n            const formData = new FormData();\r\n            formData.append('subtitles', srtContent);\r\n            formData.append('action', 'save_subtitles');\r\n\r\n            fetch('\/wp-admin\/admin-ajax.php', {\r\n                method: 'POST',\r\n                body: formData\r\n            })\r\n            .then(response => response.json())\r\n            .then(data => {\r\n                if (data.success) {\r\n                    console.log('Sous-titres sauvegard\u00e9s avec succ\u00e8s');\r\n                } else {\r\n                    console.error('\u00c9chec de la sauvegarde des sous-titres');\r\n                }\r\n            })\r\n            .catch(error => console.error('Erreur lors de la sauvegarde:', error));\r\n        }\r\n\r\n        \/\/ G\u00e9n\u00e9rer un fichier SRT \u00e0 partir des sous-titres\r\n        function generateSRT(subtitles) {\r\n            return subtitles.map((sub, index) => {\r\n                return `${index + 1}\\n${sub.timestamp}\\n${sub.text}\\n`;\r\n            }).join(\"\\n\\n\"); \/\/ Ajout d'une ligne vide entre les sous-titres\r\n        }\r\n\r\n\/\/ Fonction pour remplir le tableau avec les sous-titres et timestamps\r\nfunction populateSubtitlesTable(subtitles) {\r\n    const tableBody = document.getElementById('subtitles-table').getElementsByTagName('tbody')[0]; \/\/ R\u00e9cup\u00e8re le <tbody> du tableau\r\n\r\nconst video = document.getElementById('video'); \r\n\r\n\r\n    \/\/ Effacer les lignes existantes\r\n    tableBody.innerHTML = '';\r\n\r\n    subtitles.forEach((subtitle, index) => {\r\n        const row = tableBody.insertRow();\r\n        const timestampCell = row.insertCell(0);\r\n        const subtitleCell = row.insertCell(1);\r\n\r\n        timestampCell.textContent = subtitle.timestamp; \/\/ Affiche le timestamp\r\n        subtitleCell.textContent = subtitle.text; \/\/ Affiche le texte du sous-titre\r\n\r\n        \/\/ Ajouter un \u00e9v\u00e9nement pour permettre l'\u00e9dition du timestamp\r\n        timestampCell.classList.add('editable'); \/\/ Ajouter la classe \"editable\"\r\n        \r\n        \/\/ L'\u00e9v\u00e9nement de clic pour modifier le timestamp\r\n        timestampCell.addEventListener('click', () => {\r\n            \/\/ Permettre l'\u00e9dition du timestamp\r\n            \r\n            document.getElementById('video').pause(); \/\/ Pause la vid\u00e9o\r\n                \r\n            timestampCell.contentEditable = true;\r\n            timestampCell.focus();\r\n            const [start, ] = subtitle.timestamp.split(' --> ').map(time => {\r\n    const [hours, minutes, seconds] = time.split(':');\r\n    const [secs, millis] = seconds.split(',');\r\n    return parseInt(hours) * 3600 + parseInt(minutes) * 60 + parseInt(secs) + parseInt(millis) \/ 1000;\r\n});\r\ndocument.getElementById('video').currentTime = start;\r\n\r\n        });\r\n\r\n        \/\/ L'\u00e9v\u00e9nement pour mettre \u00e0 jour le timestamp dans le tableau\r\n        timestampCell.addEventListener('input', () => {\r\n            const newTimestamp = timestampCell.textContent.trim();\r\n            if (validateTimestamp(newTimestamp)) {\r\n                subtitle.timestamp = newTimestamp; \/\/ Mise \u00e0 jour du timestamp dans les donn\u00e9es\r\n                updateVideoSubtitleTimestamp(index, newTimestamp); \/\/ Mettre \u00e0 jour le timestamp dans la vid\u00e9o\r\n            } else {\r\n                \/\/ Si le timestamp est invalide, restaurer l'ancien timestamp\r\n                timestampCell.textContent = subtitle.timestamp;\r\n            }\r\n        });\r\n\r\n        \/\/ Ajouter un \u00e9v\u00e9nement pour permettre l'\u00e9dition du texte du sous-titre\r\n        subtitleCell.classList.add('editable'); \/\/ Ajouter la classe \"editable\"\r\n        \r\n\r\n    \/\/ \u2705 CLIC SUR LA LIGNE ENTI\u00c8RE\r\nrow.addEventListener('click', () => {\r\n    const [start] = subtitle.timestamp.split(' --> ').map(time => {\r\n        const [hours, minutes, seconds] = time.split(':');\r\n        const [secs, millis] = seconds.split(',');\r\n        return (\r\n            parseInt(hours) * 3600 +\r\n            parseInt(minutes) * 60 +\r\n            parseInt(secs) +\r\n            parseInt(millis) \/ 1000\r\n        );\r\n    });\r\n\r\n    video.currentTime = start + 0.05;\r\n    video.pause();\r\n\r\n    \/\/ Cacher tous les sous-titres\r\n    subtitleElements.forEach(el => {\r\n        el.style.display = 'none';\r\n    });\r\n\r\n    \/\/ Afficher uniquement le sous-titre cliqu\u00e9\r\n    if (subtitleElements[index]) {\r\n        subtitleElements[index].style.display = 'block';\r\n    }\r\n});\r\n\r\n        \r\n    \r\n    \r\n        \/\/ L'\u00e9v\u00e9nement pour mettre \u00e0 jour le texte du sous-titre dans le tableau\r\nsubtitleCell.addEventListener('click', () => {\r\n    \r\n    document.getElementById('video').pause(); \/\/ Pause la vid\u00e9o\r\n    \r\n    subtitleCell.contentEditable = true;\r\n    subtitleCell.focus();\r\n\r\n    \/\/ Aller \u00e0 l'instant de d\u00e9but du sous-titre\r\n    const [start, ] = subtitle.timestamp.split(' --> ').map(time => {\r\n        const [hours, minutes, seconds] = time.split(':');\r\n        const [secs, millis] = seconds.split(',');\r\n        return parseInt(hours) * 3600 + parseInt(minutes) * 60 + parseInt(secs) + parseInt(millis) \/ 1000;\r\n    });\r\n    \r\n    video.currentTime = start + 0.3;\r\n    video.pause();\r\n\r\n    \/\/ Cacher tous les sous-titres\r\n    subtitleElements.forEach(el => {\r\n        el.style.display = 'none';\r\n    });\r\n\r\n    \/\/ Afficher uniquement le sous-titre cliqu\u00e9\r\n    if (subtitleElements[index]) {\r\n        subtitleElements[index].style.display = 'block';\r\n    }\r\n    \r\n\r\n    document.getElementById('video').currentTime = start;\r\n    document.getElementById('video').play(); \/\/ Optionnel : lancer la lecture automatiquement\r\n});\r\n\r\n\r\n        \/\/ L'\u00e9v\u00e9nement pour mettre \u00e0 jour le texte dans les donn\u00e9es\r\nsubtitleCell.addEventListener('input', () => {\r\n    subtitle.text = subtitleCell.textContent.trim();\r\n    updateVideoSubtitle(index, subtitle.text);\r\n\r\n    \/\/ Aller \u00e0 l'instant de d\u00e9but du sous-titre\r\n    const [start, ] = subtitle.timestamp.split(' --> ').map(time => {\r\n        const [hours, minutes, seconds] = time.split(':');\r\n        const [secs, millis] = seconds.split(',');\r\n        return parseInt(hours) * 3600 + parseInt(minutes) * 60 + parseInt(secs) + parseInt(millis) \/ 1000;\r\n    });\r\n\r\n    const video = document.getElementById('video');\r\n    video.currentTime = start;\r\n    video.pause(); \/\/ Met la vid\u00e9o en pause \u00e0 cet endroit\r\n});\r\n\r\n    });\r\n\r\n    makeTimestampsEditable(); \/\/ Ajouter l'\u00e9dition des timestamps\r\n}\r\n\r\n\/\/ Fonction pour afficher les sous-titres sur la vid\u00e9o\r\nfunction displaySubtitlesOnVideo(subtitles) {\r\n    const video = document.getElementById('video');\r\n    const container = document.getElementById('subtitles-container');\r\n\r\n    subtitles.forEach((subtitle, index) => {\r\n        const subtitleElement = document.createElement('div');\r\n        subtitleElement.id = `subtitle-${index}`;\r\n        subtitleElement.classList.add('subtitle');\r\n        subtitleElement.textContent = subtitle.text;\r\n        subtitleElement.setAttribute('data-index', index);\r\n\r\n        \/\/ Rendre le sous-titre modifiable au clic\r\nsubtitleElement.addEventListener('click', () => {\r\n    subtitleElement.setAttribute('contenteditable', 'true');\r\n    subtitleElement.classList.add('editing');\r\n    video.pause();\r\n\r\n    \/\/ Faire d\u00e9filer le tableau jusqu'\u00e0 la ligne correspondante\r\n    const tableRow = document.getElementById('subtitles-table').getElementsByTagName('tbody')[0].rows[index];\r\n    tableRow.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n\r\n    \/\/ Optionnel : mettre en surbrillance temporaire\r\n    tableRow.style.backgroundColor = '#ffe599';\r\n    setTimeout(() => {\r\n        tableRow.style.backgroundColor = '';\r\n    }, 1000);\r\n});\r\n\r\nsubtitleElement.addEventListener('blur', () => {\r\n    subtitle.text = subtitleElement.textContent.trim();\r\n    updateTableSubtitle(index, subtitle.text);\r\n});\r\n\r\n\r\n\r\n\r\n        \/\/ Mettre \u00e0 jour le texte dans la vid\u00e9o et le tableau pendant l'\u00e9dition\r\n        subtitleElement.addEventListener('input', () => {\r\n            const newText = subtitleElement.textContent;\r\n            subtitle.text = newText;  \/\/ Mise \u00e0 jour du texte dans les donn\u00e9es\r\n            updateTableSubtitle(index, newText);  \/\/ Mettre \u00e0 jour le texte dans le tableau imm\u00e9diatement\r\n            updateVideoSubtitle(index, newText);  \/\/ Mettre \u00e0 jour le texte dans la vid\u00e9o imm\u00e9diatement\r\n        });\r\n\r\n        container.appendChild(subtitleElement);\r\n        subtitleElements.push(subtitleElement);\r\n    });\r\n\r\n    console.log(\"Sous-titres affich\u00e9s:\", subtitleElements);\r\n    video.addEventListener('timeupdate', showSubtitles);\r\n}\r\n\r\n\r\n\/\/ Met \u00e0 jour le sous-titre dans le tableau\r\nfunction updateTableSubtitle(index, newText) {\r\n    const tableRow = document.getElementById('subtitles-table').getElementsByTagName('tbody')[0].rows[index];\r\n    const subtitleCell = tableRow.cells[1]; \/\/ La deuxi\u00e8me cellule contient le texte du sous-titre\r\n    subtitleCell.textContent = newText;\r\n}\r\n\r\n\/\/ Met \u00e0 jour le sous-titre dans la vid\u00e9o\r\nfunction updateVideoSubtitle(index, newText) {\r\n    const subtitleElement = subtitleElements[index];\r\n\r\n    \/\/ Ne pas \u00e9craser le texte si l'utilisateur est en train de l'\u00e9diter\r\n    if (!subtitleElement.isContentEditable) {\r\n        subtitleElement.textContent = newText;\r\n    }\r\n}\r\n\r\n\r\n\r\n\/\/ Fonction pour afficher les sous-titres au bon moment\r\nfunction showSubtitles() {\r\n    const video = document.getElementById('video');\r\n    const currentTime = video.currentTime;\r\n\r\n    subtitlesData.forEach((subtitle, index) => {\r\n        if (!subtitle.timestamp) return; \/\/ Ignore si pas de timestamp\r\n\r\n        const [start, end] = subtitle.timestamp.split(' --> ').map(time => {\r\n            const [hours, minutes, seconds] = time.split(':');\r\n            const [secs, millis] = seconds.split(',');\r\n            return parseInt(hours) * 3600 + parseInt(minutes) * 60 + parseInt(secs) + parseInt(millis) \/ 1000;\r\n        });\r\n\r\n        const subtitleElement = subtitleElements[index];\r\n\r\n        if (currentTime >= start && currentTime <= end) {\r\n            subtitleElement.style.display = 'block';\r\n        } else {\r\n            subtitleElement.style.display = 'none';\r\n        }\r\n    });\r\n}\r\n\r\n\r\n\/\/ Ajouter un \u00e9v\u00e9nement d'\u00e9dition dans le tableau pour mettre \u00e0 jour la vid\u00e9o\r\nfunction makeTimestampsEditable() {\r\n    const tableBody = document.getElementById('subtitles-table').getElementsByTagName('tbody')[0];\r\n\r\n    tableBody.querySelectorAll('tr').forEach((row, index) => {\r\n        const subtitleCell = row.cells[1]; \/\/ La deuxi\u00e8me cellule contient le texte du sous-titre\r\n\r\n        subtitleCell.addEventListener('input', () => {\r\n            const newText = subtitleCell.textContent.trim();\r\n            subtitlesData[index].text = newText;  \/\/ Mise \u00e0 jour du texte dans le tableau\r\n            updateVideoSubtitle(index, newText);  \/\/ Mettre \u00e0 jour le texte dans la vid\u00e9o imm\u00e9diatement\r\n            saveSubtitles();  \/\/ Sauvegarder les sous-titres apr\u00e8s la modification\r\n        });\r\n    });\r\n}\r\n\r\n\/\/ Fonction pour valider le format du timestamp\r\nfunction validateTimestamp(input) {\r\n    \/\/ S\u00e9parer d\u00e9but et fin\r\n    const parts = input.split(' --> ');\r\n\r\n    \/\/ V\u00e9rifier que nous avons bien 2 parties\r\n    if (parts.length !== 2) {\r\n        return false;\r\n    }\r\n\r\n    \/\/ Expression r\u00e9guli\u00e8re stricte : HH:MM:SS,mmm\r\n    const regex = \/^\\d{2}:\\d{2}:\\d{2},\\d{3}$\/;\r\n\r\n    \/\/ V\u00e9rifier les deux timestamps\r\n    const isValidStart = regex.test(parts[0].trim());\r\n    const isValidEnd = regex.test(parts[1].trim());\r\n\r\n    console.log(\"Validation Start:\", parts[0].trim(), \"R\u00e9sultat:\", isValidStart);\r\n    console.log(\"Validation End:\", parts[1].trim(), \"R\u00e9sultat:\", isValidEnd);\r\n\r\n    return isValidStart && isValidEnd;\r\n}\r\n\r\n\/\/ Met \u00e0 jour le timestamp dans la vid\u00e9o en synchronisation avec le tableau\r\nfunction updateVideoSubtitleTimestamp(index, newTimestamp) {\r\n    const video = document.getElementById('video');\r\n    const subtitleElement = subtitleElements[index];\r\n\r\n    \/\/ Convertir le timestamp en secondes pour la vid\u00e9o\r\n    const [start, end] = newTimestamp.split(' --> ').map(time => {\r\n        const [hours, minutes, seconds] = time.split(':');\r\n        const [secs, millis] = seconds.split(',');\r\n        return parseInt(hours) * 3600 + parseInt(minutes) * 60 + parseInt(secs) + parseInt(millis) \/ 1000;\r\n    });\r\n\r\n    \/\/ Mettre \u00e0 jour le texte du sous-titre dans la vid\u00e9o\r\n    subtitleElement.setAttribute('data-start', start);\r\n    subtitleElement.setAttribute('data-end', end);\r\n\r\n    \/\/ Mettre \u00e0 jour les sous-titres affich\u00e9s \u00e0 partir des nouveaux timestamps\r\n    video.addEventListener('timeupdate', showSubtitles);\r\n}\r\n\r\n\r\n\r\n    <\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d37a803 elementor-widget elementor-widget-html\" data-id=\"d37a803\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<table id=\"subtitles-table\" border=\"1\" style=\"width: 100%; margin-top: 20px;\">\r\n    <thead>\r\n        <tr>\r\n            <th>Horodatage<\/th>\r\n            <th>Sous-titres<\/th>\r\n        <\/tr>\r\n    <\/thead>\r\n    <tbody>\r\n        <!-- Les sous-titres seront ajout\u00e9s ici -->\r\n    <\/tbody>\r\n<\/table>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"jet-sticky-column-sticky elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-f4c7cc4 ma-colonne-video\" data-jet-sticky-column-settings=\"{&quot;id&quot;:&quot;f4c7cc4&quot;,&quot;sticky&quot;:true,&quot;topSpacing&quot;:0,&quot;bottomSpacing&quot;:0,&quot;stickyOn&quot;:[&quot;desktop&quot;,&quot;tablet&quot;]}\" data-id=\"f4c7cc4\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-fa61aa9 elementor-widget elementor-widget-html\" data-id=\"fa61aa9\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- Conteneur de la vid\u00e9o -->\r\n<div id=\"video-container\" style=\"position: relative;\">\r\n    <video id=\"video\" width=\"400\" controls>\r\n        <source id=\"video-source\" src=\"\" type=\"video\/mp4\">\r\n        Votre navigateur ne supporte pas la lecture de la vid\u00e9o.\r\n    <\/video>\r\n\r\n    <!-- Zone pour les sous-titres -->\r\n    <div id=\"subtitles-container\" style=\"position: absolute; bottom: 20px; width: 100%; text-align: center;\">\r\n        <!-- Les sous-titres seront ajout\u00e9s ici -->\r\n    <\/div>\r\n<\/div>\r\n\r\n<!-- Bouton pour lancer la vid\u00e9o -->\r\n<button id=\"play-button\" style=\"\r\n    margin-bottom: 10px;\r\n    padding: 10px 20px;\r\n    background-color: #3498db;\r\n    color: white;\r\n    border: none;\r\n    border-radius: 5px;\r\n    font-size: 16px;\r\n    cursor: pointer;\r\n    transition: opacity 0.8s ease;\r\n    position: absolute;\r\n    z-index: 10;\r\n    top: 10px;\r\n    left: 10px;\r\n\">\r\n    \u25b6\ufe0f Lancer la vid\u00e9o<\/button>\r\n\r\n<!-- Script plac\u00e9 apr\u00e8s le HTML -->\r\n<script>\r\n    document.addEventListener('DOMContentLoaded', function () {\r\n        \/\/ R\u00e9cup\u00e9rer l'URL de la vid\u00e9o depuis la div\r\n        var myTextArea = document.getElementById(\"my-text-area\");\r\n        if (myTextArea) {\r\n            var videoUrl = myTextArea.textContent.trim();\r\n            var sourceElement = document.getElementById(\"video-source\");\r\n            sourceElement.src = videoUrl;\r\n\r\n            \/\/ Recharger la vid\u00e9o pour appliquer la nouvelle source\r\n            document.getElementById(\"video\").load();\r\n        } else {\r\n            console.error(\"L'\u00e9l\u00e9ment 'my-text-area' n'a pas \u00e9t\u00e9 trouv\u00e9 !\");\r\n        }\r\n\r\n        \/\/ R\u00e9cup\u00e9rer le bouton et la vid\u00e9o\r\n        var video = document.getElementById(\"video\");\r\n        var playButton = document.getElementById(\"play-button\");\r\n\r\n        if (playButton && video) {\r\n            \/\/ Lorsque l'utilisateur clique sur le bouton\r\n            playButton.addEventListener(\"click\", function () {\r\n                video.play().then(() => {\r\n                    \/\/ Animation de fondu du bouton\r\n                    playButton.style.opacity = \"0\";\r\n                    setTimeout(() => {\r\n                        playButton.style.display = \"none\";\r\n                    }, 800); \/\/ Correspond au d\u00e9lai de transition CSS\r\n                }).catch(err => {\r\n                    console.warn(\"Lecture bloqu\u00e9e :\", err);\r\n                    alert(\"Cliquez directement sur la vid\u00e9o si elle ne d\u00e9marre pas.\");\r\n                });\r\n            });\r\n        } else {\r\n            console.error(\"Le bouton ou la vid\u00e9o n'a pas \u00e9t\u00e9 trouv\u00e9.\");\r\n        }\r\n    });\r\n<\/script>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a5e82b3 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a5e82b3\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e311e41\" data-id=\"e311e41\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-29e2a22 elementor-widget elementor-widget-text-editor\" data-id=\"29e2a22\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\tFichier introuvable.<font color=white><div id=\"my-text-area\">https:\/\/www.transcrya.com\/wp-content\/plugins\/file-away\/fichiers\/\/downloads\/video\/nonvalides\/.mp4<\/div><\/font>\n\n\n<!DOCTYPE html>\n<html lang=\"fr\">\n\n<body>\n    <div class=\"subtitle-form\">\n        <form method=\"POST\" action=\"\/?page_id=25747\">\n\n\t\t\t\t\t\t<input type=\"hidden\" name=\"nblignes\" value=\"0\">\n\t\t\t<input type=\"hidden\" name=\"nomcourtfile\" value=\"\">\n\t\t\t<input type=\"hidden\" name=\"typestretrg\" value=\"\">\n\t\t\t<input type=\"hidden\" name=\"langtradsrt\" value=\"\">\n\t\t\t<input type=\"hidden\" name=\"videosubtitleformat\" value=\"\">\n\t\t\t<input type=\"hidden\" name=\"traductionsrt\" value=\"\">\n\t\t\t<input type=\"hidden\" name=\"typeexportstr\" value=\"\">\n\t\t\t<input type=\"hidden\" name=\"objectifstr\" value=\"\">\n\t\t\t<input type=\"hidden\" name=\"reseaux\" value=\"\">\n\t\t\t<input type=\"hidden\" name=\"reseaux2\" value=\"\">\n\t\t\t<input type=\"hidden\" name=\"stylers\" value=\"\">\n\t\t\t<input type=\"hidden\" name=\"stylecl\" value=\"\">\n\t\t\t<input type=\"hidden\" name=\"typetelech\" value=\"\">\n\t\t\t<input type=\"hidden\" name=\"sup\" value=\"\">\n\t\t\t<input type=\"hidden\" name=\"reso\" value=\"\">\n\t\t\t<input type=\"hidden\" name=\"typepublication\" value=\"\">\n            <button type=\"submit\" name=\"valid\" id=\"valider-btn\">Valider les modifications<\/button>\n        <\/form>\n    <\/div>\n<\/body>\n<\/html>\n\n\n\n\t\n\t\n\t\n\t\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1927016 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1927016\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-aa5a188\" data-id=\"aa5a188\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4ea49ad elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4ea49ad\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b381531\" data-id=\"b381531\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a3ac375 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a3ac375\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7505e93\" data-id=\"7505e93\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1f35d1b elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1f35d1b\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1ad70f8\" data-id=\"1ad70f8\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f8ac6a1 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f8ac6a1\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-cfa2a1b\" data-id=\"cfa2a1b\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-141c036 elementor-widget elementor-widget-html\" data-id=\"141c036\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<script>\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n    const btn = document.getElementById('valider-btn');\r\n    const form = btn?.closest('form');\r\n\r\n    \/\/ Apr\u00e8s rechargement : on soumet si le flag est pr\u00e9sent\r\n    if (sessionStorage.getItem('submitAfterReload') === '1') {\r\n        sessionStorage.removeItem('submitAfterReload');\r\n        if (form) form.submit();\r\n    }\r\n\r\n    \/\/ Avant rechargement : on intercepte le clic\r\n    if (btn && form) {\r\n        btn.addEventListener('click', function (e) {\r\n            e.preventDefault(); \/\/ Bloque l'envoi imm\u00e9diat\r\n            sessionStorage.setItem('submitAfterReload', '1');\r\n            location.reload(); \/\/ Recharge la page\r\n        });\r\n    }\r\n});\r\n<\/script>\r\n\r\n\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Horodatage Sous-titres Votre navigateur ne supporte pas la lecture de la vid\u00e9o. \u25b6\ufe0f Lancer la vid\u00e9o<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-20829","page","type-page","status-publish","hentry","entry","owp-thumbs-layout-horizontal","owp-btn-normal","owp-tabs-layout-horizontal","has-no-thumbnails"],"_links":{"self":[{"href":"https:\/\/www.transcrya.com\/index.php?rest_route=\/wp\/v2\/pages\/20829","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.transcrya.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.transcrya.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.transcrya.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.transcrya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=20829"}],"version-history":[{"count":777,"href":"https:\/\/www.transcrya.com\/index.php?rest_route=\/wp\/v2\/pages\/20829\/revisions"}],"predecessor-version":[{"id":27586,"href":"https:\/\/www.transcrya.com\/index.php?rest_route=\/wp\/v2\/pages\/20829\/revisions\/27586"}],"wp:attachment":[{"href":"https:\/\/www.transcrya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=20829"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}