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;
画中画
现在可以在与其他网站或应用程序交互时在浮动窗口(在其他窗口之上)观看视频。
同样的HTML+CSS+JS,但是表现出的外部特征还是不能达到统一,存在瑕疵。同样的代码,有的浏览器效果显示"正常",有的显示"不正常"。就像同样的去吃大排档,就有的人吃完一点事没有,而有的人就会拉肚子。
不同厂家开发所用的核心架构不同和代码很难重合,实现方式也有差异,所以呈现在页面上的样式也就会有一部分的差异,看着会有些不同。
1):要不要去做?(看做的产品的影响程度,受众面,是主打效果还是基本功能)
2):做到什么程度?(想要那些浏览器支持,就给那些浏览器做兼容)
3):怎么做?(根据兼容问题,来选择那些框架,和那些兼容工具。)
4,渐进增强和优雅降级
1):渐进增强:现针对低版本浏览器进行基本功能和页面,再针对高版本的浏览器进行效果,交互,和用户体验做出改进。
2):优雅降级:一开始就先针对于高版本浏览器进行完整的页面展示(效果,交互,功能,用户体验),然后在对低版本浏览器进行兼容
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。
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的属性和方法可以实现更复杂的功能。
*请认真填写需求信息,我们会在24小时内与您取得联系。