整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
日發現，Chrome瀏覽器中的一個漏洞（已被修補），該漏洞允許攻擊者通過音頻或視頻的HTML標記從其他網站檢索敏感信息。
如果攻擊者可以通過惡意廣告（合法網站上嵌入廣告中的惡意代碼）或攻擊者可以注入和執行的合法網站上的漏洞攻擊惡意網站上的受害者，則可以利用舊版本Chrome中的漏洞利用此漏洞代碼——例如通過存儲的跨站點腳本（XSS）缺陷來進行。
Attack利用音頻和視頻的HTML標簽
在今天早些時候發布并與Bleeping Computer共享的一篇文章中，Masas解釋說，攻擊場景需要惡意代碼來加載來自音頻和視頻的HTML標簽內合法站點的內容。
通過使用“進展”事件，Masas說他可以推斷出他從外部網站獲得的回復的大小，并猜測各種類型的信息。
在正常情況下，這是不可能的，因為CORS-Cross-Origin資源共享）——一種阻止站點從其他網站加載資源的瀏覽器安全功能，但是這種攻擊繞過了CORS。
“從本質上講，這個漏洞允許攻擊者使用視頻或音頻標簽來估計跨源資源的大小，”Masas今天通過電子郵件告訴Bleeping Computer。
攻擊可以從其他站點檢索敏感/受保護的數據
在他的測試中，他能夠通過在公共Facebook帖子上激活“受眾限制”設置來確定用戶可能的年齡組和性別
“通過操縱像Facebook這樣的網站以大或小的響應形式反映用戶數據，它成為可能一致地提取有價值的數據”Masas告訴了我們。
但專門研究網絡安全問題的安全研究員Mike Gualtieri表示，與從Facebook用戶那里收集數據相比，攻擊可以更有創意地使用。例如，通過定位企業后端，內部網和其他以企業為中心的應用程序。
“由企業IT定制的現成系統可能是這些類型攻擊的最佳目標，因為攻擊者可以學習系統內部，并可能影響系統的所有用戶，”
Gualtieri在一次私人談話中告訴的Bleeping Computer。
“通常情況下，基于登錄用戶，這些系統更加同質”他說，并補充說，攻擊者可以準備攻擊，專注于對存儲在企業Web應用程序特定區域中的敏感數據進行exfiltrating。
API也處于危險之中
此外，Gualtieri認為攻擊也可能成功對抗攻擊者通常無法訪問的API，但錯誤允許他們將請求轉發。
“今天找到弱受保護的web-API的通信數據是非常可行的，”Gualtieri告訴我們。
“具有足夠勤奮的攻擊者可以通過登錄用戶計算出一組預期請求，并針對這些API響應。
“例如，假設一家假想的股票交易公司有一個暴露的API端點，它返回的內容如下：
如果用戶已登錄請求可能是：
“因此，根據購買的一系列庫存，你可以推斷，”Gualtieri說。“這個例子對許多人來說可能聽起來不切實際，但我看到太多設計糟糕/暴露不好的網絡。
API要知道有一些類似于網絡上這個假設的例子，“他補充道。
攻擊類似但不同于Wavethrough
如果Masas的攻擊聽起來很熟悉，那是因為它與3月份發布的漏洞非常相似，稱為Wavethrough（CVE-2018-8235），這是一個影響Edge和Firefox的漏洞。
就像Masas的Chrome bug一樣，Wavethrough使用音頻和視頻標簽繞過CORS保護，從其他站點加載數據并確定其內容。
但這就是相似性停止的地方。
“Wavethrough漏洞使用服務工作者和'范圍'請求來提取原始數據，”Masas告訴Bleeping Computer。另一方面，我們觀察從我們的元素發出的'進展'事件來估計跨源資源大小，然后利用這些信息通過利用Facebook等網站上的限制過濾器推斷出有關用戶的更多信息。
發現Wavethrough的Jake Archibald也表示，這兩次襲擊是相當不同的，即使它們是通過音頻和視頻HTML標簽進行的。
“它非常相似，但更多的是時間攻擊，而Wavethrough卻不是，”阿奇博爾德今天在一次私人談話中告訴Bleeping Computer。 “Wavethrough是一種原始模型違規行為。”
不同之處在于Wavethrough在破壞CORS后檢索它找到的任何數據，而Masas的漏洞在一系列請求試圖猜測數據是什么的時候，這個漏洞在不斷刺激其他網站。但是當Chrome漏洞聽起來更難以利用時，它事實并非如此。
“攻擊并不復雜，只需要做一些準備，”Gualtieri告訴我們，并補充說這個不斷猜測的游戲并不意味著Chrome的bug只限于單獨針對一個用戶。
“根據目標網站，猜測游戲可用于同時定位多個用戶”Gualtieri說。
除非用戶希望將其網絡機密泄露到網上，否則建議將Chrome更新為v68.0.3440.75或更高版本。
（作者：曲速未來安全區；本文僅代表作者觀點，不代表鏈得得官方立場）
現在視頻業務越來越流行了，播放器也比較多，作為前端工程師如何打造一個屬于自己的播放器呢？最快最有效的方式是基于開源播放器深度定制，至于選擇哪個開源播放器仁者見仁智者見智，可以參考開源播放器列表(https://www.awesomes.cn/subject/videos)選擇適合自己業務的播放器。
我們的播放器選擇了排名第一的video.js播放器，截至目前該播放器在Github擁有13,991 star, 4,059 fork，流行程度可見一斑。為了讓大家更多的了解它，我們細數下優點：
免費開源
這個意味著什么就不多說了，附上項目地址(https://github.com/videojs/video.js)
兼容主流瀏覽器
在國內的前端開發環境往往需要支持到低級版本的IE瀏覽器，然后隨著Flash的退化，很多公司沒有配備Flash開發工程師，video.js提供了流暢的Flash播放器，而且在UI層面做到了和video的效果，實屬難得，比如全屏。
UI自定義
不管開源項目在UI方面做的如何漂亮，對于各具特色的業務來說都要自定義UI，一個方便簡單的自定義方式顯得格外重要，更何況它還自帶了編譯工具，只能用一個”贊“字形容。具體怎么實現的，這里先簡單描述下是使用JavaScript（es6）構建對象，通過Less編寫樣式規則，最后借助Grunt編譯。
靈活插件機制
video.js提供一個插件定義的接口，使插件開發簡單易行。而且社區論壇也提供了一些好用的插件供開發者使用。附插件列表
比較完善的文檔
完善的文檔對于一個穩定的開源項目是多么的重要，video.js提供了教程、API文檔、插件、示例、論壇等。官方地址
項目熱度
開源作者對項目的維護比較積極，提出的問題也能很快給予響應。開發者在使用過程中出現問題算是有一定保障。
書歸正傳，要想更自由的駕馭video.js，必然要了解內部原理。本文的宗旨就是通過核心代碼演示講解源碼運行機制，如果有興趣，不要離開，我們馬上開始了……
由于源碼量較大，很多同學不知道從何入手，我們先來說下它的組織結構。
其中control-bar，menu，popup，slider，tech，tracks，utils是目錄，其他是文件。video.js是個非常優秀的面向對象的典型，所有的UI都是通過JavaScript對象組織實現的。
video.js是個入口文件，看源碼可以從這個文件開始。
setup.js處理播放器的配置安裝即data-setup屬性。
poster-image.js處理播放器貼片。
plugins.js實現了插件機制。
player.js構造了播放器類也是video.js的核心。
modal-dialog.js處理彈層相關。
media-error.js定義了各種錯誤描述，如果想理解video.js對各語言的支持，這個文件是必看的，它是橋梁。
loading-spinner.js實現了播放器加載的標志，如果不喜歡默認加載圖標在這里修改吧。
fullscreen-api.js實現各個瀏覽器的全屏方案。
extend.js是對node 繼承 and babel's 繼承的整合。
event-target.js 是event類和原生事件的兼容處理。
error-display.js 主要處理展示錯誤的樣式設置。
component.js 是video.js框架中最重要的類，是所有類的基類，也是實現組件化的基石。
close-button.js 是對關閉按鈕的封裝，功能比較單一。
clickable-component.js 如果想實現一個支持點擊事件和鍵盤事件具備交互功能的組件可以繼承該類，它幫你做了細致的處理。
button.js 如果想實現一個按鈕了解下這個類是必要的。
big-play-button.js 這個按鈕是視頻還未播放時顯示的按鈕，官方將此按鈕放置在播放器左上角。
utils目錄顧名思義是一些常用的功能性類和函數。
tracks目錄處理的是音軌、字幕之類的功能。
tech目錄也是非常核心的類，包括對video封裝、flash的支持。
slider目錄主要是UI層面可拖動組件的實現，如進度條，音量條都是繼承的此類。
popup目錄包含了對彈層相關的類。
menu目錄包含了對菜單UI的實現。
control-bar目錄是非常核心的UI類的集合了，播放器下方的控制器都在此目錄中。
通過對組織結構的描述，大家可以，想了解video.js的哪一部分內容可以快速入手。如果還想更深入的了解如何正確使用這些類，請繼續閱讀繼承關系一節。
video.js是JavaScript面向對象實現很經典的案例，你一定會好奇在頁面上一個DOM節點加上data-setup屬性簡單配置就能生成一個復雜的播放器，然而在代碼中看不到對應的HTML”模板“。其實這都要歸功于”繼承“關系以及作者巧妙的構思。
在組織結構一節有提到，所有類的基類都是Component類，在基類中有個createEl方法這個就是JavaScript對象和DOM進行關聯的方法。在具體的類中也可以重寫該方法自定義DOM內容，然后父類和子類的DOM關系也因JavaScript對象的繼承關系被組織起來。
為了方便大家查閱video.js所有的繼承關系，整理了兩個圖表，一個是完整版，一個是核心版。
完整版
核心板
video.js源碼代碼量比較大，我們要了解它的運行機制，首先確定它的主線是video.js文件的videojs方法，videojs方法調用player.js的Player類，Player繼承component.js文件的Component類，最后播放器成功運行。
我們來看下videojs方法的代碼、Player的構造函數、Component的構造函數，通過對代碼的講解基本整個運行機制就有了基本的了解，注意里面用到的所有方法和其他類對象參照組織結構一節細細閱讀就可以掌握更多的運行細節。
videojs方法
Player的構造函數
Component的構造函數
這里通過主線把基本的流程演示一下，輪廓出來了，更多細節還請繼續閱讀。
一個完善和強大的框架都會繼承插件運行功能，給更多的開發者參與開發的機會進而實現框架功能的補充和延伸。我們來看下video.js的插件是如何運作的。
插件的定義
如果之前用過video.js插件的同學或者看過插件源碼，一定有看到有這句話videojs.plugin=pluginName，我們來看下源碼：
不難看出，原理就是將插件（函數）掛載到Player對象的原型上，接下來看下是怎么執行的。
插件的運行
在Player的構造函數里判斷是否有插件這個配置，如果有則遍歷執行。
在繼承關系一節中有提到video.js的所有DOM生成都不是采用的傳統模板的方式，都是通過JavaScript對象的繼承關系來實現的。
在Component基類中有個createEl方法，在這里可以使用DOM類生成DOM實例。每個UI類都會有一個el屬性，會在實例化的時候自動生成，源代碼在Component的構造函數中：
每個UI類有一個children屬性，用于添加子類，子類有可能扔具有children屬性，以此類推，播放器的DOM結構就是通過這樣的JavaScript對象結構實現的。
在Player的構造函數里有一句代碼this.initChildren();啟動了UI的實例化。這個方法是在Component基類中定義的，我們來看下：
通過這段代碼不難看出大概的意思是通過initChildren獲取children屬性，然后遍歷通過addChild將子類實例化，實例化的過程會自動重復上述過程從而達到了”繼承“的效果。不得不為作者的構思點贊。如果你要問并沒看到DOM是怎么關聯起來的，請繼續看addChild方法的源碼：
這段代碼的大意就是提取子類的名稱，然后獲取類并實例化，最后通過最關鍵的一句話this.contentEl().insertBefore(component.el(), refNode);完成了父類和子類的DOM關聯。相信inserBefore大家并不陌生吧，原生的DOM操作方法。
至此，video.js的精華部分都描述完了，不知道大家是否有收獲。這里簡單的總結一些閱讀video.js框架源碼的心得：
找準播放器實現的主線流程，方便我們有條理的閱讀代碼
了解框架代碼的組織結構，有的放矢的研究相關功能的代碼
理解類與類的繼承關系，方便自己構造插件或者修改源碼的時候知道從哪個類繼承
理解播放器的運行原理，有利于基于Component構造一個新類的實現
理解插件的運行機制，學會自己構造插件還是有必要的
理解UI的實現原理，就知道自己如何為播放器添加視覺層面的東西了
看看我的源碼解讀吧，能幫一點是一點，哈哈
如今互聯網時代，如果你連多媒體是什么都不知道的話，你真的白混了。多媒體是多種媒體的綜合，一般包括文本，聲音和圖像等多種媒體形式。在互聯網中，多媒體往往是指文字、圖片、照片、聲音、動畫和影片，以及程式所提供的互動功能。相關內容，在HTML都有其對應的標簽。
至今，我仍然記得，我之前一個老板跟我說過的一句話：一圖勝千字。之前我還不太理解，直接他給我看一張美女照片時，我才懂了，而且是秒懂的那種。在HTML中，照片秀，用的是<img>標簽，它的屬性有：
src：指定圖片源文件，可以是本地的，也可以是網絡上的；
alt ：圖片未加載成功的提示文字；
width：指定圖片的寬度；
height：指定圖片的高度；
border：指定圖片的邊框樣式。
程序員最喜歡看美女，不知道是真是假？<br/>
<img src="mm.jpg" alt="圖片不見了，你別傷心" width="880px" height="500px" />輸出結果
在HTML5之前，想實現播放MP3等音頻時，大多數是通過插件(比如 Flash)來播放的，你知道插件是要安裝的，對用戶來說，真是麻煩。好在HTML5補充了在網頁上嵌入音頻元素的標簽<audio>,這才讓程序員日子好過了一些。
<audio>標簽，支持常見的音頻格式：MP3、Ogg和Wav。<audio>使用多個<source>元素鏈接不同的音頻文件，瀏覽器將使用第一個支持的音頻文件，如果都不支持，那就顯示提示文字。
<audio>的常用屬性autoplay：自動播放；controls：顯示播放/暫停按鈕；loop：循環播放；muted：靜音，屬性切換可通過javascript進行控制。
<source>的屬性用的較多的是src：音頻源；type： MIME 類型。
為了測試效果，建議你在網上隨便找一個mp3文件，下載或拷貝url地址都可以。
<audio controls>
<source src="niu.ogg" type="audio/ogg">
<source src="niu.mp3" type="audio/mpeg">
您的瀏覽器不支持直接播放音頻。
</audio>輸出結果
在HTML5提供了支持視頻元素的標簽<video> ，支持的視頻格式有MP4、WebM和Ogg。相關屬性除了width指定視頻寬度、height指定高度之外，其他屬性，同<audio>標簽是一模一樣的。方法也是一模一樣的。
<video width="960" height="540" controls>
<source src="mv.mp4" type="video/mp4">
<source src="mv.ogg" type="video/ogg">
您的瀏覽器不支持直接播放視頻。
</video>輸出結果
好了，有關html多媒體的內容，老陳講完了，如果覺得對你有所幫助，希望老鐵能轉發點贊，讓更多的人看到這篇文章。你的轉發和點贊，就是對老陳繼續創作和分享最大的鼓勵。
一個當了10年技術總監的老家伙，分享多年的編程經驗。想學編程的朋友，可關注：老陳說編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關注我，沒錯的。
#前端##HTML5##多媒體##程序員##視頻#
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
