Bob SpAce

Be myself!Do myself!

Category: Html5

关于firefox对font awesome本地环境无法加载问题

问题描述

昨天尝试使用font awesome加载字体图标,直接在本地引入相关文件,测试发现图标在chrome和IE环境支持,但是在firefox上怎么都显示不出来。

解决方法

通过测试发现通过http://引用相关css文件,在本地显示正常,而使用相对路径:../css/fontawesome.css方式引用出现问题。

通过查询发现firefox在3.0版本以后对本地文件加载有限制,如果需要本地使用需要将相关安全策略去掉:

步骤:1、输入about:config

2、搜索“security.fileuri.strict_origin_policy”

3、双击,将这项置为false即可

除了去除安全策略,还可以通过启动服务,将文件部署到服务器上,通过http://访问。

总结

Firefox对于本地文件加载的安全设置策略导致不能再本地环境下正常显示font awesome图标;

Firefox的安全策略不支持file:///访问方式;

由于是为了将图标添加到系统服务中,因此直接使用即可。

如何利用h5将视频设置为背景

我们常常有着将视频作为网页背景的需要,但是在设置时也经常差强人意,今天设置了一下,可以基本达到要求了,可能有些小细节做的不是太好,希望指出来,一起进步

 

第一步:准备工作

工欲善其事必先利其器,我们首先需要准备一个视频,我准备了一个这样的视频,如图:

是不是很美,当然了,,没我美哈

 

第二步:引入视频

这里我们需要用到了video/标签,然后在source里面写视频的路径,autoplay用来使其自动播放,muted用来使其静音,loop为循环播放,依照个人意愿愿意加就加,不加拉倒哈

1
2
3
<video id="v1" autoplay muted loop style="width: 100%">
    <source  src="mp4/loading.mp4">
</video>

 

第三步:调节视频,使其适应屏幕

以上的步骤还不能满足我们的需求,这个时候我们会发现有滚动条,而且视频会遮挡我们要显示的内容,可这远远不是我们想要的结果啊,不怕,有我呢

1
2
3
4
5
6
7
8
9
10
11
12
13
video{
          position: fixed;
          right:0;
          bottom: 0;
          min-width: 100%;
          min-height: 100%;
          width: auto;
          height: auto;
          z-index: -9999;
          /*灰色调*/
          /*-webkit-filter:grayscale(100%)*/
      }

这样就OK了,-webkit-filter:grayscale(100%)为调节会色调的,同样适用于img

 

第四步:视频播放速度

可以利用video的playbackRate属性来控制video的播放速度,如果要让背景视频以慢速播放的话可以加上下面的javascript

1
2
3
4
<script>
    var video= document.getElementById('v1');
    video.playbackRate = 0.5;
</script>

好嘞,快去设置你的酷炫背景吧

分享国外35个非常实用的HTML5教程

随着现代主流浏览器对HTML5的不断支持和完善,越来越多的开发者开始使用HTML5来制作各种功能强大的应用程序,和以前的HTML版本不 同,HTML5带给了网页设计师和开发人员更多幻想新事物的能力。为了方便大家更好地学习HTML5 ,本文就特别分享了国外一些非常实用的HTML5教程,希望能有所帮助。

Blowing up HTML5 video and mapping it into 3D space

Blowing up HTML5 video and mapping it into 3D space

Making a Beautiful HTML5 Portfolio

Making a Beautiful HTML5 Portfolio

HTML5 File Uploads with jQuery

HTML5 File Uploads with jQuery

Agent 008 Ball

Agent 008 Ball

An In Depth Analysis of HTML5 Multimedia and Accessibility

An In Depth Analysis of HTML5 Multimedia and Accessibility

Code a Vibrant Professional Web Design with HTML5/CSS3

Code a Vibrant Professional Web Design with HTML5/CSS3

A Drag and Drop Planning Board with HTML5

A Drag and Drop Planning Board with HTML5

Read More

已经有许多文章是关于HTML5的了,例如“HTML5有什么期待?”和“HTML5会如何改变网络”之类的,但是对于Web开发人员来说,最主要需要知道的是:我现在可以用上HTML5来做些什么,我怎么开始使用它?好消息是现在已经有不少的HTML5里的东西可以使用了。但是,开始你就必须要明白一件事情,你需要知道你的受众如何,否则的话你就不该使用HTML5。假如你的站点的访问大部分人都是在使用IE6,那么你完全没有任何理由使用HTML5。另一方面,如果你站点的访问者都是使用手机浏览器,如iPhone和iPad,那么你还在等什么呢?马上就可以开始动手了!等等,这里有一些准则,看完再动手不迟。

你现在可以使用哪些HTML5特性?

虽然HTML5标准现在仍然是个草案,在标准化组织手里依然还在商讨,但是重要的部分已经被许多现代的浏览器实现了。Apple Safari, Google Chrome, Mozilla Firefox, Opera和Microsoft IE9都已经很好的支持了HTML5的部分特性。

先来看看各浏览器在HTML5TEST网站上的得分如何:

* Apple Safari 5.0: 208

* Google Chrome 5.03: 197

* Microsoft IE7: 12

* Microsoft IE8: 27

* Mozilla Firefox 3.66: 139

* Opera 10.6: 159

看起来很明显,非IE核心的主流浏览器大部分都对HTML5支持良好,它们可以使“使用了HTML5草案的网站”工作得很好。

回到开始,你现在就可以使用HTML5的doctype了,没有理由不使用,你甚至可以在整个网站里进行查询和替换:

变为:

下面这部分代码看起来更简洁和直接,不是吗?如果浏览器用一个标准兼容的方式来渲染你的网页,那么他们现在仍然会这么做。

说说视频吧。许多关于HTML5的出版物都会提及到目前的竞争者,一共四个:Flash, H.264, OGG和WebM。所有这些在未来都有可能成为一个标准格式,而且没有一个可以在所有平台所有浏览器上正确播放,很悲哀吧,看起来,浏览器的赞助商们在短 时间内还没有为这个特性准备一个公共的格式。

所以,显而易见的是,Video标签现在还没有到可以应用的阶段。但是等下,人们应该期待HTML5的视频标签是与格式无关的。事实上,因为视频可 以包含多个Source标签,它也必须得这样工作。如果你的浏览器不支持第一个选项,那么就会去尝试第二个,再第三个,四个,五个……

处理这样的情况的HTML是一个开源项目,支持基于网络的视频,不使用任何脚本和浏览器嗅探,可以在这里找到。

从语义上讲,HTML5的一个大的改变就是那些语义明确化的标签。可以看到的改变是,目前你的站点上充满了类似于这样的代码:

而在HTML5中,你可以这样表示:

Powered by WordPress & Theme by Anders Norén