基于HTML5的视频音频传输技术的研究与设计

发布时间：2018-03-01 12:28

本文关键词： HTML5 流媒体 Video标签 Audio标签 RTP协议 RTSP协议 HTML5视频编码解码技术　出处：《广东技术师范学院》2014年硕士论文　论文类型：学位论文

【摘要】：传统的利用流媒体技术实现对视频、音频的播放的过程中,都需要安装和加载Flash插件等应用,造成了浏览器对于插件的依赖性。尽管流媒体的视频、音频格式能够适应带宽资源的利用,但是随着网络的发展,为传输提供更高图像质量、更高流畅程度、更高解码效率的视频、音频已经成为网络发展的亟待解决的问题。同时,随着智能手机的发展以及IOS,Android,Windows Phone的平台的兴起,越来越多的应用都已经拓展到了移动端,传统的播放器已不能适应现有的平台。 HTML5是由HTML、CSS3和Javascript等一系列技术的组合,旨在减少网页对于传统插件如Flash的依赖性,并依靠Javascript和CSS3强化WEB网页的表现性能。目前由网页实现流媒体的传输和播放都需要借助Flash插件的使用。论文分析、设计、实现了基于HTML5的视频、音频播放器,并检验了HTML5视频、音频传输的性能,摆脱了对Flash插件和其他视频编码解码器的依赖。设计和提出了利用jQuery Mobile和PhoneGap框架实现移动端的开发应用,并实现了基于HTML5的跨平台功能,研究了HTML5视频、音频传输过程。流媒体技术的传输协议为视频、音频的传输提供了可靠的基础,HTML5的Javascript的本地引擎功能了加速网页的加载速度,提高了网页传输的效率。论文的创新点主要有： 1.目前主流的视频、音频播放器都不能实现跨平台的功能。本论文利用HTML5的Video和Audio标签,设计和实现了一个基于HTML5的视频、音频播放器,解决了传统播放器所不具备的跨平台功能。 2.目前的主流的视频、音频播放器的都需要加载插件,而且不同的平台还需要安装不同的插件,用户体验和效果不佳。而利用HTML5技术设计与实现的HTML5视频、音频播放器则可以利用HTML5的视频编码解码器实现对视频、音频的解码功能,而不需要在不同平台上安装不同的插件,使用户摆脱插件的使用。 3.传统的视频播放器播放的视频资源码率较高,传输效率低；而帧率却较低,图像质量差；即使帧率较低,但是流畅度也不佳。本论文通过与具有低码率高质量FLV格式实验比较,验证HTML5的视频编码解码技术不仅降低了视频资源的码率,对视频资源的流畅程度影响较小,并且提高了视频资源的帧率,提高了视频资源的图像质量。本文利用HTML5技术实现了视频、音频的传输,设计与实现了前端视频、音频播放器,摆脱不同平台插件应用。系统具备跨平台性,跨移动终端的功能。测试结果说明：HTML5格式比传统的FLV格式提供了更高传输效率,更高传输质量、更高存储性能的视频、音频。
[Abstract]:In the process of video and audio playback, the traditional streaming media technology needs to install and load the Flash plug-in, which results in the browser's dependence on the plug-in. Although the video and audio formats of streaming media can adapt to the utilization of bandwidth resources, with the development of the network, video with higher image quality, higher fluency and higher decoding efficiency is provided for transmission. Audio has become an urgent problem in network development. At the same time, with the development of smart phone and the rise of OS Android Phone platform, more and more applications have been extended to the mobile side, the traditional player can not adapt to the existing platform. HTML5 is a combination of HTML CSS3 and Javascript, which aims to reduce the dependence of web pages on traditional plug-ins such as Flash, and rely on Javascript and CSS3 to enhance the performance of WEB pages. At present, the transmission and playback of streaming media by web pages need the help of Flash plug-in. This paper analyzes, designs and implements the video and audio player based on HTML5, and tests the performance of HTML5 video and audio transmission. In order to get rid of the dependence on the Flash plug-in and other video codec, this paper designs and proposes the development and application of mobile terminal using jQuery Mobile and PhoneGap framework, and realizes the cross-platform function based on HTML5, and studies the HTML5 video. The transmission protocol of streaming media technology provides a reliable basis for the transmission of video and audio. The local engine of Javascript of HTML5 accelerates the loading speed of web pages and improves the efficiency of web page transmission. The innovations of this paper are as follows:. 1. At present, the mainstream video and audio player can not realize the function of cross-platform. This paper uses the Video and Audio tags of HTML5 to design and implement a video and audio player based on HTML5. Solves the traditional player does not have the cross-platform function. 2.The current mainstream video and audio players need to load plug-ins, and different platforms also need to install different plug-ins, user experience and poor results. HTML5 video design and implementation using HTML5 technology, Audio player can use HTML5 video codec to decode video and audio without having to install different plug-ins on different platforms so that users can get rid of plug-in. 3. The traditional video player plays the video resource with high bit rate and low transmission efficiency, while the frame rate is lower and the image quality is poor, even if the frame rate is low, But the fluency is also not good. Comparing with the experiment of FLV format with low bit rate and high quality, this paper verifies that the video coding and decoding technology of HTML5 not only reduces the bit rate of video resource, but also has little effect on the fluency of video resource. The frame rate of video resource is improved and the image quality of video resource is improved. This paper uses HTML5 technology to realize video and audio transmission, design and implement front-end video, audio player, get rid of different platform plug-in applications. Test results show that the: HTML5 format offers higher transmission efficiency, higher transmission quality, and higher storage performance than the traditional FLV format.
【学位授予单位】：广东技术师范学院
【学位级别】：硕士
【学位授予年份】：2014
【分类号】：TN919.8

【参考文献】