整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
otNetBrowser是一個.NET庫，允許將基于Chromium的WPF和WinForms組件嵌入到.NET應(yīng)用程序中，以顯示使用HTML5，CSS3，JavaScript，Silverlight等構(gòu)建的現(xiàn)代網(wǎng)頁。
DotNetBrowser迎來v2.5版本更新，在此更新中，帶來了更新的 Chromium 引擎和具有新功能的 API，為了方便大家盡可能順利過度新版本，我們特意準(zhǔn)備了本指南將幫助您了解新版本都要哪些新增與改動。還沒有使用過可以點擊下方鏈接下載哦~
DotNetBrowser官方最新版免費下載試用，歷史版本下載，在線文檔和幫助文件下載-慧都網(wǎng)
引用Chromium 91
Chromium 引擎已更新到版本 91.0.4472.114。
此 Chromium 版本包含幾個重要的安全修復(fù)程序，因此我們建議您升級到此版本。
結(jié)構(gòu)
DotNetBrowser API 已使用 Chromium 配置文件進(jìn)行了擴(kuò)展。現(xiàn)在，該架構(gòu)具有以下結(jié)構(gòu)：
每個引擎都有一個默認(rèn)值，IProfile您可以通過以下方式訪問：
IProfile defaultProfile = engine.Profiles.Default;要創(chuàng)建新的常規(guī)或隱身個人資料，請使用以下 API：
IProfile profile = engine.Profiles.Create("MyProfile");
IProfile incognitoProfile = engine.Profiles.Create("MyIncognitoProfile",
ProfileType.Incognito);每個IBrowser實例都有一個配置文件。要IBrowser為特定配置文件創(chuàng)建實例，請使用以下方法：
IProfile profile = engine.Profiles.Create("MyProfile");
IBrowser browser = profile.CreateBrowser();為了向后兼容，我們沒有改變IEngine界面。它只是將其調(diào)用委托給默認(rèn)配置文件。例如：
IBrowser browser = engine.CreateBrowser();
// is equivalent of
IBrowser browser = engine.Profiles.Default.CreateBrowser();ICookieStore cookieStore = engine.CookieStore;
// is equivalent of
ICookieStore cookieStore = engine.Profiles.Default.CookieStore;如果您IEngine使用用戶數(shù)據(jù)目錄配置 ，則所有創(chuàng)建的配置文件將在應(yīng)用程序重新啟動后恢復(fù)。
查看頁面源代碼
現(xiàn)在您可以像在谷歌瀏覽器中一樣查看加載的網(wǎng)頁或框架的來源：
browser.MainFrame?.ViewSource();上面的代碼告訴 Chromium 創(chuàng)建并打開一個帶有主框架的 HTML 源代碼的彈出窗口。它將是一個具有以下外觀的常規(guī)彈出窗口：
可以通過瀏覽器設(shè)置強(qiáng)制首選配色方案：
browser.Settings.PreferredColorScheme = PreferredColorScheme.Dark; //forces dark mode
browser.Settings.PreferredColorScheme = PreferredColorScheme.Light; //forces light mode默認(rèn)背景色
當(dāng) Chromium 不知道網(wǎng)頁的背景顏色，或者根本沒有指定顏色時，它使用白色。在此版本中，我們使用新功能擴(kuò)展了 API，允許您配置 Chromium 應(yīng)使用的默認(rèn)背景顏色，而不是這種情況下的默認(rèn)白色。
以下代碼演示了如何為 about:blank 頁面設(shè)置所需的背景顏色：
Color purple = new Color(0.6f, 0.3f, 0.6f);
browser.Settings.DefaultBackgroundColor = purple;畫中畫
現(xiàn)在可以在與其他網(wǎng)站或應(yīng)用程序交互時在浮動窗口（在其他窗口之上）觀看視頻。
同樣的HTML+CSS+JS，但是表現(xiàn)出的外部特征還是不能達(dá)到統(tǒng)一，存在瑕疵。同樣的代碼，有的瀏覽器效果顯示"正常"，有的顯示"不正常"。就像同樣的去吃大排檔，就有的人吃完一點事沒有，而有的人就會拉肚子。
不同廠家開發(fā)所用的核心架構(gòu)不同和代碼很難重合，實現(xiàn)方式也有差異，所以呈現(xiàn)在頁面上的樣式也就會有一部分的差異，看著會有些不同。
1）：要不要去做？（看做的產(chǎn)品的影響程度，受眾面，是主打效果還是基本功能）
2）：做到什么程度？（想要那些瀏覽器支持，就給那些瀏覽器做兼容）
3）：怎么做？（根據(jù)兼容問題，來選擇那些框架，和那些兼容工具。）
4，漸進(jìn)增強(qiáng)和優(yōu)雅降級
1）：漸進(jìn)增強(qiáng)：現(xiàn)針對低版本瀏覽器進(jìn)行基本功能和頁面，再針對高版本的瀏覽器進(jìn)行效果，交互，和用戶體驗做出改進(jìn)。
2）：優(yōu)雅降級：一開始就先針對于高版本瀏覽器進(jìn)行完整的頁面展示（效果，交互，功能，用戶體驗），然后在對低版本瀏覽器進(jìn)行兼容
1，高度塌陷
浮動元素的父元素自適應(yīng)（父元素不寫高度時，子元素寫了浮動后），父元素會發(fā)生高度塌陷
解決方案
1） ：給父元素添加聲明：overflow：hidden；
2） ：字啊浮動元素下方添加空div。并給該元素聲明，clera：both；height：0；overflow：hidden；
2， 最小高度自適應(yīng)（因為min-heigh本身就是一個不兼容的css屬性，所以各個瀏覽器不兼容）
1） ：min-height：value；-height：value
2） ：min-height：value；heigth：auto！Important；height：value
3，按鈕元素大小不一樣
1） ：給按鈕統(tǒng)一大小
2） ：外邊套一個標(biāo)簽，在標(biāo)簽與按鈕樣式把input邊框和背景去掉
4，圖片默認(rèn)有間距（幾個img標(biāo)簽放在一起的時候，有些瀏覽器會有默認(rèn)的間距）
1）；給img添加float屬性
5，ie6圖片下方會產(chǎn)生間隙
1）：為圖片設(shè)置display；block；
6，ie8以下的透明
1）：filler：alpha（取值范圍0-100）例如：filter:alpha(opacity=60)
7，空div的默認(rèn)行高（清浮動時會使用一個空的div，在大部分瀏覽器沒問題，在ie6中即使div是空的也會有默認(rèn)行高）
1）設(shè)置其高度為0，并設(shè)置overflow:hidden。
1）：用于解決IE9以下版本瀏覽器對HTML5新增標(biāo)簽不識別，并導(dǎo)致CSS不起作用的問題。
2）：Respond.js：是一個快速、輕量的 polyfill，用于為 IE6-8 以及其它不支持 CSS3 Media Queries 的瀏覽器提供媒體查詢的 min-width 和 max-width 特性，實現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計
3）：CSS Reset：重置瀏覽器的css默認(rèn)屬性；瀏覽器的品種不一樣，那么對默認(rèn)樣式的解釋不一樣，通過reset可以達(dá)到顯示一致的效果。
4）：normalize.css：是一個可以定制的CSS文件，它讓不同的瀏覽器在渲染網(wǎng)頁元素的時候形式更統(tǒng)一。
5）Modernizr.js:傳統(tǒng)瀏覽器目前不會被完全取代，令你難以將最新的 CSS3 或 HTML5 功能嵌入你的網(wǎng)站。 Modernizr 正是為解決這一難題應(yīng)運而生，它也可以通過加載定制的腳本來模擬老版本瀏覽器不支持的功能。
篇文章主要介紹了HTML5實現(xiàn)音頻和視頻嵌入的方法的相關(guān)資料，原生的支持音頻和視頻，為HTML5注入了巨大的發(fā)展?jié)摿Γ【幱X得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
簡介
HTML5未出來之前，在線的音頻和視頻都是借助Flash或者第三方工具實現(xiàn)的，現(xiàn)在HTML5也支持了這方面的功能。在一個支持HTML5的瀏覽器中，不需要安裝任何插件就能播放音頻和視頻。原生的支持音頻和視頻，為HTML5注入了巨大的發(fā)展?jié)摿Α?/p>
html實現(xiàn)音頻嵌入(傳統(tǒng)方式)：這種方式雖然可以實現(xiàn)，但是要瀏覽器支持Flash而且并不能實現(xiàn)控制，所以要實現(xiàn)起來很麻煩。
<object height="200" width="200" data="2_1.swf" >
</object>
<embed src="2_1.mp4" type="">
那么也就是說HTML5存在一個很大的問題就是兼容性。音頻
HTML5支持的音頻格式：
視頻
視頻格式：
由上可知，HTML5貌似支持的格式有點少哈，所以當(dāng)你發(fā)現(xiàn)用HTML5放置音頻和視頻不顯示時，應(yīng)該就是格式不支持的問題。注： MP4有3種編碼，mpg4(xdiv),,mpg4(xvid)，avc(h264)， 只有h264才是公認(rèn)的MP4標(biāo)準(zhǔn)編碼(在這也是被坑了，其他格式的只有聲音沒有圖像。)遇到這種問題，就用視頻格式轉(zhuǎn)換器，轉(zhuǎn)換一下格式就OK啦。
音頻實現(xiàn)起來很簡單：這里工具條使用了瀏覽器默認(rèn)的工具條。
?
1
2
3
<audio src="htmls/1.mp3" controls="controls" loop="loop" preload="auto" >
你的瀏覽器不支持video元素
</audio>
視頻雖然也可以使用瀏覽器默認(rèn)的，但無法實現(xiàn)私人訂制，所以從學(xué)技術(shù)的角度講，還是要學(xué)習(xí)一下自己做工具實現(xiàn)功能（audio也可參照此方法）。
audioVideo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>網(wǎng)頁放置視頻</title>
<style type="text/css">
</style>
<script type="text/javascript" src="js/ControlBar.js"></script>
</head>
<body>
<audio src="htmls/1.mp3" controls="controls" loop="loop" preload="auto" >
你的瀏覽器不支持video元素
</audio>
<video id="myPlayer" width="600" height="400" src="htmls/2_1.mp4" controls="controls" loop="loop" poster="3.jpg">
你的瀏覽器不支持audio元素
<!-- MP4有3種編碼，mpg4(xdiv),,mpg4(xvid)，avc(h264)，
只有h264才是公認(rèn)的MP4標(biāo)準(zhǔn)編碼 -->
</video>
<div id="progress"></div>
<!-- 音量控制 -->
<input id="volume" type="range" min="0" max="1" step="0.1" onchange="Volume(this)">
<!-- 速率和時間進(jìn)度的信息 -->
<span id="rate">1</span>fps <span id="info"></span>
<button onclick="Play(this)" id="btn1">播放</button>
<button onclick="Fast()">快進(jìn)</button>
<button onclick="Slow()">慢進(jìn)</button>
<button onclick="Prev()">后退</button>
<button onclick="Next()">前進(jìn)</button>
<button onclick="Muted(this)">靜音</button>
</body>
</html>
顯示(html)與功能實現(xiàn)(js)分離，由外部導(dǎo)入
ControlBar.js
//使用腳本檢測瀏覽器的標(biāo)簽支持情況
var support = !!document.createElement("audio").canPlayType;
if (!support) {
alert("你的瀏覽器不支持本視頻播放");
}
// 定義全局的視頻對象
var e1 = null;
window.addEventListener("load", function() {
e1 = document.getElementById("myPlayer");
});
/*前進(jìn)：一分鐘 */
function Next() {
e1.currentTime+=10; //設(shè)置屬性currentTime,快進(jìn)10s
}
/*后退：一分鐘 */
function Prev() {
e1.currentTime-=10; //設(shè)置屬性currentTime,后退10s
}
/*播放/暫停*/
function Play(e) {
if(e1.paused){
e1.play();
document.getElementById("btn1").innerHTML="暫停"
}else{
e1.pause();
document.getElementById("btn1").innerHTML="播放"
}
}
/*慢進(jìn)：小于等于1時，每次都只減慢0.2的速率；大于1時，每次減1 */
function Slow(){
if(e1.playbackRate<=1){
e1.playbackRate-=0.2;
}else{
e1.playbackRate-=1;
}
document.getElementById("rate").innerHTML=fps2fps(e1.playbackRate);
}
/*慢進(jìn)：小于等于1時，每次都只減慢0.2的速率；大于1時，每次減1 */
function Fast(){
if(e1.playbackRate<1){
e1.playbackRate+=0.2;
}else{
e1.playbackRate+=1;
}
document.getElementById("rate").innerHTML=fps2fps(e1.playbackRate);
}
function fps2fps(fps){
if(fps<1){
return fps.toFixed(1);
}else{
return fps;
}
}
/*靜音*/
function Muted(e){
if(e1.muted){
e1.muted=false;
e.innerHRML="X";
document.getElementById("volume").value=e1.volume;
}else{
e1.muted=true;
e.innerHRML="x";
document.getElementById("volume").value=0;
}
}
/*調(diào)整音量*/
function Volume(e){
if(e1.muted==true){
e1.muted=false;
}
e1.volume=e.value;
}
/* 進(jìn)度信息：控制進(jìn)度條，并顯示進(jìn)度時間*/
function Progress(){
var p1=document.getElementById("progress");
p1.style.width=(e1.currentTime/e1.duration)*720+"px";
document.getElementById("info").innerHTML=s2time(e1.currentTime)+"/"+s2time(e1.duration);
}
function s2time(s){
var m=parseFloat(s/60).toFixed(0);
s=parseFloat(s%60).toFixed(0);
return (m<10? "0"+m:m)+":"+(s<10?"0"+s:s);
}
/* 網(wǎng)頁加載完畢后，把進(jìn)度處理函數(shù)添加至視頻對象的timeupdate事件中*/
window.addEventListener("load",function(){
e1.addEventListener("timeupdate",Progress);
});
/*給window.onload事件添加進(jìn)度處理函數(shù)*/
window.addEventListener("load",Progress);
實現(xiàn)的功能：播放，暫停，快進(jìn)，慢進(jìn)，前進(jìn)，后退，音量控制，進(jìn)度條和時間顯示。由此可見通過Audio或Video的屬性和方法可以實現(xiàn)更復(fù)雜的功能。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
