使用js通过图片和音频模拟视频播放

视频和音频本身在移动端浏览器上采用的都是流加载，即加载一段播一段，这样就十分容易造成卡顿。
最近越来越多的公司采用了图片+音频结合的方式来制作“短视频”，即对于不超过1分钟的原视频，将其转化为音频+按照帧数排列的图片集合来播放。我们看到喜力的h5广告即采用了这种方式，而且如果一个项目中需要播放多段短视频，那么在某个合适的时机就可以将这些图片全部加载完成。然后就是播放的事儿了。
首先，要对待播放的“短视频”设置好一些参数：

var videoArr = [{
    src: "skin/video_quen/BAR-OPENING-944/BAR-OPENING-944",   //图片链接的前缀
    time: 93,     //图片张数
    to: 7.5        //播放时长
}, {
    src: "skin/video_quen/BAR-ENDING-944/BAR-ENDING-944",
    time: 108,
    to: 8.5
}]

然后我们要做的是将图片们预加载到内存：

var video_que = [] ； //图片存储媒介
function loadingImg(value) {  //value视为断视频id
    $('#image-que .image' + value).find('.conn').html('')
    var time
    var num = 0
    var total = videoArr[value].time
    video_que[value] = []
    for (var i = 0; i < videoArr[value].time; i++) {
        var tt = new Image()
        tt.id = value
        tt.pos = i
  
        tt.onload = function() {
            video_que[this.id][this.pos] = this
            num++
            if (num == total) {
               //说明预加载完了。做做标记什么的
        }

        tt.src = videoArr[value].src + i + ".jpg"
    }
}

这里对喜力的代码做了一些删减，方便阅读。

接下来的代码涉及如何播放：

function creatVideo(value) {
    totalTime = videoArr[value].to
    var audio = document.getElementById('audioId' + (value * 1 + 3))
    audio.play()    //还记得我们有个音频要播放吗
    var __FRAME_RATE__ = 30;    //帧数
    var __PERIOD__ = 1000 / __FRAME_RATE__;  //每隔多少秒播放一帧。这里我将源码中的1改为1000
    videT = setInterval(function() {
        videoCu = audio.currentTime
//音频现在播放到哪里了
        var pos = Math.floor((videoArr[value].time- 1) * videoCu / totalTime)
//计算该播放哪一张图了
        if(video_que[nowplay][[pos]]){
            $('#image-que .image' + value).find('.conn').html(video_que[nowplay][[pos]])
//把该展示的图片换成刚才那张图
        }
        if (videoCu >= totalTime) {
            clearInterval(videT)
            setTimeout(function() {
                videoEnd(...) //播放完毕后通知下其他代码
            }, 200)

        }
    }, __PERIOD__)   
}

把代码分离出来之后还没有亲自试验。但看起来是一种朴素而有效的办法。

它的巧妙之处在于，audio本身是流媒体，图片伴随着流来变化，并且做到了精准控制。