基于 html5 的跨平台体育视频网站开发

《基于 html5 的跨平台体育视频网站开发》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、基于HTML5的跨平台体育视频网站开发第一章绪论1.1研究背景随着互联网和网页技术的发展，网页中的内容变得更加丰富，以视频观看为核心的视频网站逐渐走进人们的生活。随着视频网站的快速发展，网络视频已经成为了互联网应用的一大热门，很多互联网公司开始涉足网络视频相关行业。同时，由于人们对体育运动的热爱，在电视或者互联网上观看体育赛事已经成为了大家的娱乐方式。为了赢得更多观众，一些大型的体育比赛联盟开始推出自己的体育视频网站，这些体育视频网站为体育爱好者提供联盟中相关的比赛视频和服务。在体育视频网站发展初期，页面基本上是采用HTML4.0，甚至更旧的HTML版本去开发。用这些

2、技术开发的功能略显单薄，多数浏览器需要安装繁琐的插件来扩展功能，但是这样给浏览器增加了不少的负担。同时，网站中的视频播放器大多数是Flash播放器。用Flash播放器观看视频前需要事先安装Flash的插件，而且Flash插件更新很频繁，问题很多。给用户带来了诸多不便，用户在移动端观看视频的时候体验度很差。早在2007年，L标准。2014年10月，L5标准。HTML5旨在取代HTML4.0标准。HTML5强大的API不再需要浏览器安装繁琐的插件。同时利用HTML5提供的视频<video>标签，可以自动在浏览器中生成视频播放器，在移动端用户不再需要频繁安装和更

3、新Flash插件。另一方面，随着移动设备的普及，用移动设备去访问原本是在PC端的视频网页时，整个网页内容会缩在一个很小的屏幕中，不方便查看和操作。利用响应式设计去自适应调整网页在移动端的布局是成为提升用户体验度进而增加移动用户的必然选择。......1.2国内外发展状况2008年1月，L5的第一份草案。2012年12月，L5规范已经定稿。2014年10月，L5的标准。在标准发布之前，国外的主流浏览器已经支持HTML5，如：Firefox、Chrome、Opera、Safari4+、InterExplorer9+。苹果公司在2010年宣布将全部采用HTML5来代替Fla

4、sh。Google公司对HTML5的支持力度也相当大，通过对Chrome浏览器多次更新，对HTML5支持程度已经超越了Safari浏览器。2015年1月，Google宣布将公司旗下网站YouTube的默认格式全部改成HTML5格式。2月份，Google又宣布将公司广告全部改为HTML5格式。HTML5刚刚传入国内的时候，还没有被国内的开发人员普遍地接受，但是后来有许多网站和应用准备全方位支持HTML5，比如腾讯浏览器、腾讯e>、<mark>、<aside>、<hgroup>等标签，各个标签的功能如表2-1所示：......2.

5、2CSS3相关技术介绍CSS即层叠样式表。CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS3是CSS最新推出的版本，是对之前CSS版本的扩充。由于CSS3是完全向后兼容，那些不支持CSS3的浏览器(例如低版本的IE浏览器)不会加载与自身不相匹配的CSS3文件，系统会自动过滤掉不支持的CSS3语句，所以不会改变低版本浏览器中原有的样式。CSS3抛弃了CSS2中很多的东西，CSS3将内容拆分为模块，比如：选择器模块，盒模型，背景和边

6、框，文字特效模块，2D3D转换模块，动画模块，多列布局模块，用户界面模块。在选择器上，增加了许多伪类，如：p:first-of-type等等。在盒模型上和CSS2没有太大差异，分为外边距，边框，内边距和内容区，但是增加了很多边框样式。在文字特效上，CSS3增加了文本阴影text-shadoin和max两种重要的属性，min表示小于或等于某一个设备尺寸，max表示大于或等于某一个设备尺寸。MediaQuery可以被用在CSS3中的media上，也可以被用在HTML和XML中。也就是说HTML页面上的代码不变，在CSS文件中预定义几套给不同设备用的样式代码。用户访问网页的

7、时候，服务器端会接收到客户端的设备尺寸信息，然后在服务器中处理，从CSS代码中选择符合设备尺寸的那一套代码应用在HTML上，最后返回给客户端，这样的话用户就会看到完全不同于PC端的页面。这样的做法不涉及页面的结构，只需要引入一个CSS文件，大大地节约了项目的成本，提高了页面的适用范围。而不同尺寸的CSS文件的引入有两种方式，一种是直接在CSS文件中定义好屏幕的尺寸，另一种是则是在HTML文档的<link>标签中定义好屏幕尺寸和CSS文件。.......第三章系统分析....173.1项目概况....173.2系统总体目标......173