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