通用视频网站管理系统的研究与开发

龙源期刊网通用视频网站管理系统的研究与开发作者：朱如意李连民来源：《电脑知识与技术》2018年第11期摘要：随着人们的生活节奏的日益加快，互联网时代的快速发展，人们会更希望利用很短的时间就可以通过小短片学处理生活中技巧等等。通过网站来存储、播放用户的视频（一般网站通有的功能）。该文就是基于HTML5的video的视频播放网站的一些关键问题进行了阐述和说明。关键词：video和flash视频编码；html5技术；ffmpeg框架中图分类号：TP37文献标识码：A文章编号：1009-3044（2018）11-0231-021背景HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web，另外支持网页端的Audio、Video等多媒体功能，与网站自带的APPS，摄像头，影音功能相得益彰。Html5技术也就是html+css+javascript在内的一套技术的组合。通过video.js一套开源的HTML5和flash视频播放器来创建网页的播放器。2新型的HTML5HTML5更多的是一系列项目，而非完备的单一标准，至少现在如此。HTML5是多种技术的集合，其中大多数技术都在不断发展。早在Web开发社区认识到HTML4和关联的XHTML有很多不足之处时人们便已开始酝酿HTML5，这些不足之处包括从小小的句法不连贯到对多媒体演示的支持不足。HTML5旨在解决广泛的缺陷问题。然而，为了尽快取得最大的进步，HTML5被分成多个小部分进行标准化：首先是较简单、争议较少的部分，如新的输入定义，然后是更复杂（更有争议性的）的部分，如WebSockets和视频。2.1新的html5为设计出高质量的网页提供了基础HTML5在表单、视频、音频、图像、动画等方面的功能越来越丰富，能够非常方便的设计出高质量的网页，但网页提供的不仅仅是华丽的页面，还需要有大量的数据处理才可以吸引用户，数据处理在以前往往需要从服务器获取，用户访问量大时。如果客户端频繁从服务器获取数据将对服务器造成负载压力，HTML5新增加了离线缓存和本地缓存的规范，使用户可以离线访问Web应用，并将网页文件离线缓存到本地，使网页速度大大提高，降低了用户请求对服务器造成的负载压力。2.2HTML5的video龙源期刊网把本地的多媒体引入到浏览器。在过去，音视频需要通过第三方插件来处理（这样引发的问题是：并不是所有的操作系统或者设备都能使用）浏览器与插件之间的通信被局限住了，而且多媒体就像一个黑盒子。HTML5出现之后，所有主流浏览器都可以支持本地音视频了（包括IE浏览器），虽然这个过程需要让您的媒体文件进行双份的编码（因为IE和Safari只支持Royalty-encumbered标准的编码）。有了HTML5，突然之间，video可以跟CSS一起排样式了：您可以用半透明的视频相互覆盖，设置边界与背景图片，旋转盘旋等变换，以及其他各种精彩的变形应用。2.3HTML5的新特性随着网络的发展，web的内容越来越多的是用音视频的形式来体现了，考虑一下有些用户无法听到音轨，或者其母语并不是英语的情况，抑或用户希望用他们自己的语言来阅读字幕和内容的时候。在你的标题和子标题附近很快就会出现了，通过HTML5元素，可以基于时间轴对媒体文件同步字幕。这个强有力的元素是或者元素的子类，并指向一个副标题文件。2.4HTML5的本地存储和离线存储在HTML5之前，如果想在客户端保存数据一般采用cookie，cookie最多只能存储4096字节的数据，每个HTTP请求都会被传送回服务器，无法满足客户端数据存储的需求，本地存储，当用户离线使需要把数据存储到本地，以便在线时同步到服务器来存储简单的数据，当加载视频网站时需要从服务器大量的请求资源文件（网页文件、图片、数据、js、css等等）通过web本地存储调用来获取。离线资源的缓存，在应用程序离线工作时所需的资源文件，当在线时将浏览的文件缓存到本地，当离线时缓存的资源文件会自动加载，在离线时可以正常使用，当看一个视频时，需要将视频的文件缓存到本地，这样不仅可以减少服务器的负载，同时也让用户的体验更加好，当突然断网之后我们还可以还没看完的视频继续看完。3基于HTML5的视频播放器的创建在HTML5中使用video标签来提供了视频播放器的最初的原型，我们可以通过使用js的样式来控制video，利用video.js来创建视频播放器，video.js提供插件API，以便将不同类型的视频传递给本地视频元素，同时跨浏览器统一本地视频API（如有必要，多功能支持功能）而且提供可扩展和可编程的用户界面，可以确保键盘和屏幕阅读器用户的可访问性。另外还有一组核心插件提供对其他视频格式的支持。3.1检测浏览器是否支持HTML5的video标签因为虽然主流的浏览器都支持video标签，但是仍存在一些浏览器仍不支持video标签（比如IE）虽说基于HTML5的视频播放器的创建但是当不能使用video标签时我们还是可以选用flash插件的，首先我们需要让主流的浏览器都支持video标签。3.2创建HTML5的视频播放器龙源期刊网标签，就可以使用video.js来装饰标准元素并模拟相关的事件和API，同时也可以提供可定制的基于DOM的UI。在现代网页中在当页面加载时，元素通常是不存在的，可以通过该video.js的手动的设置来创建视频播放器，同时video.js接受DOM元素。由于video.js的视频播放器的创建有可能异步加载，立即与用户进行交互总是不安全的，由于这个原因video.js有一个准备就绪的概念。可以定义任何数量的就绪回调，代码如下：videojs（'my-player'，null，function（）{this.addClass（'my-example'）；}）；3.3获取或设置HTML5视频播放器中视频的相关参数当下web应用程序变得很普通加载一次完成的页面就要能够管理整个视频播放器的整个生存周期，同时可以改变播放器的音量（volume（）获取）、让播放器全屏显示（isFullscreen（））、退出出全屏会话（exitFullscreen（））、当前的播放的位置（currentTime（））、正在播放视频的总时间（duration（））以及缓冲的时间百分比（bufferedPercent（））。4基于HTML5Video的视频播放器的功能的实现4.1视频播放器的外观我们可以看到不同的视频网站的播放器的外观都不一样，我们创建的视频播放器没有任何的修饰，只有有一些简单的样式，这样看起来有时会不舒服，我们为了达到更好的用户体验，当我们加入video-js.min.css这个样式的时候视频播放器会默认的样式，当我们使用框架的时候可能会影响视频播放器的效果，我们要抑制这种情况的发生我们需要使用window.VIDEOJS_NO_DYNAMIC_STYLE=true在video.js之前，可以通过设置它们抑制它们。创建视频播放器的样式可以覆盖默认提供的样式，通过设置这样的样式player.addClass（'vjs-matrix'）；4.2视频播放器资源文件的编码由于HTML5的video标签支持的视频格式很少，总共就支持这三种格式Ogg、MPEG4、WebM。MP4=MPEG4文件使用H264视频编解码器和AAC音频编解码器WebM=WebM文件使用VP8视频编解码器和Vorbis音频编解码器Ogg=Ogg文件使用Theora视频编解码器和Vorbis音频编解码器。我们需要将上传的视频统统转换为MPEG4格式。4.3通过上传视频来动态的获取图片由于我们上传的视频往往不需要用户自己来截取一张图片来上传，所以我们就需要自己服务器自己获取到上传的视频的图片我们仍然通过FFPMPEG.exe的插件来获取。龙源期刊网结束语现在本地的多媒体已经看起来十分炫酷了，当然也不是足够的成熟，毕竟使用浏览器作为媒体播放器也不过两年时间。与此相对应的桌面媒体播放器程序已经存在了15年，在这么多年的锤炼中不断完善。很多人注意到了，大多数浏览器在播放音频的时候有少许的延迟。许多游戏开发者经常说，FLASH技术残留下来就是为他们提供声音的，正如许多浏览器可以需要两秒钟来加载HTML5音频文件。随着网络的发展，web的内容越来越多的是用音视频的形式来体现了，考虑一下有些用户无法听到音轨，或者其母语并不是英语的情况，抑或用户希望用他们自己的语言来阅读字幕和内容的时候。这时候我们的HTML5就可以很好的解决这样的问题，所以说我们选择使用HTML5的video是一个明确的选择。参考文献：[1]孙鑫，付永杰.HTML5、CSS和JavaScript开发[M].北京：电子工业出版社，2012.[2]陆凌牛.HTML5与CSS3权威指南[M].北京：机械工业出版社，2013.[3]高少琛.基于HTML5的内容发布管理系统的研究与实现[J].软件产业与工程，2016（2）：43-46.[4]黄雄.基于HTML5的视频传输技术研究[J].广东技术师范学院学报，2014，35（11）：20-25.