返回上一页
客服QQ
客服QQ
一切从沟通开始……
跟KingDZ学HTML5之一：HTML5入门
作者：睿美印象网站建设工作室 发布日期：2012-11-23
哈哈，最进打算写一些关于HTML5的文章，写的不好，请见谅，开始吧。
我想来看 我教程的 童鞋 应该对 HTML5有一定的了解了吧，所以我就不罗嗦的讲，HTML5的“昨天”，“今天”，“明天”了
呵呵，首先，我们用任意的 文本编辑器，新建一个网页 我用的是 NotePad++ 你要是懒得找呢，用记事本也没有关系的。哦~~~
目前浏览器对 HTML5的支持情况也不相同。建议大家用 Chrome、Firefox 微软的 IE9 支持不太好，所以大家还是等一段时间在测试。
HTML5 支持视频格式 video 元素
video 目前支持的格式有
ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
哈哈，上面的这几个文件，偶就看到过第二个 那个不就是 MP4格式的文件吗？哦了，去网上下载一个MP4格式的文件，开始我们的
HTML5之路吧。
对了 这几个文件的支持情况如下
video格式 IE FF Chrome Opera Safari
Ogg 不支持 版本3.5以上 版本5.0以上 版本10.5以上 不支持
MPEG 4 版本9.0以上 不支持 版本5.0以上 不支持 版本3.0以上
WebM 不支持 版本4.0以上 版本6.0以上 版本10.6以上 不支持
好了，我们继续吧，下面我就显示一个 视频，在网页中看看。
XML/HTML Code复制内容到剪贴板
<!DOCTYPE HTML>
<html>
<body>
<video src=C: ext1.mp4 width="320" height="240" controls="controls" autoplay="true"></video>
<body>
</html>
好了，第一个页面结束了，我下面一点一点的上面的代码，并且给大家展示效果图。
首先是 controls=”controls” 这个代表的是 播放、暂停和音量控件。
效果呢就是，我用红色的框框圈住的地方。
当然，你设置成 false 或者，没有这个属性，那么他就没有了
然后是
autoplay 他有下面的两个 值
true | false
如果是 true，则视频在就绪后马上播放。否侧你还要单击之后才可以播放。
当然，还有我们上面说到的那 Width Height Src 这三个属性喽，哈哈，HTML5页面的页面可以播放视频啦。
loop=“loop” 是否循环播放。
当然，为了兼容性，你可以写成下面的
XML/HTML Code复制内容到剪贴板
<! DOCTYPE HTML>
<html>
<body>
<video width="320" height="240" controls="controls">
<source src=C: ext1.mp4 type="video/mp4">
您的浏览器不支持这个标签
</video>
<body>
</html>
效果也是正确的
HTML5 规定了一种通过 audio 元素来包含音频的标准方法。这个的用法和 上面那个 video没有区别，只不过一个是 视频，一个是音频罢了
音频格式 IE9 FF3.5 Opera10.5 Chrome3.0 Safari3.0
Ogg Vorbis 不支持 支持 支持 支持 不支持
MP3 支持 不支持 不支持 支持 支持
Wav 不支持 支持 支持 不支持 支持
<!DOCTYPE HTML>
<html>
<body>
<audio src="C: ext2.mp3" width="320" height="240" autoplay="true" controls="controls">
您的浏览器不支持这个标签
</audio>
<body>
</html>
转载请注明：睿美印象网站建设工作室www.ruimeiyx.com
我想来看 我教程的 童鞋 应该对 HTML5有一定的了解了吧，所以我就不罗嗦的讲，HTML5的“昨天”，“今天”，“明天”了
呵呵，首先，我们用任意的 文本编辑器，新建一个网页 我用的是 NotePad++ 你要是懒得找呢，用记事本也没有关系的。哦~~~
目前浏览器对 HTML5的支持情况也不相同。建议大家用 Chrome、Firefox 微软的 IE9 支持不太好，所以大家还是等一段时间在测试。
HTML5 支持视频格式 video 元素
video 目前支持的格式有
ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
哈哈，上面的这几个文件，偶就看到过第二个 那个不就是 MP4格式的文件吗？哦了，去网上下载一个MP4格式的文件，开始我们的
HTML5之路吧。
对了 这几个文件的支持情况如下
video格式 IE FF Chrome Opera Safari
Ogg 不支持 版本3.5以上 版本5.0以上 版本10.5以上 不支持
MPEG 4 版本9.0以上 不支持 版本5.0以上 不支持 版本3.0以上
WebM 不支持 版本4.0以上 版本6.0以上 版本10.6以上 不支持
好了，我们继续吧，下面我就显示一个 视频，在网页中看看。
XML/HTML Code复制内容到剪贴板
<!DOCTYPE HTML>
<html>
<body>
<video src=C: ext1.mp4 width="320" height="240" controls="controls" autoplay="true"></video>
<body>
</html>
好了，第一个页面结束了，我下面一点一点的上面的代码，并且给大家展示效果图。
首先是 controls=”controls” 这个代表的是 播放、暂停和音量控件。
效果呢就是，我用红色的框框圈住的地方。
当然，你设置成 false 或者，没有这个属性，那么他就没有了
然后是
autoplay 他有下面的两个 值
true | false
如果是 true，则视频在就绪后马上播放。否侧你还要单击之后才可以播放。
当然，还有我们上面说到的那 Width Height Src 这三个属性喽，哈哈，HTML5页面的页面可以播放视频啦。
loop=“loop” 是否循环播放。
当然，为了兼容性，你可以写成下面的
XML/HTML Code复制内容到剪贴板
<! DOCTYPE HTML>
<html>
<body>
<video width="320" height="240" controls="controls">
<source src=C: ext1.mp4 type="video/mp4">
您的浏览器不支持这个标签
</video>
<body>
</html>
效果也是正确的
HTML5 规定了一种通过 audio 元素来包含音频的标准方法。这个的用法和 上面那个 video没有区别，只不过一个是 视频，一个是音频罢了
音频格式 IE9 FF3.5 Opera10.5 Chrome3.0 Safari3.0
Ogg Vorbis 不支持 支持 支持 支持 不支持
MP3 支持 不支持 不支持 支持 支持
Wav 不支持 支持 支持 不支持 支持
<!DOCTYPE HTML>
<html>
<body>
<audio src="C: ext2.mp3" width="320" height="240" autoplay="true" controls="controls">
您的浏览器不支持这个标签
</audio>
<body>
</html>
转载请注明：睿美印象网站建设工作室www.ruimeiyx.com
已有 0 条评论
暂无评论
- HTML5移动应用开发第4章：Web Workers来加速您的移动Web应用
- 3、【视频】如何清除列表前的圆点
- 《精通HTML5编程》第九章：Web Sotrage API
- html5 Web开发：防止浏览器假死的方法
- 跟KingDZ学HTML5之九：新的input类型1
- 5、【视频】超链接样式的设置
- 10个为设计者准备的HTML5在线工具
- HTML5版3D实验三：JavaScript玩转3D粒子系统
- 哪些情况下需要CSS隐藏文字？
- IE6弹出层盖不住下拉菜单的解决方案
- css初学者：css代码书写顺序
- 针对webkit的HTML, CSS和Javascript
- HTML5制作基于模拟现实物理效果的游戏
- 8月28日前企业网站建设仅需888元，终身免费维护！
- 再谈IE6下png不透明问题
- HTML5漫谈（4）--HTML5应用平台:PhoneGAP
版权所有：睿美印象网络网站建设工作室 2010-2012 服务热线：15636322282（网站建设工作室）
