img2video/index.js

import 'babel-polyfill'
import videoSource from './videoData.js'
import Img2Video from './src/img2video.js'
//格式数据
let videoSourceCopy = []
for (let key in videoSource) {
    let videos = videoSource[key]
    videoSourceCopy.push(...videos)
}

(() => {
    let loadedPercentEle = document.querySelector('#loadedPercent')
    let clickBtn = document.querySelector('#videoPlayBtn')
    let endClickBtn = document.querySelector('#videoEndBtn')

    let video = new Img2Video({
        el: "#img2video1",
        frames: videoSourceCopy,
        preload: 'none',
        preloaded: () => {
            console.log('video preloaded')
        },
        loadProgress: (percent) => {
            console.log('video loaded ' + percent + '%')
            loadedPercentEle.innerHTML = '进度：' + parseInt(percent)
        },
        timeUpdate: (frame) => {
            console.log(this, frame)
            if (frame == 9 || frame == 30 || frame == 159) {
                clickBtn.style.display = 'block'
                video.pause()
            }
        },
        play: () => {
            console.log('video play')
        },
        end: () => {
            console.log('video ended')
            endClickBtn.style.display = 'block'
        }
    })

    video.start()

    clickBtn.addEventListener('click', () => {
        clickBtn.style.display = 'none'
        video.start()
    })
    endClickBtn.addEventListener('click', () => {
        endClickBtn.style.display = 'none'
        video.frame = 0
        video.start()
    })
})();