視頻和音頻本身在移動(dòng)端瀏覽器上采用的都是流加載，即加載一段播一段药薯，這樣就十分容易造成卡頓。
最近越來越多的公司采用了圖片+音頻結(jié)合的方式來制作“短視頻”，即對于不超過1分鐘的原視頻劳澄，將其轉(zhuǎn)化為音頻+按照幀數(shù)排列的圖片集合來播放。我們看到喜力的h5廣告即采用了這種方式蜈七，而且如果一個(gè)項(xiàng)目中需要播放多段短視頻秒拔，那么在某個(gè)合適的時(shí)機(jī)就可以將這些圖片全部加載完成。然后就是播放的事兒了飒硅。
首先砂缩，要對待播放的“短視頻”設(shè)置好一些參數(shù)：
var videoArr = [{
src: "skin/video_quen/BAR-OPENING-944/BAR-OPENING-944", //圖片鏈接的前綴
time: 93, //圖片張數(shù)
to: 7.5 //播放時(shí)長
}, {
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() //還記得我們有個(gè)音頻要播放嗎
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)
//計(jì)算該播放哪一張圖了
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__)
}
把代碼分離出來之后還沒有親自試驗(yàn)双吆。但看起來是一種樸素而有效的辦法眨唬。
它的巧妙之處在于，audio本身是流媒體好乐，圖片伴隨著流來變化匾竿，并且做到了精準(zhǔn)控制。
