費德里克是唯一的其他的孩子在塊與專用ISDN線路，所以我給他打了電話。它花了六個小時的沒完沒了的等待（著瘋狂的一陣陣的詛咒），但我剛剛看了60秒的原始的Macintosh波濤洶涌的商業電視在Firefox，我不得不告訴別人。它吹我的腦海。
在網上的視頻已經改進了很多自從第一次緊張的低分辨率的商業我看著我的QUADRA 605回第七級。但是最重要的是，視頻仍然是從Web分開，封鎖iframes和Flash和瓶裝在小窗口在頁面的中心。他們錯過了一個機會為Web設計者無處不在。
但你如何整合到一個應用程序或視頻營銷網頁？它會是什么樣子，你是如何實現它的？在這篇文章中，你會找到靈感，如何和一些技術好讓你開始用現代的視頻在網絡上。
當視頻離開籠子
視頻結合動畫是創新性和吸引力的用戶體驗的一個有力的工具。想象中的DOM元素流和移動頁面中與教師同步互動視頻和教程。為什么不能把視頻和動畫走新用戶通過您的應用程序？或者說包括對你的營銷頁面你產品的視頻，而不是靜態的圖像？忘乎所以是容易的視頻可以如果你不小心成為更復雜的閃爍的標簽。但有很多美麗的，視頻緊密集成在一個設計鼓舞人心的例子。
蘋果的營銷新頁面的MAC Pro是一個極好的例子，視頻伸手從籠子到周圍的內容。新的MAC PRO是出現在頁面的中心，當你滾動，它猛撲，旋轉和拆卸本身。支持復制的消失在描述你看到的是什么。
靜態截圖的新的著陸頁不做新的MAC支持正義。（大圖）
交互式視頻的另一個好例子就是阿德里安Holovaty的soundslice。soundslice充滿音樂的YouTube視頻被切成小塊指法（或標簽），這是符號，吉他手使用學習音樂。
在與視頻同步的底部保持音樂酒吧。（大圖）
當你觀看音樂視頻，標簽是動畫的底部與音樂的時間，這樣你可以跟著你的吉他。你甚至可以減緩視頻或回路選擇實踐困難的部分，和標簽動畫將保持同步。
你如何添加視頻設計？
如果你進入視頻和動畫在你的下一個項目，你不會有很多的資源依靠實施。不規范的，易于使用的，開放源碼庫同步視頻和動畫的存在，所以每實現一點不同。你應該使用一個JavaScript庫或純CSS動畫關鍵幀和過渡？你應該自己的主機視頻和利用HTML5的視頻標簽事件或使用YouTube和Vimeo？然后，你是怎么把動畫視頻？
在一起，我們將探討上述問題的答案，更為我們建立我們自己的微的JavaScript框架。charlie.js提供了一種具有同步的視頻和CSS3動畫建筑頁面簡單易用的API。
charlie.js，在查利卓別林的名字命名。（圖片來源）
最好的學習方法是通過做，所以讓我們。
charlie.js做什么？
我們需要一種方法來創建動畫，然后觸發他們在某個時刻在一個視頻。我們還需要暫停動畫如果視頻站，我們需要一種方式來處理用戶跳來跳去不同的時間在視頻。
限制了本文的范圍，我們會charlie.js只使用CSS動畫。JavaScript動畫庫比CSS動畫更加靈活和強大，但包裝一頭周圍的聲明性語法簡單，關鍵幀是相當容易的，而且效果也硬件加速。堅持只有CSS動畫小項目的一個不錯的選擇。
保持簡單，charlie.js將支持每個頁面只有一個視頻。
正如我們通過建立這個庫的練習，記住，我們使用的框架來學習CSS動畫和視頻在網絡上。我們的目標是學習，而不是創造高質量的代碼。
定義API
我們的小框架，定義API的第一感覺。換句話說，我們需要知道怎樣會有人使用圖書館，然后寫JavaScript實現API。
視頻和動畫庫可以在許多方面的工作，但主要界面的難題是如何將動畫視頻。如何開發人員指定的動畫應該出現的元素和在這個時候，他們應該在視頻的開始？
一種選擇是吸下來的數據以JSON或XML。相反的解決方案是沒有單獨的數據文件，把所有的配置為純JavaScript函數調用。他們都是優秀的，但有一條中間道路。
通常，CSS樣式表中定義的動畫。理想的情況下，這是它應該被定義為charlie.js，不是在一個JSON文件。這是有道理的，而這樣做的優點。當動畫是一個樣式表，而不是一個JavaScript和JSON文件，你可以測試不加載整個視頻和動畫庫。
動畫是連接到數據屬性的元素。數據屬性定義動畫名稱和指定的開始時間。
比如說你有一個CSS動畫叫淡出撥號不透明度降低，和另一個為移動元素掉頁甩。你想要的網頁上的一個div使用動畫視頻三秒。您的標記看起來像這樣：
<div class="charlie" data-animations="fade, fling" data-times="3, 3">
...
</div>
charlie.js看見和知道運行會把動畫一旦視頻三秒。
褪色和把動畫是一個樣式表鏈接到文檔定義。
這里是淡出動畫可能看起來像(browser prefixes are excluded here but are required for Chrome and Safari):
.fade {
animation-name: fade;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
}
@keyframes fade {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
charlie.js看見和知道運行會把動畫一旦視頻三秒。
褪色和把動畫是一個樣式表鏈接到文檔定義。
這里是淡出動畫可能看起來像
褪色的。是什么課charlie.js適用于動畫元素，這將觸發淡出動畫。
主持人：HTML5和Flash和Silverlight視頻
用API的方式，下一步就是如何主機的視頻。主機將確定什么樣的容器的視頻塞滿，與容器將決定什么是可能的與視頻。
視頻嵌入Flash或Silverlight會限制你的設計方案，使視頻托管服務應該支持HTML5的視頻標簽。視頻標簽是容易對頁面風格和走動。你可以使用CSS濾鏡和轉換，甚至使用CSS動畫視頻本身。此外，標準的媒體事件是強大的，提供鉤代碼到視頻的地方和方式很多。視頻標簽的大缺點是兼容性。它不工作，在Internet Explorer 8。
什么樣的視頻宿主應charlie.js支持？建立一個支持多個托管庫是可行的。例如，popcorn.js（同步內容的視頻一個可怕的圖書館）支持多個主機的選擇和API。但要保持它的簡單，我們的小庫將只支持一個香草視頻標簽。在任何一個iframe或者Flash容器不支持。
這是很好的charlie.js，但是如果你堅持支持舊的瀏覽器和要處理的視頻塞在一個iframe？大多數視頻托管公司，有體面的API。至少，你應該能夠使用這些API來同步你的動畫，你會被一種嵌入式Flash對象的工作。YouTube和Vimeo是最受歡迎的服務，并提供廣泛的API。wistia是另一個偉大的選擇卻少為人知。
如果你想使用一個純粹的視頻標簽但不想主機的視頻吧，看看vid.ly。一旦你上傳你的視頻，vid.ly將編碼在每一個你需要的格式，給你一個通用網址，你可以使用在您的視頻標簽，這將根據用戶代理會自動選擇正確的視頻類型。
<視頻id =“視頻”src=“http://vid.ly/4m4e2n？視頻內容=“控制=“預緊力=“不”>
您的瀏覽器不支持HTML5視頻元件。
<視頻>
抬起頭
JavaScript在大多數這些片段使用下劃線；像_。foreach和_ toArray。從圖書館的效用函數。強調鼓勵編程，如果你從來沒有見過它看起來奇怪的一個功能性的風格，但是一點時間投入學習強調可以為您節省大量的時間和代碼行。這是值得檢查。在這篇文章中，你會發現代碼中的注釋告訴你發生了什么，它應該很容易理解。
另一個警告：下面的代碼將運行在大多數現代瀏覽器，但沒有嘗試已作出這完全跨瀏覽器兼容的。如果你的企業真正需要的CSS動畫要同步的視頻和運行在幾乎所有的瀏覽器，那么這個庫將不幫助你。但我的生意，甚至你的，只支持現代瀏覽器是好的。即使有這樣的限制，這里的許多材料還是值得學習。
JavaScript的CSS動畫控制
JavaScript和CSS視頻動畫之間的膠水。有沒有辦法對動畫視頻純CSS。動畫不能啟動，直到施加的風格，和CSS只給你如此多的方式來觸發額外的樣式（如：懸停）。為了同步動畫視頻，我們需要暫停，停止，恢復，跳過中間，甚至反向運行動畫。
所有這一切都是可能的JavaScript。因此，第一步是要獲取的CSS動畫的樣式表和JavaScript。每一個CSS動畫有兩部分。第一部分是用于配置該動畫關鍵幀和行為的屬性，如時間，迭代和方向。第二部分是什么觸發動畫。charlie.js需要在樣式表中找到兩個部分。
我們首先需要的是一個效用函數，通過搜索，加載頁面樣式表。
findRules = function(matches){
//document.stylesheets is not an array by default.
// It's a StyleSheetList. toArray converts it to an actual array.
var styleSheets = _.toArray(document.styleSheets),
rules = [];
// forEach iterates through a list, in this case passing
//every sheet in styleSheets to the next forEach
_.forEach(styleSheets, function(sheet){
//This foreach iterates through each rule in the style sheet
//and checks if it passes the matches function.
_.forEach(_.toArray(sheet.cssRules), function(rule){
if (matches(rule)){
rules.push(rule);
}
});
});
return rules;
}
該findrules函數遍歷每個樣式表的每一個規則，返回一個列表相匹配的功能通過比賽規則。讓所有的關鍵幀的規則，我們傳遞一個函數來findrules是否檢查規則是一個關鍵幀：// A little code to handle prefixed properties
var KEYFRAMES_RULE = window.CSSRule.KEYFRAMES_RULE
|| window.CSSRule.WEBKIT_KEYFRAMES_RULE
|| window.CSSRule.MOZ_KEYFRAMES_RULE
|| window.CSSRule.O_KEYFRAMES_RULE
|| window.CSSRule.MS_KEYFRAMES_RULE,
...
var keyframeRules = findRules(function(rule){
return KEYFRAMES_RULE === rule.type;
}),
...
在這一點上，我們在JavaScript中的關鍵幀，但是我們仍然需要定義的持續時間的動畫風格，其余的迭代，方向等。
找到所有的這些類，我們再次使用findrules功能通過每個樣式表的每一個規則。雖然這一次，比賽，我們會通過函數會檢查看是否有AnimationName產權規則。...
var animationStyleRules = findRules(function(rule){
return rule.style && rule.style[animationName(rule.style)];
});
...
該animationsname功能是有柄的前綴，因為AnimationName財產仍需要在一些瀏覽器中的前綴。這個功能看起來像這樣：
...
if (style.animationName) {
name = "animationName"; }
else if (style.webkitAnimationName) {
name = "webkitAnimationName"; }
else if (style.mozAnimationName) {
name = "mozAnimationName"; }
else if (style.oAnimationName) {
name="oAnimationName"; }
else if (style.msAnimationName) {
name = "msAnimationName"; }
else {
name = "";
}
return name;
...
技術創造價值 服務締造品牌
Copyright ? 2011-2024 鄭州開拓者電子科技有限公司 All Rights Reserved