頻、視頻的格式
開始學(xué)習(xí)之前,我們要下載些素材用來測(cè)試使用,地址如下:https://pan.baidu.com/s/1reRWno0ibYRcYXjw4MClqw
提取碼:td80
其中包括兩個(gè)視頻一個(gè)音頻和一個(gè)安裝程序。
學(xué)習(xí)如何在頁面中添加音頻、視頻之前應(yīng)該了解一點(diǎn)基礎(chǔ)知識(shí)。
我們應(yīng)該都有在互聯(lián)網(wǎng)上下載電影、視頻、音樂的經(jīng)歷,大家會(huì)注意到,有的視頻文件名的后綴是.avi,有的視頻是.mp4,還有.mov的,據(jù)不完全統(tǒng)計(jì),常見的各種視頻格式有十幾種之多。
常見的音頻的格式比起視頻來會(huì)顯得少一些,一般是.wav和.mp3格式。
為什么存儲(chǔ)相同的內(nèi)容可以有這么多不同的格式呢?
格式產(chǎn)生的核心在于對(duì)音頻、視頻等多媒體文件進(jìn)行的不同編碼方式。
那什么是編碼呢?
簡(jiǎn)單來說我們可以把"編碼"這個(gè)詞分成兩個(gè)部分,第一個(gè)是"編",也就是"整理、組織"的意思,第二個(gè)是"碼",也就是我們平時(shí)所說的"數(shù)碼"。
首先說"碼",我們的計(jì)算機(jī)中的數(shù)據(jù)最終都是通過二進(jìn)制的數(shù)字(0和1)來存儲(chǔ)或計(jì)算的,這些0或1就是數(shù)碼。無論代碼、程序、圖片、音樂、視頻、文字等的存儲(chǔ)與計(jì)算都不例外。不管多么復(fù)雜或簡(jiǎn)單的文件,在計(jì)算機(jī)看來,都是一大堆0和1。
一個(gè)0或1被稱為1比特,圖片或視頻中的一個(gè)黑白像素通常是8比特(八位),如果一張1080乘720個(gè)像素的圖片所占內(nèi)存的大小就是1080*720*8=6220800字節(jié),約等于0,74mb。如果一個(gè)視頻每秒中有25幀,也就是一秒鐘在我們眼前閃過25張圖片(視頻播放實(shí)際上就是在我們眼前快速的更替圖片,這些圖片在大腦中會(huì)被自動(dòng)連成動(dòng)作,這也是小的時(shí)候在課本的角上畫好一套走路的小人的不同動(dòng)作后,快速翻動(dòng)書頁,畫面中的小人會(huì)走路的原因,大家可以自行百度"視覺暫留原理")。
一秒鐘25張1080乘720的圖片的視頻,一秒鐘就會(huì)占0.74*25=18.5mb的內(nèi)存。如果是一分鐘呢,18.5*60=1110mb約等于1.08gb。這樣的數(shù)據(jù)量是不是很嚇人。
但事實(shí)上我們下載的1080*720的一小時(shí)三十分鐘左右的視頻的體積往往也沒有超過1gb,這又是為什么呢?
這就是"編"的功勞!對(duì)數(shù)碼進(jìn)行整理和組織的主要目的是壓縮體積,壓縮數(shù)據(jù)體積既能節(jié)省磁盤又能方便傳播與攜帶,是信息技術(shù)的關(guān)鍵技術(shù)之一,壓縮的方法一般有兩類,一類叫做無損壓縮,也就是通過對(duì)這一大堆數(shù)碼進(jìn)行一個(gè)特殊的組合使其占有更小的空間,一類叫做有損壓縮,是在無損壓縮的基礎(chǔ)上剔除掉人眼睛識(shí)別不到的冗余信息。具體的壓縮過程涉及到很多數(shù)學(xué)知識(shí),這里大家簡(jiǎn)單了解一下即可。
壓縮后的視頻或音頻文件最終通過播放器對(duì)該文件的壓縮算法進(jìn)行逆向運(yùn)算后,還原成計(jì)算機(jī)可以解讀的畫面和聲音再呈現(xiàn)給觀眾,這個(gè)過程叫做"解碼"。
通過"編"的方式壓縮文件體積,通過"解"的方式再還原出文件內(nèi)容成了處理大規(guī)模數(shù)據(jù)的通用手法。
不同的編碼和解碼方式催生出不同的文件格式,這種情況下,瀏覽器在播放視頻的時(shí)候就要有應(yīng)對(duì)不同格式的不同解碼方式,在15年以前,瀏覽器為了能夠播放不同格式的視頻,就要調(diào)用電腦中不同的播放器,這個(gè)過程的寫法非常麻煩。隨著技術(shù)不斷地整合,時(shí)至今日,在頁面中播放視頻不需要這么復(fù)雜的寫法了,但是因?yàn)槊總€(gè)瀏覽器都不是包打一切,因此,雖然不用指定播放器,但是也要預(yù)設(shè)不同格式的視頻來應(yīng)對(duì)不同的瀏覽器。
因此,我們?cè)谶@一部分的學(xué)習(xí)中除了講解如何向頁面添加不同格式的音視頻外還會(huì)告訴大家如何為音視頻轉(zhuǎn)換格式。
為頁面添加音頻、視頻
添加音頻使用<audio></audio>標(biāo)簽,這個(gè)標(biāo)簽被所有瀏覽器支持,是html5推薦的音頻導(dǎo)入標(biāo)簽,但是遺憾的是在html4標(biāo)準(zhǔn)中是不被支持的或者說是非法的。
這里給大家簡(jiǎn)要介紹一下html5和html4的區(qū)別。
簡(jiǎn)單來說呢,一個(gè)html文件的第一條語句是<!DOCTYPE HTML>,它就是HTML5標(biāo)準(zhǔn)的文件。如果是html4,它的第一條聲明語句有三種寫法,像這樣
一:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
二:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
三:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
版權(quán)聲明:本文為CSDN博主「痦子」的原創(chuàng)文章,遵循 CC 4.0 BY-SA 版權(quán)協(xié)議,轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/yh1061632045/article/details/81518141
這讓我想到了孔乙己的"茴"字的多種寫法
是不是很麻煩,其實(shí)html5比html4更簡(jiǎn)單,功能更強(qiáng)大,而且我們一直以html5的標(biāo)準(zhǔn)進(jìn)行學(xué)習(xí),所以大家不必糾結(jié)。
下面我們導(dǎo)入一個(gè)音頻試試吧。示例代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<title>音視頻導(dǎo)入</title>
</head>
<body>
<audio controls="controls">
<source src="audio/千年的祈禱.mp3" type="audio/mp3" />
</audio>
</body>
</html>
頁面效果如下:
其中controls屬性就是用來顯示播放控制界面的,就是這個(gè):(偷懶的話可以寫成"controls"就ok,不必加"="以及后面的內(nèi)容了。)
如果以后您使用自己編寫的控制界面,就可以不添加這個(gè)屬性。
刪掉這個(gè)屬性后就是這樣:這樣為自定義的播放控制界面留出了位置。
<audio></audio>標(biāo)簽夾著<source>標(biāo)簽,一個(gè)<audio></audio>標(biāo)簽中可以添加多個(gè)<source>用以支持不同的格式要求。示例代碼如下:(這段代碼來自w3school)
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.<!--你的瀏覽器不支持這個(gè)音頻元素-->
</audio>
type屬性是告訴瀏覽器音樂文件的類型。
不同格式的文件的生成需要我們自己去做,這就涉及到如何給一個(gè)音頻文件進(jìn)行格式轉(zhuǎn)化的問題。這個(gè)問題我們明天再說,今天先學(xué)習(xí)為頁面添加音頻和視頻。
下面我們來看一下視頻的導(dǎo)入方法,示例代碼如下:
<video controls>
<source src="video/阿塔麗.mp4" type="video/mp4" />
</video>
頁面效果如下:
我們可以通過設(shè)置height和width屬性來控制視頻的面積。實(shí)例代碼如下:
<video controls width="850" height="500" >
<source src="video/阿塔麗.mp4" type="video/mp4" />
</video>
頁面效果如下:
視頻畫面變小了,和視頻并排的是我們之前添加的音頻文件,由此可知,這兩個(gè)元素都是內(nèi)聯(lián)元素。
今天的內(nèi)容結(jié)束了,明天我們繼續(xù)學(xué)習(xí)格式轉(zhuǎn)換和為不同瀏覽器預(yù)設(shè)不同音視頻格式的方法。
如果您有任何疑問請(qǐng)給我留言,如有問題或錯(cuò)誤請(qǐng)予以斧正!
HTML序章(學(xué)習(xí)目的、對(duì)象、基本概念)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML是什么?——零基礎(chǔ)自學(xué)網(wǎng)頁制作
第一個(gè)HTML頁面如何寫?——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML頁面中head標(biāo)簽有啥用?——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性2(路徑詳解)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格1(基本元素)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格2(表格頭部與腳部)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格3(間距與顏色)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格4(行顏色與表格嵌套)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
封閉在家學(xué)網(wǎng)頁制作!為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單3(下拉列表、多行文字輸入)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單4(form的action、method屬性)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作
為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作
家好,我是 Echa。
今天來分享 50 個(gè)超實(shí)用的 Chrome 瀏覽器擴(kuò)展!
JSON Viewer Pro 用于可視化JSON文件。其核心功能包括:
輸入界面如下:
格式化之后:
JSONVue 是一個(gè)JSON數(shù)據(jù)查看器,主要用來格式化JSON數(shù)據(jù):
Library Sniffer 是一款給開發(fā)者使用的工具,能夠探測(cè)當(dāng)前網(wǎng)頁所使用的類庫、框架和服務(wù)器環(huán)境,為開發(fā)者提供了方便。
Wappalyzer 擴(kuò)展可以用來識(shí)別網(wǎng)站背后的底層技術(shù)。通過此擴(kuò)展,可以了解特定應(yīng)用程序是否是用 React、Vue、Angular、PHP等編寫的。還可以訪問有關(guān) Web 服務(wù)器、編程語言、框架、內(nèi)容管理系統(tǒng)、分析的信息工具、數(shù)據(jù)庫等。
WhatRuns 擴(kuò)展程序只需單擊一下即可找到任何網(wǎng)站上使用的技術(shù)。
使用PerfectPixel插件可以將設(shè)計(jì)圖加載至網(wǎng)頁中,與已成型的網(wǎng)頁進(jìn)行重疊對(duì)比,以幫助開發(fā)和設(shè)計(jì)人員規(guī)范網(wǎng)頁像素精度。這是一款可以優(yōu)化前端頁面顯示的Chrome插件。
可以使用此擴(kuò)展程序快速清除緩存,無需任何確認(rèn)對(duì)話框、彈出窗口等。可以在選項(xiàng)頁面上自定義要清除的數(shù)據(jù)和數(shù)量,包括:應(yīng)用程序緩存、緩存、Cookie、下載、文件系統(tǒng)、表單數(shù)據(jù)、歷史記錄、索引數(shù)據(jù)庫、本地存儲(chǔ)、插件數(shù)據(jù)、密碼和 WebSQL。
VisBug 是一個(gè)使用 JavaScript 構(gòu)建的開源網(wǎng)頁設(shè)計(jì)調(diào)試工具,它可以讓用戶使用點(diǎn)擊式和拖放式界面來查看網(wǎng)站的元素。
Debug CSS 是一個(gè)幫助調(diào)試CSS的插件。他可以顯示出頁面元素的輪播,按住Ctrl,并將鼠標(biāo)懸浮在元素上,即可查看其信息:
CSS Viewer 是一款適用于 Web 開發(fā)人員的高效 Chrome 擴(kuò)展。顧名思義,CSS 查看器可以顯示將鼠標(biāo)懸停在任何網(wǎng)頁上的元素的 CSS 屬性。
EditThisCookie 是一個(gè) cookie 管理器。可以添加,刪除,編輯,搜索,鎖定和屏蔽cookies。
React Developer Tools 是開源 JavaScript 庫 React 的 Chrome DevTools 擴(kuò)展。它允許我們?cè)?Chrome 開發(fā)者工具中檢查 React 組件層次結(jié)構(gòu)。安裝此插件之后,將在 Chrome DevTools 中獲得兩個(gè)新選項(xiàng)卡:"?? Components" 和 "?? Profiler":
Vue.js devtools 是一款基于chrome瀏覽器的用于調(diào)試Vue.js應(yīng)用程序的插件,可以使得開發(fā)人員大大提高調(diào)試效率。支持用戶對(duì)DOM結(jié)構(gòu)數(shù)據(jù)結(jié)構(gòu)進(jìn)行解析和調(diào)試功能。
Augury 可以幫助開發(fā)人員在 Google Chrome 瀏覽器中調(diào)試和分析 Angular 應(yīng)用程序。
Firebug Lite是火狐瀏覽器中著名的開發(fā)者工具firebug插件移植到Chrome中的插件,在Chrome中安裝了Firebug Lite插件以后,開發(fā)人員可以像在火狐瀏覽器中使用firebug一樣熟悉的方式來調(diào)試網(wǎng)頁內(nèi)容,其包含了基本的HTML、CSS以及Javascript的調(diào)試功能,用于幫助網(wǎng)頁前端開發(fā)工程師快速地調(diào)試網(wǎng)頁,以便及時(shí)地找到網(wǎng)頁中的BUG并及時(shí)修復(fù)。
HTML Validator 在 Chrome 的開發(fā)者工具中添加了 HTML Validator。HTML 頁面的錯(cuò)誤數(shù)通過瀏覽器狀態(tài)欄中的圖標(biāo)顯示,詳細(xì)信息可以在瀏覽器的開發(fā)者工具中查看。
Web Developer 擴(kuò)展為帶有各種 Web 開發(fā)工具的瀏覽器添加了一個(gè)工具欄按鈕。該擴(kuò)展適用于 Chrome 和 Firefox,并且可以在這些瀏覽器支持的任何平臺(tái)上運(yùn)行,包括 Windows、macOS 和 Linux。
Requestly 是一款Chrome和Firefox瀏覽器插件,提供URL轉(zhuǎn)發(fā)、修改HTTP請(qǐng)求和結(jié)果、插入腳本等功能。
Window Resizer 主要用來調(diào)整瀏覽器窗口的大小以模擬各種屏幕分辨率。
Responsive Viewer 是在一個(gè)視圖中顯示多個(gè)屏幕的 Chrome 擴(kuò)展程序。該擴(kuò)展將幫助前端開發(fā)人員在開發(fā)響應(yīng)式網(wǎng)站/應(yīng)用程序時(shí)測(cè)試多個(gè)屏幕。
此插件允許直接從瀏覽器發(fā)送跨域請(qǐng)求,而不會(huì)收到跨域錯(cuò)誤。可以使用此插件覆蓋 Request Origin 標(biāo)頭,并將 Access-Control-Allow-Origin 設(shè)置為 *.
ColorPick Eyedropper 是一個(gè)放大的吸管和顏色選擇器工具,可讓從網(wǎng)頁等中選擇顏色值。
CSS Peeper 用于檢查和復(fù)制元素樣式的優(yōu)秀工具,使用 CSSPeeper 可以將鼠標(biāo)懸停在網(wǎng)頁中的任何元素上,然后單擊鼠標(biāo)即可復(fù)制元素的樣式。
24. Dimensions
Dimensions是一款能幫助使用者對(duì)網(wǎng)頁上各種元素屬性之間的距離進(jìn)行測(cè)量的Chrome頁面元素測(cè)量插件,該插件在點(diǎn)擊啟動(dòng)插件圖標(biāo)后,可以對(duì)頁面中圖像、輸入字段、按鈕以及視頻等頁面元素之間上下左右的方位尺寸進(jìn)行測(cè)量,同時(shí)還可以通過使用快捷鍵來快速啟用或關(guān)閉該插件的功能,簡(jiǎn)單實(shí)用。
Site Palette 用于生成調(diào)色板。設(shè)計(jì)師和前端開發(fā)人員必備的工具。可以通過這款插件輕松獲取網(wǎng)站的配色方案。
ColorZilla 是一款功能強(qiáng)大地提取網(wǎng)頁色彩的工具;也是個(gè)快速的對(duì)顏色進(jìn)行調(diào)節(jié)的Chrome插件,許多的用戶將這款軟件稱呼為顏色吸取插件,它提取的顏色是非常的多樣化,還可生產(chǎn)css顏色的代碼等。
當(dāng)我們想查看網(wǎng)頁中文字的字體時(shí),最常用的方法就是在控制臺(tái)查看文字的字體樣式。那還有沒有更簡(jiǎn)單的方法呢?WhatFont 就是一個(gè)查看網(wǎng)頁字體的Chrome擴(kuò)展。只需要的點(diǎn)擊擴(kuò)展圖標(biāo),再點(diǎn)需要查看為文字即可:
Fonts Ninja 可以從任何網(wǎng)站識(shí)別字體、添加書簽、試用并購(gòu)買它們。
使用 BrowserStack 快速啟動(dòng)擴(kuò)展在任何瀏覽器中啟動(dòng)一個(gè)新的測(cè)試會(huì)話。最多可設(shè)置 12 個(gè)瀏覽器以實(shí)現(xiàn)快速訪問并最大限度地減少切換瀏覽器所花費(fèi)的時(shí)間。
Toby 是一款 Chrome 新標(biāo)簽頁工具,能夠?qū)⑽醋x的標(biāo)簽頁分組顯示在新標(biāo)簽頁中,這樣就能把所有未看完的標(biāo)簽頁都關(guān)閉了。分組相當(dāng)于多個(gè) Chrome 窗口,將你的標(biāo)簽頁都拖進(jìn) Toby 中,就不需要實(shí)時(shí)開著占地方了。
該擴(kuò)展提供了每日熱門開發(fā)者新聞,不需要再浪費(fèi)時(shí)間搜索高質(zhì)量的文章了。
Momentum 擁有漂亮的新標(biāo)簽頁面,每日更新精彩背景壁紙圖片,可設(shè)置每日新鮮事焦點(diǎn)以及跟蹤待辦事項(xiàng),無廣告,無彈窗。
The Great Suspender 是一個(gè)輕量級(jí)的擴(kuò)展用來減少 Chrome 的內(nèi)存占用。如果同時(shí)打開許多選項(xiàng)卡,在可配置的時(shí)間之后未查看的選項(xiàng)卡將在后臺(tái)自動(dòng)掛起,從而釋放該選項(xiàng)卡消耗的內(nèi)存和 CPU。
Session Buddy是一個(gè)可以幫助用戶查看、新增、編輯當(dāng)前網(wǎng)站Session狀態(tài)的Chrome插件。用戶可以利用該插件保存網(wǎng)站當(dāng)前的狀態(tài)以便在關(guān)閉Chrome或關(guān)閉計(jì)算機(jī)后恢復(fù),從而達(dá)到節(jié)省內(nèi)存的作用。
Octotree 旨在讓 GitHub 體驗(yàn)更好。通常,為了檢查 Github 中的子文件夾,需要手動(dòng)單擊文件夾并導(dǎo)航。Octotree 擴(kuò)展解決了這個(gè)問題。此擴(kuò)展在項(xiàng)目的左側(cè)顯示存儲(chǔ)庫的目錄結(jié)構(gòu),這有助于更好地理解文件夾結(jié)構(gòu)。
1_EKF88oqIyX6FzgueCKdtXg.gif
File Icons for GitHub and GitLab 可以將 GitHub 和 GitLab 上的原始文件圖標(biāo)替換為特定文件類型的圖標(biāo)。
ax DevTools 是一個(gè)快速、輕量級(jí)但功能強(qiáng)大的測(cè)試工具,由 Deque 開發(fā)的世界上最值得信賴的可訪問性測(cè)試引擎 axe-core 驅(qū)動(dòng)。使用 ax DevTools 在網(wǎng)站開發(fā)過程中查找并修復(fù)更多可訪問性問題。
OctoLinker 可以將特定語言的語句(如 include、require 或 import)轉(zhuǎn)換為鏈接。當(dāng)打開一個(gè)包含多個(gè)導(dǎo)入語句的文件并且想要快速打開它時(shí),只需將鼠標(biāo)懸停在鏈接的文件上并單擊即可打開。
此擴(kuò)展可幫助 Web 開發(fā)人員分析網(wǎng)頁是否違反最佳實(shí)踐。
Check My Links 是一個(gè)鏈接檢查器,它可以抓取網(wǎng)頁并查找損壞的鏈接。
Checkbot 是用于驗(yàn)證一組HTML頁面上的鏈接的工具。Checkbot可以檢查一個(gè)或多個(gè)服務(wù)器上的單個(gè)文檔或一組文檔。它會(huì)創(chuàng)建一個(gè)報(bào)告,該報(bào)告匯總了引起某種警告或錯(cuò)誤的所有鏈接。
Google Page Speed Insighs 是一款旨在優(yōu)化所有設(shè)備上的網(wǎng)頁、提高網(wǎng)頁加載速度的工具。
META SEO inspector是一款可以幫助用戶分析網(wǎng)頁的meta信息并得到SEO評(píng)估的谷歌瀏覽器插件。
Ghostery 是強(qiáng)大的隱私保護(hù)擴(kuò)展程序。其主要有以下功能:
AdBlock 用來在YouTube、Facebook、Twitch和其他你喜愛的網(wǎng)站上攔截廣告和彈窗。
番茄工作法(Pomodoro?)時(shí)間管理助理。? 長(zhǎng)短兩種休息時(shí)間 ? 帶有倒計(jì)時(shí)顯示的工具欄圖標(biāo) ? 追蹤Pomodoro歷史和統(tǒng)計(jì)訊息 ? 可配置的長(zhǎng)休間隔 ? 可配置的定時(shí)器時(shí)長(zhǎng) ? 桌面與新標(biāo)簽頁通知 ? 超過20種音效可選的聲音通知 ? 計(jì)時(shí)器秒針走動(dòng)音效
Loom 可以用來快速錄制視頻,并且能夠?qū)浿频囊曨l上傳到指定的網(wǎng)頁中,Loom還支持在用戶點(diǎn)擊啟動(dòng)插件時(shí),立即捕捉屏幕圖像,同時(shí)開始視頻錄制操作,還可以將錄制好的視頻復(fù)制到粘貼板中存儲(chǔ)。
GoFullPage 是一款全屏截圖插件(整個(gè)網(wǎng)頁截圖),完整捕獲您當(dāng)前頁面的屏幕,進(jìn)行滾動(dòng)截圖,而無需任何額外的權(quán)限。單擊擴(kuò)展程序圖標(biāo),然后將其傳輸?shù)狡聊豢煺盏男聵?biāo)簽頁中,可以在其中將其下載為圖像或PDF,甚至只需拖動(dòng)即可,保存到桌面。
BetterViewer 可以提供更好的圖像查看體驗(yàn),旨在替代基于 Chrome 瀏覽器中內(nèi)置的圖像查看模式。使用時(shí),只需在頁面右鍵點(diǎn)擊圖片,選擇“在新標(biāo)簽頁中打開圖片”即可。
svg-grabber 是一個(gè)快速預(yù)覽并從網(wǎng)站獲取所有 svg 的工具。可以用來預(yù)覽、下載和復(fù)制網(wǎng)站中所有 SVG 圖標(biāo)和插圖的代碼。
文為大家推薦一些實(shí)用的JavaScript 存儲(chǔ)數(shù)據(jù),希望對(duì)大家在前端學(xué)習(xí)過程中有所幫助!
1、store.js(為所有瀏覽器封裝了 LocalStorage,而沒有使用 cookies 和 flash。隱秘地使用 localStorage、globalStorage 和用戶數(shù)據(jù)。)
2、jStorage(jStorage 是一個(gè)簡(jiǎn)單的鍵值對(duì)數(shù)據(jù)庫,用于在瀏覽器端存儲(chǔ)數(shù)據(jù)。)
3、basket.js(用 localStorage 加載和緩存腳本的資源加載器)
4、jquery-cookie(輕量簡(jiǎn)單的、用于讀取、編輯和刪除 cookie 的 jQuery 插件)
5、lawnchair.js(簡(jiǎn)單的客戶端 JSON 存儲(chǔ))
6、DB.js(基于 Promise 的、封裝了 IndexedDB 的庫)
切圖 qietu(.com)
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。