帶圖像的javaScript視頻

Question

我知道，在快速分裂中，每個人都可以拍攝一系列圖像並使用JavaScript將不透明度從1快速設置爲0。實際上，我已經成功完成了它，儘管我只使用了約41張圖片。 720P。

我的問題是，是否使用html，css和javascript製作整個視頻（4-10分鐘長）是否實用。很明顯，這將是太多的圖像留在緩存中，所以你必須每隔一段時間清空緩存特定的圖像，這也需要一個相當不錯的互聯網連接，但你認爲這是值得的嘗試？

是否有任何明顯的親和你可以想到的嘗試呢？

（很明顯，我並沒有要求代碼來實現它，因爲我已經開發了它的大部分，就你認爲它的實用性而言，而不是youtube或vimeo等）

Answer 1

說白了，我覺得它不實用。

這裏有幾個原因：

• 圖像的數量。視頻往往是每秒30幀左右。 對於4分鐘的視頻，這大概是7,200圖像。
• 下載時間。下載7,200張720像素高的圖片需要 大量的帶寬，不僅對​​用戶而言，對於 服務器也是如此。
• DOM負載。 7,200張圖片將需要儘可能多的DOM 元素相互正確放置。
• 渲染。每個 時間我們做一個動畫（淡出），瀏覽器必須計算什麼 元件是可見的並且這意味着什麼給用戶（像素顏色， 等）

當然，我們可以優化這：

• 下載在指定時間需要的圖像。如果連接可以下載30張圖像/秒，然後我們加載我們需要的，然後啓動播放序列。
• 完成後刪除元素。隨着序列的繼續，我們可以假設這些圖像不再需要。當這些圖像完成後，我們可以銷燬這些元素，從而釋放一些資源。
• 將圖像放在多個子域/位置上。瀏覽器傾向於每個域在一個時刻下載1項資產。現代瀏覽器可以下載6個或更多。但是如果我們要將這些資產分成多個子域名，我們可以增加同時下載的數量，從而增加響應時間。
• 創建大型精靈。在一個或幾個大型精靈上有序列，並使用Javascript來正確定位元素。這使我們可以進行單次/少量下載並消除多次下載的開銷。

視頻編碼使瀏覽器不必做所有這些像素計算和動畫。每幀不是完整的圖像，而是當前幀和下一幀之間的增量。 （我過分簡化了這一點。）

但是這種方法經常用於需要交互性，或想要過去iOS自動播放掛斷的片段。再一次，對大型序列來說不實用，但對於較短的序列來說絕對可行。