video播放部分更新

03-06

之前的光碟需要在一個視頻的頭部加上題目信息，視頻末尾加上結束信息（比如編輯人員，引文，等等）

題目信息好辦，只要用video的poster屬性指向一個jpg就好了，麻煩的是結尾那裡。

video是沒有一個提示視頻播放完成的event的，所以要自己寫一個，html部分用的是這樣的：

<video src="video/video1.mp4" poster = "video/video1.jpg" controls ontimeupdate="logPlay(this)" onplay="logPlay(this)" onpause="updateCurrentTimeCache(this)">

這裡面給timeupdate, play和pause各自加上了對應的function，實際上如果只考慮正常播放完成是可以只用ontimeupdate一個事件的，不過在chrome裡面，把視頻拖動到結尾以後會自動跳轉到視頻頭部重新播放，這個跳轉的過程裡面ontimeupdate不會被觸發，要等到開始播放以後ontimeupdate才可以觸發。

對應的程序是這樣的：

var currentTime; var donePlaying = false; var endingDone = false; function updateCurrentTimeCache(elm){ currentTime = elm.currentTime; } function logPlay(elm){ if(!donePlaying && !endingDone){ if(elm.currentTime == elm.duration){ donePlaying = true; } if(elm.currentTime == 0){ if(currentTime > elm.currentTime){ // donePlaying = true; } } if(donePlaying){ elm.pause(); console.log("done"); elm.src = "video/video2.mp4"; elm.play(); } }else if(donePlaying && !endingDone){ if(elm.currentTime == elm.duration){ endingDone = true; elm.src = "video/video1.mp4"; elm.pause(); } } }

---

本來的想法是在視頻播放完成以後讓一個原來隱藏的div顯示出來，蓋在現在的video上面，但是如果視頻全屏播放的話這一招就不行了，所以還是直接跳轉到另外一個video來的更實際。這樣一來就需要標註目前在哪個video才行了。

這樣一改可以將每一個視頻分成兩個部分，主要部分只需要進行視頻的壓縮，這一部分一般是不會出問題的。次要部分呢只有幾秒，就算出了問題也完全可以重做以後網上傳過去。