在互聯網瀏覽器中通過視頻創建交互式插圖需要什麼軟件？

Question

這裏是我想要做的項目：

拍攝一個技術項目，並在視頻上創建一個交互層，在某些細分市場上解釋所涉及的科學。爲了簡單起見，可以說生物燃料。 這些素材將在某些幀暫停時無縫地整合到一個圖層中，該圖層是視頻幀內容的技術圖示。

想象一下與項目經理面談的錄像。項目經理向他的手示意了一桶發酵解決方案，後來將成爲生物燃料。該項目的目的是深入研究發酵解決方案中發生的過程。所以，在採訪人員之後，他們向這一過程中的下一步邁出了步伐：分析發酵過程中發生的一切。視頻幀轉向一桶解決方案。暫停視頻幀。現在，插圖層會下降，並會放大視頻幀中的圖像：倉庫內的桶。放大圖中，插圖顯示了被細菌消化的纖維素分子。除了插圖之外，我還希望這個逼真的圖表具有交互性：觀衆可以攪拌桶或者打開一個加熱元件，看看它是否能使過程更快。

製作這個交互式技術插圖圖層需要哪些技術，以便能夠通過互聯網瀏覽器查看？

我試圖找出我是否需要聘請程序員： - 閃光/的Actionscript/C++/JibLibFlash - WebGL的， - 使用Javascript（PhysJL，Threejs） - 別的東西......

謝謝你的幫助！

Answer 1

以下是您的操作：製作2個視頻，一個暫停前和一個暫停後。使用z-index將它們重疊爲2個DIV。使用Flash運行它們，並使用Javascript進行自動檢測，在第一個媒體結束時它會更改不透明度爲零的隱藏<div>的不透明度。在此<div>內，您可以使用CSS3/HTML5動畫來顯示您需要的任何動畫。在結束後使用類似

box.addEventListener('webkitTransitionEnd', function(event) { alert("Finished transition!"); }, false);來啓動下一部分視頻。當然z-index更改爲具有最近的一個頂部。簡單！