視頻和音頻本身在移動端瀏覽器上采用的都是流加載，即加載一段播一段，這樣就十分容易造成卡頓。
最近越來越多的公司采用了圖片+音頻結(jié)合的方式來制作“短視頻”，即對于不超過1分鐘的原視頻，將其轉(zhuǎn)化為音頻+按照幀數(shù)排列的圖片集合來播放。我們看到喜力的h5廣告即采用了這種方式，而且如果一個項目中需要播放多段短視頻，那么在某個合適的時機就可以將這些圖片全部加載完成。然后就是播放的事兒了。
首先，要對待播放的“短視頻”設(shè)置好一些參數(shù)：

var videoArr = [{
    src: "skin/video_quen/BAR-OPENING-944/BAR-OPENING-944",   //圖片鏈接的前綴
    time: 93,     //圖片張數(shù)
    to: 7.5        //播放時長
}, {
    src: "skin/video_quen/BAR-ENDING-944/BAR-ENDING-944",
    time: 108,
    to: 8.5
}]

然后我們要做的是將圖片們預(yù)加載到內(nèi)存：

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) {
               //說明預(yù)加載完了。做做標(biāo)記什么的
        }

        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;    //幀數(shù)
    var __PERIOD__ = 1000 / __FRAME_RATE__;  //每隔多少秒播放一幀。這里我將源碼中的1改為1000
    videT = setInterval(function() {
        videoCu = audio.currentTime
//音頻現(xiàn)在播放到哪里了
        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本身是流媒體，圖片伴隨著流來變化，并且做到了精準(zhǔn)控制。