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

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

1、基于HTML5的跨平台体育视频网站开发学校代号：10255学号：2131624基于HTML5的跨平台体育视频网站开发DEVELOPMENTOFCROSS-PLATFORMSPORTSVIDEOWEBSITEBASEDONHTML5专业：软件工程姓名：张永生校内导师：丁祥武校外导师：毛伟明答辩日期：2015年5月21日东华大学计算机科学与技术学院SchoolofComputerScienceandTechnologyDonghuaUniversityI基于HTML5的跨平台体育视频网站开发基于HTML5的跨平台体育视频网站开发摘要在

2、以前，人们想要观看体育赛事，只能通过电视直播。现在随着互联网的发展和人们对体育比赛愈加关注，全球各大体育赛事的联盟推出了自己的体育网站,人们可以通过这些视频网站去观看体育比赛直播或者体育视频。起初，这些视频网站一般采用Flash播放器来播放视频，但是在移动设备上Flash视频播放器会出现难以安装和更新的问题。为了能够适应移动设备，网站开发人员不得不选择其他可以代替Flash的视频播放器。HTML5的出现很好的解决了这一难题。本文在PC端会采用传统的视频模式，利用Flex组件集成工具集实现视频播放器，在移动端将会采用HTML5实现视

3、频播放器。移动设备的普及也促进了响应式设计的发展，响应式设计方法可以让一套网页设计支持各种主流的设备，让网站的内容在各种浏览设备上，以适合自身的布局、结构、元素规格样式显示，使得各种设备的用户都有良好的用户体验。本文将针对美国常春藤高校联盟，开发联盟体育赛事的官方视频网站。考虑到用户会通过不同的终端设备访问网站，为了能让不同设备的用户都有很好的体验，同时减少开发成本，网站将会采用响应式的设计方法，适应众多终端设备。论文首先针对课题的研究背景和国内外发展情况做了一些调查与分析。在此基础上，对课题中的所用到的相关技术进行了介绍，然后对

4、项目网站进行全面的需求分析。接着对项目网站进行概要设计，详细设计，系统实现与测试。开发的系统达到了实际可用的效果。关键词：HTML5，视频网站，响应式设计，跨平台。II基于HTML5的跨平台体育视频网站开发DEVELOPMENTOFCROSSP-LATFORMSPORTSVIDEOWEBSITEBASEDONHTML5ABSTRACTInthepast，peoplewatchsportseventstelevisingontelevision.WiththedevelopmentoftheInternet，sportsevents

5、alliancelaunchedtheirownsportswebsite.Peoplecanwatchsportsgamesvideothroughthewebsites.ThetraditionalvideoplayerisFlash，butitisdifficulttoinstallandupdateFlashonamobiledevice.Inordertoadapttomobiledevices，webdevelopershavetochooseotherplayerwhichcanreplacetheFlashvide

6、oplayer.OnthePCside，wewillusetheflexvideoplayercomponents，onthemobilewewilluseHTML5videoplayer.Thepopularityofmobiledevicesalsomotivatedthedevelopmentoftheresponsivedesign.Responsiveedesigningmethodcanmakeawebpagetosupportavarietyofmainstreamequipment，makeyoursitehasa

7、differentlayout，structure，elementspecificationstyle，presentthesamecontentindifferentformats.Thereforeitmakesallkindsofuserstohaveagooduserexperience.ThisarticlewillfocusontheUSAIvyLeagueUniversityAlliance，wewilldeveloptheofficialvideowebsite.Consideringthatusersofthew

8、ebsitewillthroughdifferentterminaldevicestobrowserthewebsite，wewillusetheresponsedesignmethodtoadapteachterminaldevice.After