整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

.NET程序浏览器集成组件DotNetBrowser v2.7上线!引用Chromium 91

otNetBrowser是一个.NET库,允许将基于Chromium的WPF和WinForms组件嵌入到.NET应用程序中,以显示使用HTML5,CSS3,JavaScript,Silverlight等构建的现代网页。

DotNetBrowser迎来v2.5版本更新,在此更新中,带来了更新的 Chromium 引擎和具有新功能的 API,为了方便大家尽可能顺利过度新版本,我们特意准备了本指南将帮助您了解新版本都要哪些新增与改动。还没有使用过可以点击下方链接下载哦~

DotNetBrowser官方最新版免费下载试用,历史版本下载,在线文档和帮助文件下载-慧都网

新功能

引用Chromium 91

Chromium 引擎已更新到版本 91.0.4472.114。

此 Chromium 版本包含几个重要的安全修复程序,因此我们建议您升级到此版本。

结构

DotNetBrowser API 已使用 Chromium 配置文件进行了扩展。现在,该架构具有以下结构:

每个引擎都有一个默认值,IProfile您可以通过以下方式访问:

IProfile defaultProfile = engine.Profiles.Default;

要创建新的常规或隐身个人资料,请使用以下 API:

IProfile profile = engine.Profiles.Create("MyProfile");
IProfile incognitoProfile = engine.Profiles.Create("MyIncognitoProfile", 
                                                   ProfileType.Incognito);

每个IBrowser实例都有一个配置文件。要IBrowser为特定配置文件创建实例,请使用以下方法:

IProfile profile = engine.Profiles.Create("MyProfile");
IBrowser browser = profile.CreateBrowser();

为了向后兼容,我们没有改变IEngine界面。它只是将其调用委托给默认配置文件。例如:

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使用用户数据目录配置 ,则所有创建的配置文件将在应用程序重新启动后恢复。

查看页面源代码

现在您可以像在谷歌浏览器中一样查看加载的网页或框架的来源:

browser.MainFrame?.ViewSource();

上面的代码告诉 Chromium 创建并打开一个带有主框架的 HTML 源代码的弹出窗口。它将是一个具有以下外观的常规弹出窗口:

可以通过浏览器设置强制首选配色方案:

browser.Settings.PreferredColorScheme = PreferredColorScheme.Dark; //forces dark mode
browser.Settings.PreferredColorScheme = PreferredColorScheme.Light; //forces light mode

默认背景色

当 Chromium 不知道网页的背景颜色,或者根本没有指定颜色时,它使用白色。在此版本中,我们使用新功能扩展了 API,允许您配置 Chromium 应使用的默认背景颜色,而不是这种情况下的默认白色。

以下代码演示了如何为 about:blank 页面设置所需的背景颜色:

Color purple = new Color(0.6f, 0.3f, 0.6f);
browser.Settings.DefaultBackgroundColor = purple;

画中画

现在可以在与其他网站或应用程序交互时在浮动窗口(在其他窗口之上)观看视频。

改进

  • 现在可以通过IJsPromise类型使用 JavaScript 承诺。
  • IFrame.Text属性已添加。它允许以纯文本形式获取框架的内容。
  • WPF 应用程序中 WinForms BrowserView 控件的焦点行为已得到改进。
  • 导航到不同域时,SetWindowDisplayAffinity()与WDA_MONITOR参数一起使用的WinAPI 函数不再导致 Chromium 崩溃。

, 兼容性是什么?

同样的HTML+CSS+JS,但是表现出的外部特征还是不能达到统一,存在瑕疵。同样的代码,有的浏览器效果显示"正常",有的显示"不正常"。就像同样的去吃大排档,就有的人吃完一点事没有,而有的人就会拉肚子。

2,为什么浏览器会存在兼容问题?

不同厂家开发所用的核心架构不同和代码很难重合,实现方式也有差异,所以呈现在页面上的样式也就会有一部分的差异,看着会有些不同。

3,处理兼容问题的思路:

1):要不要去做?(看做的产品的影响程度,受众面,是主打效果还是基本功能)

2):做到什么程度?(想要那些浏览器支持,就给那些浏览器做兼容)

3):怎么做?(根据兼容问题,来选择那些框架,和那些兼容工具。)

4,渐进增强和优雅降级

1):渐进增强:现针对低版本浏览器进行基本功能和页面,再针对高版本的浏览器进行效果,交互,和用户体验做出改进。

2):优雅降级:一开始就先针对于高版本浏览器进行完整的页面展示(效果,交互,功能,用户体验),然后在对低版本浏览器进行兼容

5,常见的兼容问题

1,高度塌陷

浮动元素的父元素自适应(父元素不写高度时,子元素写了浮动后),父元素会发生高度塌陷

解决方案

1) :给父元素添加声明:overflow:hidden;

2) :字啊浮动元素下方添加空div。并给该元素声明,clera:both;height:0;overflow:hidden;

2, 最小高度自适应(因为min-heigh本身就是一个不兼容的css属性,所以各个浏览器不兼容

1) :min-height:value;-height:value

2) :min-height:value;heigth:auto!Important;height:value

3,按钮元素大小不一样

1) :给按钮统一大小

2) :外边套一个标签,在标签与按钮样式把input边框和背景去掉

4,图片默认有间距(几个img标签放在一起的时候,有些浏览器会有默认的间距

1);给img添加float属性

5,ie6图片下方会产生间隙

1):为图片设置display;block;

6,ie8以下的透明

1):filler:alpha(取值范围0-100)例如:filter:alpha(opacity=60)

7,空div的默认行高(清浮动时会使用一个空的div,在大部分浏览器没问题,在ie6中即使div是空的也会有默认行高

1)设置其高度为0,并设置overflow:hidden。

6,一些兼容性相关的工具和库

1):用于解决IE9以下版本浏览器对HTML5新增标签不识别,并导致CSS不起作用的问题。

2):Respond.js:是一个快速、轻量的 polyfill,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性,实现响应式网页设计

3):CSS Reset:重置浏览器的css默认属性;浏览器的品种不一样,那么对默认样式的解释不一样,通过reset可以达到显示一致的效果。

4):normalize.css:是一个可以定制的CSS文件,它让不同的浏览器在渲染网页元素的时候形式更统一。

5)Modernizr.js:传统浏览器目前不会被完全取代,令你难以将最新的 CSS3 或 HTML5 功能嵌入你的网站。 Modernizr 正是为解决这一难题应运而生,它也可以通过加载定制的脚本来模拟老版本浏览器不支持的功能。

篇文章主要介绍了HTML5实现音频和视频嵌入的方法的相关资料,原生的支持音频和视频,为HTML5注入了巨大的发展潜力,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

简介

HTML5未出来之前,在线的音频和视频都是借助Flash或者第三方工具实现的,现在HTML5也支持了这方面的功能。在一个支持HTML5的浏览器中,不需要安装任何插件就能播放音频和视频。原生的支持音频和视频,为HTML5注入了巨大的发展潜力。

html实现音频嵌入(传统方式):这种方式虽然可以实现,但是要浏览器支持Flash而且并不能实现控制,所以要实现起来很麻烦。

<object height="200" width="200" data="2_1.swf" >

</object>

<embed src="2_1.mp4" type="">

那么也就是说HTML5存在一个很大的问题就是兼容性。音频

HTML5支持的音频格式:



视频

视频格式:



由上可知,HTML5貌似支持的格式有点少哈,所以当你发现用HTML5放置音频和视频不显示时,应该就是格式不支持的问题。注: MP4有3种编码,mpg4(xdiv),,mpg4(xvid),avc(h264), 只有h264才是公认的MP4标准编码(在这也是被坑了,其他格式的只有声音没有图像。)遇到这种问题,就用视频格式转换器,转换一下格式就OK啦。

音频实现起来很简单:这里工具条使用了浏览器默认的工具条。

?

1

2

3

<audio src="htmls/1.mp3" controls="controls" loop="loop" preload="auto" >

你的浏览器不支持video元素

</audio>



视频虽然也可以使用浏览器默认的,但无法实现私人订制,所以从学技术的角度讲,还是要学习一下自己做工具实现功能(audio也可参照此方法)。

audioVideo.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>网页放置视频</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才是公认的MP4标准编码 -->

</video>

<div id="progress"></div>

<!-- 音量控制 -->

<input id="volume" type="range" min="0" max="1" step="0.1" onchange="Volume(this)">

<!-- 速率和时间进度的信息 -->

<span id="rate">1</span>fps <span id="info"></span>

<button onclick="Play(this)" id="btn1">播放</button>

<button onclick="Fast()">快进</button>

<button onclick="Slow()">慢进</button>

<button onclick="Prev()">后退</button>

<button onclick="Next()">前进</button>

<button onclick="Muted(this)">静音</button>

</body>

</html>

显示(html)与功能实现(js)分离,由外部导入

ControlBar.js

//使用脚本检测浏览器的标签支持情况

var support = !!document.createElement("audio").canPlayType;

if (!support) {

alert("你的浏览器不支持本视频播放");

}

// 定义全局的视频对象

var e1 = null;

window.addEventListener("load", function() {

e1 = document.getElementById("myPlayer");

});

/*前进:一分钟 */

function Next() {

e1.currentTime+=10; //设置属性currentTime,快进10s

}

/*后退:一分钟 */

function Prev() {

e1.currentTime-=10; //设置属性currentTime,后退10s

}

/*播放/暂停*/

function Play(e) {

if(e1.paused){

e1.play();

document.getElementById("btn1").innerHTML="暂停"

}else{

e1.pause();

document.getElementById("btn1").innerHTML="播放"

}

}

/*慢进:小于等于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);

}

/*慢进:小于等于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;

}

}

/*调整音量*/

function Volume(e){

if(e1.muted==true){

e1.muted=false;

}

e1.volume=e.value;

}

/* 进度信息:控制进度条,并显示进度时间*/

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);

}

/* 网页加载完毕后,把进度处理函数添加至视频对象的timeupdate事件中*/

window.addEventListener("load",function(){

e1.addEventListener("timeupdate",Progress);

});

/*给window.onload事件添加进度处理函数*/

window.addEventListener("load",Progress);

实现的功能:播放,暂停,快进,慢进,前进,后退,音量控制,进度条和时间显示。由此可见通过Audio或Video的属性和方法可以实现更复杂的功能。