|
本文所提及的所有范例都已添加或更新到新版 aardio 范例內(nèi)，請到「范例 / Web 界面」目錄下查看。
相關(guān)擴(kuò)展庫請更新到最新版，新版用起來更簡潔更方便。
一、web.view ( WebView2 ) 播放視頻。
WebView2 基于強(qiáng)悍的 Edge Chromium 內(nèi)核，支持 HTML5 視頻肯定是沒問題，但 …… 這里面還是有些小坑要解決。
首先播放視頻肯定是需要有全屏功能的，但是瀏覽器原生的 video 組件的全屏按鈕 —— 實(shí)際上是不能全屏的，只能在網(wǎng)頁內(nèi)部最大化。瀏覽器可能認(rèn)為隨意全屏?xí)τ脩粼斐衫_。但畢竟看視頻又確實(shí)需要全屏功能，所以瀏覽器又悄悄提供了真正請求全屏的函數(shù) requestFullscreen()。不過瀏覽器原生播放器的全屏按鈕屬于 Shadow DOM 的隱藏節(jié)點(diǎn) —— 并且瀏覽器會阻止獲取這個(gè)節(jié)點(diǎn)，所以這個(gè)就麻煩了。自己實(shí)現(xiàn)這些控制按鈕還是要費(fèi)些功夫，于是我們打開萬能的 GitHub 直接搜索 'video player' 看看有沒有白嫖一個(gè)的可能性。
排名第一的是 video.js , 好吧我們湊個(gè)熱鬧就用他了。
先上代碼：
import web.view; import wsock.tcp.asynHttpServer; import win.ui; /*DSG{{*/var winform = win.form(text='WebView2(web.view) 播放視頻并支持全屏';right=1008;bottom=616)/*}}*/ var httpServer = wsock.tcp.asynHttpServer(); httpServer.run( { ['/index.html'] = /** <html> <head> <style type='text/css'> html,body { height: 100%; width: 100%; margin: 0;overflow: hidden; }</style> <!--第一步：引入下面2個(gè)文件加載播放器 --> <link href='https://cdn./npm/video.js@7.15.4/dist/video-js.min.css' rel='stylesheet'> <script src='https://cdn./npm/video.js@7.15.4/dist/video.min.js'></script></head> <body> <!-- 第二步：插入視頻文件 --> <video id='my-player' class='video-js' controls preload='auto' poster='https://vjs./v/oceans.png' style='width:100%;height:100%' data-setup='{}'> <source src='http://download./demo/video.aardio' type=' video/mp4'> </source> </video> <script> //第三步：修改播放器選項(xiàng),這一步可以省略 videojs('my-player', { controlBar: { fullscreenToggle: true } }); //第四步：響應(yīng)網(wǎng)頁全屏請求 document.onfullscreenchange = function (event) { aardio.fullscreen(!!document.fullscreenElement); //調(diào)用 aardio 窗口的全屏函數(shù) } /* 注意原生 video 的全屏按鈕只是網(wǎng)頁內(nèi)部最大化,不會觸發(fā) onfullscreenchange 事件。 vedio.js 播放器的全屏按鈕則是調(diào)用視頻節(jié)點(diǎn)的 requestFullscreen() 函數(shù)實(shí)現(xiàn)了真正的全屏。 */</script></body></html>**/;}); var wb = web.view( winform ); wb.external = { //瀏覽器僅僅是發(fā)出全屏指令,在這里用 aardio 控制全屏 fullscreen = lambda(fs) winform.fullscreen(fs) }wb.go( httpServer.getUrl('index.html') ); winform.show(); win.loopMessage(); 這個(gè)范例在這里可以找到：
首先，為了避免不必要的麻煩，我們用 var httpServer = wsock.tcp.asynHttpServer() 創(chuàng)建一個(gè) HTTP 服務(wù)器來給瀏覽器控件提供 HTML 文件，aardio 用幾句代碼就可以實(shí)現(xiàn)一個(gè) HTTP 服務(wù)器，不會增加軟件體積，不加白不加?，F(xiàn)在很多前端的東西 —— 都針對 HTTP 服務(wù)器做了優(yōu)化，并且對本地文件不友好（各種加限制），所以這是推薦的方式。
上面我們虛擬了一個(gè) index.html 文件，如果你創(chuàng)建了 aardio 工程，這些 HTTP服務(wù)器默認(rèn)就支持 aardio 工程里的資源目錄下的路徑，不用加任何代碼，用起來更簡單。
WebView2 組件收到網(wǎng)頁代碼的全屏請求以后會觸發(fā) document .onfullscreenchange 這個(gè)事件，并不會真的全屏。全屏還是挺復(fù)雜的，而且也超越了網(wǎng)頁本該有的權(quán)限，人家只是一個(gè)瀏覽器控件，不是一個(gè)瀏覽器，所以全屏要我們自己實(shí)現(xiàn)。好在 aardio 的 winform 或 custom 控件都提供了全屏函數(shù) fullscreen()，別看 aardio 體積小，好東西是真多。
我們先用下面的代碼導(dǎo)出這個(gè)函數(shù)讓網(wǎng)頁中的 JavaScript 可以調(diào)用，這在 aardio 中就太簡單了。
wb.external = { fullscreen = lambda(fs) winform.fullscreen(fs) }然后在 JavaScript 中加上以下的關(guān)鍵代碼: document.onfullscreenchange = function (event) { aardio.fullscreen(!!document.fullscreenElement); //調(diào)用 aardio 窗口的全屏函數(shù)}
注意 document.fullscreenElement 是當(dāng)前請求全屏的節(jié)點(diǎn)，如果這個(gè)屬性不是 null 表示需要全屏，將這個(gè)屬性用 !! 操作符轉(zhuǎn)為布爾值剛好可以作為 winform.fullsreen() 函數(shù)的參數(shù)控制全屏或取消全屏。
二、web.form ( IE內(nèi)核 ） 播放視頻
很多人低估了 IE 內(nèi)核的能力，IE的接口是非常強(qiáng)大的，而且屬于系統(tǒng)自帶的控件不占軟件體積，現(xiàn)在 IE 11也已經(jīng)普及。雖然比不上 WebView2 那么強(qiáng)大，新的前端技術(shù)支持 IE也不再熱情，但你不要拿他跟瀏覽器比，你拿 IE 控件跟原生控件比，例如 static,picturebox…… 即然這些東西可以一直用，表現(xiàn)能力更強(qiáng)的 IE 控件我們也沒理由嫌棄。不要跟專門做網(wǎng)頁前端的去比較，大家目的不同。
另外雖然新的操作系統(tǒng)已經(jīng)移除了 IE 瀏覽器，但 IE控件卻作為操作系統(tǒng)不可分離的組件被保留。實(shí)際上依賴 IE 控件的桌面軟件直到今日都擁有驚人的數(shù)量，這是很多人并沒有意識到的。
我們知道 IE的最高版本 IE11，很多流行的前端組件都兼容 IE11，例如上面提到的 video.js 也兼容 IE11。雖然現(xiàn)在 IE11基本普及，但是考慮到還有少數(shù)沒安裝 IE11的系統(tǒng)，aardio 提供了一個(gè)庫 web.form.ie11，使用這個(gè)庫替代 web.form 會有一個(gè)好處：這個(gè)庫會檢測 IE11是否安裝，如果沒安裝會自動升級到 IE11,。
我們前面的代碼也可以在 web.form 里使用，但是有幾個(gè)小細(xì)節(jié)要注意一下。IE 的全屏事件不是 fullscreenchange 而是 MSFullscreenChange, 而且一定要用 document.addEventListener() 來注冊這個(gè)事件。注意網(wǎng)上有很多文章寫成了 msfullscreenchange —— 實(shí)際上是不能用的?？捎玫?JavaScript 代碼如下： document.addEventListener('MSFullscreenChange', function () { external.fullscreen(!!document.msFullscreenElement)}, false);上面可以看到，IE檢測全屏節(jié)點(diǎn)的屬性是 document.msFullscreenElement，這個(gè)名字跟 WebView2 也是不同的，要注意區(qū)分。
完整代碼如下： import win.ui;
/*DSG{{*/var winform = win.form(text='WebView2(web.view) 播放視頻并支持全屏';right=1008;bottom=616)/*}}*/
import web.form.ie11; var wb = web.form.ie11( winform );
//導(dǎo)出網(wǎng)頁 JavaScript 可調(diào)用的 external 對象。wb.external = { //瀏覽器僅僅是發(fā)出全屏指令,在這里用 aardio 控制全屏 fullscreen = lambda(fs) winform.fullscreen(fs) }
wb.html = /**<html><head> <style type='text/css'> html,body { height: 100%; width: 100%; margin: 0;overflow: hidden; }</style> <!--第一步：引入下面2個(gè)文件加載播放器 --> <link href='https://cdn./npm/video.js@7.15.4/dist/video-js.min.css' rel='stylesheet'> <script src='https://cdn./npm/video.js@7.15.4/dist/video.min.js'></script></head><body>
<!-- 第二步：插入視頻文件 --> <video id='my-player' class='video-js' controls preload='auto' poster='https://vjs./v/oceans.png' style='width:100%;height:100%' data-setup='{}'> <source src='http://download./demo/video.aardio' type=' video/mp4'> </source> </video>
<script>
//第三步：修改播放器選項(xiàng),這一步可以省略 videojs('my-player', { controlBar: { fullscreenToggle: true } });
//第四步：響應(yīng)網(wǎng)頁全屏請求注意 MSFullscreenChange 大小寫不能錯(cuò) document.addEventListener('MSFullscreenChange', function () { external.fullscreen(!!document.msFullscreenElement) }, false); </script></body></html>**/
winform.show(); win.loopMessage();aardio 范例中以下位置可以找到上面的代碼：
三、web.kit ( WebKit 內(nèi)核）播放視頻
這是一個(gè)古老的精簡版 WebKit ( WKE ), 也不要小看這個(gè)東西，放棄完美主義強(qiáng)迫癥本著物盡其用的心態(tài)去看待他，有時(shí)候還是非常有用的。首先這個(gè)內(nèi)核體積驚人的小，生成 EXE 如果打個(gè)壓縮包就 3MB，而且還能支持古老的 Windows XP 系統(tǒng) —— 當(dāng)然現(xiàn)在要找到一個(gè)還在用 XP的是真有點(diǎn)難了。
今天我對 web.kit 做了一個(gè)重要的改進(jìn)，可以更好地通過加載 aardio 擴(kuò)展庫為 web.kit 添加新的 NPAPI 插件，并且默認(rèn)就可以生成獨(dú)立EXE文件。
NPAPI 插件的一個(gè)用途就是用來加載 Flash 插件，其實(shí)現(xiàn)在還要非常多的 Flash 遺留程序，目前想重新運(yùn)行他們并不容易，不過有了 web.kit 這事就不難了，寫幾句代碼就可以讓 Flash 完全復(fù)活，先來個(gè)播放 Flash 動畫的小例子：
import win.ui;
/*DSG{{*/var winform = win.form(text='Flash 動畫';)/*}}*/
import web.kit.form;var wke = web.kit.form( winform );
import web.npPlugin.flash;wke.html = /**<embed quality=high bgcolor=#FFFFFF width='550' height='400' id='flash' type='application/x-shockwave-flash'></embed><script>loadSwf = function(url){ document.getElementById('flash').LoadMovie(0,url)}</script>**/
wke.wait();wke.script.loadSwf('https://update./v10.files/demo/transparent.swf')
winform.show() win.loopMessage();
是不是簡單又方便徹底完美解決問題？！
這個(gè)精簡版的 WebKit 內(nèi)核肯定是不支持 HTML5 視頻了，但在 Flash 時(shí)代有一個(gè)強(qiáng)大的 html5media, 可以利用 Flash 插件實(shí)現(xiàn)兼容 HTML5 視頻的效果，因?yàn)槲覀儚?fù)活了 Flash ，所以就可以舒服地再次用上 html5media 了。
上代碼： import web.kit.form;import web.npPlugin.flash;import wsock.tcp.asynHttpServer;import win.ui;/*DSG{{*/var winform = win.form(text='web.kit 支持 HTML5 視頻（基于 Flash）';right=1008;bottom=616)/*}}*/
var httpServer = wsock.tcp.asynHttpServer(); httpServer.run( { ['/index.html'] = /**<html><head> <style type='text/css'> html,body { height:100%;width:100%;margin:0;overflow:hidden; }</style> <script src='https://cdn./npm/html5media@1.2.1/dist/api/1.2.1/html5media.js'></script></head><body> <video src='http://download./demo/video.aardio' width='100%' height='100%' controls preload></video></body></html>**/;});
//通過HTTP服務(wù)器 Flash 才能訪問網(wǎng)絡(luò)，否則會有警告對話框。//aardio 僅用數(shù)句代碼就可以啟動一個(gè)嵌入式HTTP服務(wù)器，不會增加軟件體積。var mb = web.kit.form( winform );mb.go( httpServer.getUrl('index.html') );
winform.show(); win.loopMessage();
以上代碼在范例中的位置：
要注意如果加載本地的 Flash ，默認(rèn)是禁止訪問網(wǎng)絡(luò)的，會跳出一個(gè)體驗(yàn)非常差的警告。Flash 也是為了保護(hù)大全的安全操作了心 —— 結(jié)果把自己給操心沒了。不過在 aardio 中解決這問題就太簡單了，3句代碼調(diào)用 wsock.tcp.asynHttpServer 創(chuàng)建一個(gè)嵌入 HTTP 服務(wù)器就搞定。
其實(shí) Flash 真是挺強(qiáng)大的，雖然多少年前的東西，全屏這些都不用操心，代碼也可以少寫一些了。
四、web.blink( Miniblink 內(nèi)核 ）播放視頻。
Miniblink 也是一個(gè)精簡 Chromium 內(nèi)核，兼容了前面說的 WebKit( WKE ) 的接口，體積要大一些，內(nèi)核基于 Chromium 49。
Miniblink 同樣不支持 HTML5視頻，多年前試過支持 html5media ，但今天試了一下失敗了，沒任何反應(yīng)，也沒有報(bào)錯(cuò)。沒有報(bào)錯(cuò)就只能全靠猜了，猜測 Miniblink 給出了誤導(dǎo)的信息，一開始懷疑是 User-Agent，改了一下沒起作用，然后用 JavaScript 測試了一下，Miniblink 在檢測視頻能力時(shí)默認(rèn)會告知 JavaScript 他已經(jīng)支持視頻 —— 即然如此，于是 html5media 就什么也沒干。
于是我把 html5media 下載過來，把檢測的代碼全刪了。代碼已經(jīng)分享到 https://github.com/aardio/html5media-blink
然后我們把 html5media 的鏈接改成這個(gè)：https://cdn./gh/aardio/html5media-blink@main/html5media.min.js
注意 這個(gè) CDN 在國內(nèi)訪問是非?？斓?，也很穩(wěn)定，CDN 可以優(yōu)先用這個(gè)( 程序打開的速度會快很多 )，而且 支持 GitHub 和 NPM 上的文件，非常方便。
完整代碼：
import web.blink.form;
import web.npPlugin.flash;import wsock.tcp.asynHttpServer;import win.ui;/*DSG{{*/var winform = win.form(text='web.blink 支持 HTML5 視頻（基于 Flash）';right=1008;bottom=616)winform.add()/*}}*/
var httpServer = wsock.tcp.asynHttpServer(); httpServer.run( { ['/index.html'] = /**<html><head> <style type='text/css'> html,body { height:100%;width:100%;margin:0;overflow:hidden;}</style> <script src='https://cdn./gh/aardio/html5media-blink@main/html5media.min.js'></script></head><body> <video src='http://download./demo/video.aardio' width='100%' height='100%' style='height: 100%; width: 100%' controls preload></video></body></html>**/;});
//通過HTTP服務(wù)器 Flash 才能訪問網(wǎng)絡(luò)，否則會有警告對話框。//aardio 僅用數(shù)句代碼就可以啟動一個(gè)嵌入式HTTP服務(wù)器，不會增加軟件體積。var mb = web.blink.form( winform );mb.go( httpServer.getUrl('index.html') );
winform.show(); win.loopMessage();
aardio 中其他一些 Web 界面解決方案，例如 chrome.app 這些就是直接運(yùn)行瀏覽器和網(wǎng)頁，與網(wǎng)頁開發(fā)沒多大區(qū)別。更多的技巧大家可以繼續(xù)探索。
|
