Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
事實證明,Flash 已經不再是互聯網視頻瀏覽的必需……新的開放標準已經被創立,比如 HTML5 這樣的標準才會在移動設備和個人電腦上同樣取得成功。”
喬布斯在 2010年的公開信《關于 Flash 的一點思考》中說。
在這封公開信中,喬布斯是這樣解釋 HTML5 的:最新的網絡標準,已經為蘋果、谷歌等許多公司所采用,它允許開發者開發出更為高級的圖形、印刷和動畫,并且不需要第三方瀏覽器插件(如 Flash )就能轉換。當然,也正是蘋果和谷歌這樣的科技公司在推動著 HTML5、CSS 和 JavaScript 等開放標準的普及和發展。
有關 HTML5 的優勢,我在《HTML5是什么鬼?》也進行過總結。
這是2016年朋友圈的新現象:不論是網頁邀請函,節日游戲,還是品牌廣告,那些被分享出來的 HTML5 頁面不斷嘗試著用更有意思、更流暢的方式來講述每一個事件。
過去一年,幾乎所有人——你的甲方,你最喜歡的品牌,你朋友任職的互聯網公司,都意識到了 HTML5 的作用。它不是一個簡單的網頁,而是能夠更加有效地組織互聯網中的信息,讓視頻、音頻等服務得到更好的支持;并在減輕開發者的負擔的同時,讓你在不同的平臺上有更一致的體驗。
對于用戶來說,通過 HTML5 獲得了前所未有的體驗,與品牌產生共鳴或是激起好奇心,這才是最重要的。
一個月前的天貓雙十一狂歡節 HTML5 推廣頁面《穿越宇宙來看你》,在全景應用的基礎之上,添加了上下滑動預覽節目單的功能,用戶在迅速到達天貓所在舞臺的過程中,還可以看到兩側會場的各種信息。
相比去年《2015,世界為誰傾倒?》不停180度翻轉手機的折騰,你會發現,2016年的HTML5頁面則更加簡單、粗暴。
225 張內置素材,通過拍攝、合成、3D渲染等制作方式,最后以平面圖片的形式導出 HTML5 頁面,最終網站的總體量卻在5MB以內。
Durex GO
杜蕾斯在七夕節開發出一款類《Pokemon Go》游戲《Durex GO》,只是將捕捉目標更換成喜鵲。用戶在地圖上可以看到自己身邊的喜鵲,不同的喜鵲會在游戲進行一段時間后,進化為代金券、杜蕾斯產品或是酒店鑰匙等,捕捉成功的用戶可以將其兌換為相應的產品。
一個 HTML5 的成功往往得益于更立體的視覺和聽覺感受,與用戶更有趣的互動,就像通過萬花筒來觀察世界一樣,為你呈現出前所未有的景象。
以此為理念,推陳出新的優酷萬花筒 HTML5,用萬花筒的成像方式將每一類內容中最具代表性的元素進行合理地拆分,再重組。在英文中,Kaleidoscope(萬花筒)集合了希臘語 Kalos(美麗),Eidos(形狀)和 Scope(觀看)的意思,這也正是優酷想要在這支萬花筒式的 HTML5 中想要傳遞的——豐富的色彩,多樣的表達。
你不會想到,僅僅在一個 HTML5 中,制作方就使用了 Web Graphics Library(Web GL)3D 繪圖標準完成繪制,它可以為 HTML5 Canvas 提供硬件3D加速渲染,有效地幫助Web開發人員借助系統顯卡來瀏覽器里更流暢地展示3D場景和模型,甚至是更為復雜的導航和數據的視覺化。
點擊閱讀原文體驗這個 HTML5 前你可能還需要知道,它最終展現了優酷的“煥新”計劃:如果曾經的優酷是一家視頻網站,那么現在的優酷就要成為一家很酷的視頻網站。
在視頻漸漸成為互聯網內容主流載體的時代到來時,作為用戶的你每時每刻都能夠知曉世界各地正在發生的事情,視頻幫助我們記錄每一個短暫的、偉大的時刻,也正是這些時刻,帶給你一次次的感動、震撼。
總之,你將逐漸看到一個嶄新的優酷。
這個世界當然很酷,優酷正在做的是努力讓你看到這個很酷的世界、世界的每一面,就像在萬花筒中看到繽紛的顏色、妙不可言的幾何圖形,從內心深處被打動。“煥新”計劃或許只是優酷作為這個行業的一份子向前邁出的一小步,但這也讓作為用戶的你看到了,優酷想要為你呈現一個更美好的世界的心愿。
一鏡到底的萬花筒,大劇熱綜都藏在里面了,點擊【閱讀原文】,打開音樂,用手指觸碰出一個更炫的世界。
烏 云 裝 扮 者
To see behind walls.To draw closer.To find
each other and to feel.That is the purpose of life.
世界、黑色趣味和明亮內心
EADTOOLS提供了屢獲獎項的文字識別OCR開發包。使用全新的HTML5查看器和RESTful Web服務,你可以創建一個令人難以置信的識別應用程序,它能夠運行在任意的臺式電腦、平板電腦或移動設備上。無需犧牲移動設備的速度和功能,開發者現在可以享受到強大桌面應用程序擁有的所有好處。由于應用程序本質上是跨平臺的,因此程序員可以節省很多時間以及測試的成本,在更新和維護應用程序時擁有一個更平和的心態。
· 用于跨平臺圖像查看的HTML5/JavaScript Viewer控件。
· 支持HTML5,可以運行在任何臺式機、平板電腦或移動設備上的瀏覽器。
· 支持鼠標和多點觸控(手勢)輸入。
· 交互模式包括:
a. 平移
b. 縮放
c. 區域縮放
d. 以點為中心縮放
e. 放大鏡
f. 合攏分開手指進行縮放
g. 回彈效果
· 基于物理和邏輯單元顯示圖像。
· 圖像操作內置以下動作:
a. 旋轉
b. 翻轉
c. 縮放
· 本地化的圖像注釋和標記。
· 包含源碼,易于定制和品牌化。
· 擴展LEADTOOLS RESTful Web服務,添加高級功能,如擴展后文件格式支持(TIFF、PDF、DOC、DICOM等),OCR和條碼。
· 快速、準確、多線程的OCR文字識別引擎,用于桌面應用程序或高性能的服務器環境。
· 整頁和區域OCR。
· 支持廣泛的語言和字符集,包括拉丁文、斯拉夫字母、東亞語言和阿拉伯語。
· 強大的文檔圖像清理和預處理功能
· 從任意顏色、灰度或黑白圖像中提取文本。
· 使用LEADTOOLS Cloud SDK輕松創建靈活的、強大的和高效的分布式OCR應用程序。
包含 HTML5 & OCR文字識別技術的SDK產品
這個例子我們使用到HTML5 Image Viewer控件,展示了如何調用OCR RESTful web服務。文章中的示例并沒有包含所有代碼。
LEADTOOLS OCR RESTful Web 服務是將OCR功能添加到任意應用程序中的簡單方法,無需下載龐大的語言識別庫和可執行程序。它只需要一組簡單的參數(原始圖像和識別區域),并將結果以容易解析的JSON結構返回。
在這個示例中,我們為您展示了如何使用web服務執行兩種類別的識別:部分的或整頁的。第一種通過使用查看器內置的rubber band事件選擇一塊小區域完成。使用鼠標單擊拖動或手指觸摸屏幕滑動,用戶可以在圖像中選擇一個矩形,觸發事件然后將它們的坐標傳遞給后臺的web Service。
一旦服務按照onReadyStateChanged事件處理完成,你就可以使用JSON解析響應,根據應用程序的需要顯示或使用識別出的文本。在下面的例子中,我們會在一個警告框中顯示文字。
_selectRecognizeArea_RubberBandCompleted$1: function HTML5DemosLibrary__ocrDemo$ _selectRecognizeArea_RubberBandCompleted$1(sender, e) { // 獲取選中的區域,將它作為OCR文字識別的一個區域 var searchArea = Leadtools.LeadRectD.fromLTRB(e.get_point1.get_x, e.get_point1.get_y, e.get_point2.get_x, e.get_point2.get_y); var visibleRect = _viewer.imageControlRectangle(true); searchArea.intersect(visibleRect); searchArea = _viewer.convertRect(Leadtools.Controls.CoordinateType.control, Leadtools.Controls.CoordinateType.image, searchArea); if (searchArea.get_width > 3 && searchArea.get_height > 3) { this._recognize$1(searchArea); } }, _recognize$1: function HTML5DemosLibrary__ocrDemo$_recognize$1(searchArea) { // 當等待時,顯示正在加載的圖片 this.beginOperation; // 創建請求 var rest = this.buildServiceUrl('ocr.svc'); rest += '/GetText?uri='; rest += _viewer.get_imageUrl; var imageSize = _viewer.get_imageSize; rest += '&width='; rest += parseInt(imageSize.get_width); rest += '&height='; rest += parseInt(imageSize.get_height); if (!searchArea.get_isEmpty) { // 沒有選擇,則識別整個頁面 rest += '&left='; rest += parseInt(searchArea.get_left); rest += '&top='; rest += parseInt(searchArea.get_top); rest += '&right='; rest += parseInt(searchArea.get_right); rest += '&bottom='; rest += parseInt(searchArea.get_bottom); } // 創建請求和事件句柄 var request = new XMLHttpRequest; var _this = this; var readyStateChanged = function { if (request.readyState === 4) { if (request.status === 200) { var results = null; if (request.responseText != null && request.responseText.length > 0) { results = JSON.parse(request.responseText); } else { alert('No text was found in the specified area, please select another area that contains text and try again.'); } request.onreadystatechange = null; request = null; _this.endOperation(false); if (results != null) { alert (results); } } else { _this.showRequestError(request); } } }; // 發送請求 request.onreadystatechange = readyStateChanged; request.open('GET', rest, true); request.send; },
你可能注意到了如果沒有給識別函數傳遞矩形,它會為整個圖像創建一個矩形,然后調用web服務。因此程序員需要做的只是創建一個簡單的按鈕事件處理器完成整個頁面的OCR。
var recognizeButton = document.getElementById('recognizeButton'); recognizeButton.addEventListener('click', function(e) { // 發送一個空區域,識別整個圖像 _this._recognize$1(Leadtools.LeadRectD.get_empty); }, false);
LEADTOOLS為開發者提供了世界一流的穩定圖像庫。易用的高級編程接口使業務關鍵型應用程序的快速開發變為可能。
HTML5和OCR RESTful Web服務是LEADTOOLS諸多功能中的一個。
本站文章除注明轉載外,均為本站原創或翻譯
挑選了10款在網站開發中很實用的 HTML5 & jQuery 插件,如果你正在尋找能優化網站,使其更具創造力和視覺沖擊,那么本文正是你需要的。這些優秀的 jQuery 插件能為你的網站提供各種各樣強大的功能和效果。
1.Dynatable
Dynatable 這款 jQuery 插件能很好的改善標準 HTML 列表的可用性。一旦初始化,插件就會通過列表的行和列轉換成 JSON 對象數組,時刻準備操作。它可以提供強大的排序,過濾,分頁或者是搜索 API,同時可以用簡單的方式處理所有操作,可以被用于其他架構的 HTML 元素。
2. Least.js
Least.js 用于創建隨機響應式的 HTML5 和 CSS3 圖像庫,包括 Lazyload。它非常容易安裝和使用,而且最終效果都是非常華美和漂亮。
3 AudioPlayer.js
AudioPlayer.js 是可以在任何 web 頁面快速放置 HTML5 驅動的 jQuery 音頻播放器插件。這款插件的界面非常別致(不使用任何圖片),有個響應式的布局,支持觸摸。它有著主要的控制功能(播放,暫停,音量和播放時間);大小只有 4 kb。
4. Echo.js
Echo 是個獨立的 JavaScript 延遲加載圖像工具。Echo 使用 HTML5 data-* 屬性,速度非常的快。Echo 可以在 IE8+ 的瀏覽器運行, 它是非常簡單的圖像延遲加載工具,大小最小為 1KB ,是個 library agnostic(沒有 jQuery/Zepto/other)
Lazy-loading 只會在元素將要被查看時才會請求從服務器中加載圖像,通過簡單的修改圖像 src 屬性就可以自動運行。同時這也是異步操作的一個優勢所在。
5. Slippery
Slippry 是個 jQuery 圖像庫插件,擁有很多現代化時尚元素。首先,它使用 HTML5 & CSS3 標記,在響應式布局(可選)上運行的非常好。它可以變成 Sass 或者是 CSS 樣式,有多種轉換選擇,其中包括 Ken Burns 效果。
滑塊可以設置為自動滑動,顯示標題,后退-前進+導航控制。它提供重大事件函數的回調,多個示例和一個詳細文檔。
6. AudioPlayer.js
AudioPlayer.js 是可以在任何 web 頁面快速放置 HTML5 驅動的 jQuery 音頻播放器插件。這款插件的界面非常別致(不使用任何圖片),有個響應式的布局,支持觸摸。它有著主要的控制功能(播放,暫停,音量和播放時間);大小只有 4 kb。
7. HTML5 Sortable
HTML5 Sortable 是個創建可排序列表和網格的 jQuery 插件,使用本地 HTML5 拖拽 API。它有類似 jQuery UI 的 API + 行為。這是個輕量級插件(壓縮后小于 1kb),支持 “連接列表(在不同列表轉移條目)”,最厲害的是兼容所有主流瀏覽器。
8. Droparea
Droparea 是個 HTML5 拖拽文件上傳 jQuery 插件,服務端包含一個 PHP 腳本。簡單的拖拽圖片文件進去指定的區域,圖片就會自動的上傳到你的服務器。在上傳的同時,用戶可以看到上傳的進度。目前測試結果支持 Google Chrome 和 Mozilla Firefox。
9 jQuery.HTML5Form
jQuery.Html5form 是個 jQuery 插件,添加沒有 HTML5 表格驗證功能到非兼容的瀏覽器中,不要求任何自定義函數或者代碼。用戶只要用 HTML5 語法創建表格,它就會自動執行。同時,這個插件還提供額外的一些功能,比如錯誤信息提示等錯誤處理方案,用戶可以自行選擇自己需要的。
10. Cuepoint JS
Cuepoint JS 是一個為 HTML5 視頻增加提示點和字幕的插件,幾秒就顯示一組字幕。它提供一個設置時間的事件,可以用來附加任何元素跳到多媒體第二個提示點。
上面的內容有某有幫到你呢,歡迎在底部留言點評提意見。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。