將HTML中文本內容的JS影片匯出為影片gif或PowerPoint可匯入畫布物件

我的目標是將 JS 影片匯入 PowerPoint 以與幻燈片組一起使用。我該如何實作？

我不是在尋找代表我完成的作業。我需要一些關于完成這項任務的技術的建議。

幻燈片背景（在透明背景影片后面）

這是 HTML/JS 影片。

// ——————————————————————————————————————————————————
        // TextScramble
        // ——————————————————————————————————————————————————

        class TextScramble {
            constructor(elm, numWords) {
                this.el = el
                this.numWords = numWords;
                this.chars = '!\\<>-_\\/[]{}—= *^?#1234567890________'
                this.update = this.update.bind(this)
            }
            setText(newText) {
                const oldText = this.el.innerText
                const length = Math.max(oldText.length, newText.length)
                const promise = new Promise((resolve) => this.resolve = resolve)
                this.queue = []
                for (let i = 0; i < length; i  ) {
                    const from = oldText[i] || ''
                    const to = newText[i] || ''
                    const start = Math.floor(Math.random() * 40)
                    const end = start   Math.floor(Math.random() * 40)
                    this.queue.push({ from, to, start, end })
                }
                cancelAnimationFrame(this.frameRequest)
                this.frame = 0
                this.update()
                return promise
            }
            update = () => {
                let output = ''
                let complete = 0
                for (let i = 0, n = this.queue.length; i < n; i  ) {
                    let { from, to, start, end, char } = this.queue[i]
                    if (this.frame >= end) {
                        complete  
                        output  = to
                    } else if (this.frame >= start) {
                        if (!char || Math.random() < 0.28) {
                            char = this.randomChar()
                            this.queue[i].char = char
                        }
                        output  = `<span >${char}</span>`
                    } else {
                        output  = from
                    }
                }
                this.el.innerHTML = output
                if (complete === this.queue.length) {
                    this.resolve()
                } 
                else {
                    this.frameRequest = requestAnimationFrame(this.update)
                    this.frame  
                }
            }
            randomChar() {
                return this.chars[Math.floor(Math.random() * this.chars.length)]
            }
        }

        // ——————————————————————————————————————————————————
        // Example
        // ——————————————————————————————————————————————————

        const phrases = {
            'Programming' : 'none',
            'With' : 'none',
            'Ali': 'none',
            '<pwa/>': 'none',
            'Programming With Ali' : 'fade'
        }
        let phraseValues = Object.keys(phrases);
        const el = document.querySelector('.text')
        const fx = new TextScramble(el, phraseValues.length)

        let counter = 0
        let animation = phraseValues[0];

        let animate = (callback) => {
            debugger;
            callback();
            return function() {
                document.querySelector(".text").animate([
                   // keyframes
                   { opacity: '0' },
                   { opacity: '1' }
                ], {
                    // timing options
                    duration: 3500
                });
            }
        }   

        const next = () => {
        fx.setText(phraseValues[counter]).then(() => {
                if (counter < phraseValues.length-1)
                    setTimeout(next, 800)
                else {
                    setTimeout(() => {next, animate(next, fx.update)()}, 800)
                }
            })
            counter = (counter   1) % phraseValues.length
        }
        next()

  html, body {
            font-family: 'Roboto Mono', monospace;
            background: #212121;
            height: 100%;
        }
        .container {
            height: 100%;
            width: 100%;
            justify-content: center;
            align-items: center;
            display: flex;
        }
        .text {
            font-weight: 100;
            font-size: 28px;
            color: #FAFAFA;
        }
        .dud {
            color: #757575;
        }

 <div class="container">
        <div class="text"></div>
    </div>

uj5u.com熱心網友回復：

我最近遇到了類似的問題，我想為我的 Youtube 視頻制作影片。我最終使用了 Puppeteer，逐步執行影片并將每一幀匯出為單獨的影像await page.screenshot({ path: screenshotFilename });，然后將這些影像組合成影片。

我知道這并不多，但希望這個答案對您有所幫助。

標籤：javascript html 动画片 出口 微软幻灯片软件

上一篇：我將如何在節點js中加載ogg檔案

下一篇：如何將影像以圓圈為中心？