可定制的HTML5视频初始设计
Content
创建日期
10 October 2011
要求
用户级别
全部
范例文件
本文展示给你如何使用这个可定制的初始设计来在你的网站中嵌入HTML5视频。阅读这篇概述来学习这个模板所使用的HTML5视频播放部件，预览并下载这个模板以及相关的文件和其它有用的东西，接着观看一部短片来学习如何定制这个模板。
概述：使用HTML5视频
HTML5最让人期待的功能就是它对视频的支持。视频标签使你可以为你的视频设定各种各样的参数，使每个浏览器可以其自身的方式自由处理视频。有些浏览器可能使用操作系统自带的视频支持，许多平板电脑多采用此方式，或者浏览器也可以自带的播放控制来播放视频。
另一种选择则是使用一个跨浏览器、跨设备的统一的播放器，使用图片和CSS来更改其外观设计，并以一种基于Flash的备用方案来为老式的浏览器播放视频提供额外的支持。幸运的是，Adobe提供了这样一个播放器，并且在Dreamweaver中是可用的，以一个部件的方式。如果要调用这个部件，打开 Adobe Widget Browser 来搜索 HTML5 Video Player.
基于Kaltura播放器，HTML5视频播放器部件向你的网页中添加并配置了必要的HTML、CSS和JavaScript文件，为你提供一个最先进的可以在所有符合标准的设备上工作的视频播放器，同时也支持旧的、不太符合标准的浏览器。
本模板提供了一个CSS override文件和一个已切片的Photoshop源模板来帮助你快速的定制你的播放器设计。既然这个模板对Kaltura播放器所用的某些HTML 标记进行了修改，那么你肯定还可以对它做更多的定制。但是，一大障碍是如何查阅由JavaScript生成的HTML标记。这就是Dreamweaver Live Code功能大显身手的地方了。
当你运行一个含有Kaltura播放器的网页，或者任何带有JavaScript生成的HTML代码的网页时，Dreamweaver为你提供了一种可以 查看由JavaScript生成的代码的方法。这个称为实时代码(Live Code)的强大功能可允许你查看(当JavaScript控制并)修改后的DOM（document object model）。有了这个信息就能够告知你创建的新CSS规则去摆放和修改新的HTML元素。
观看视频：使用定制模板
预览和下载
下载本模板相关的HTML、CSS和Photoshop源文件。
More Like This
- Turning a design into HTML and CSS using the Fireworks to Dreamweaver workflow – Part 1: Exporting the design
- Creating a multiscreen theme for WordPress using Dreamweaver CS5.5
- Getting started with jQuery Mobile
- 为web编写脚本-第一部分：JavaScript简介
- Customizable starter design for multiscreen development
- 针对jQuery Mobile的可自定义启动程序设计
- Excerpt: Bring Your Web Design to Life
- Understanding Spry basics
- 了解HTML5 语义--第一部分
- 使用Modernizr 检测HTML5和CSS3浏览器支持功能
Tutorials and samples |
Tutorials
- Understanding HTML5 semantics: Changed and absent elements
- Mobile app with PhoneGap: Submitting to the Apple App Store
- PhoneGap and Dreamweaver: Releasing on iOS
- Mobile app with PhoneGap: Creating a release build for Android
Dreamweaver user forum |
More |
| 04/23/2012 | Resolution/Compatibility/liquid layout |
|---|---|
| 04/20/2012 | using local/testing server with cs5 inserting images look fine in the split screen but do not show |
| 04/18/2012 | Ap Div help |
| 04/23/2012 | Updating |
Dreamweaver Cookbook |
More |