流媒体研究
一、流媒体
在后端建设一个视频传输服务器,客户端安装播放器,客户端通过网络请求服务器,播放视频,客户端想拿到视频,服务器将视频分成一个一个小的数据包传输到客户端,达到播放效果。视频在服务器端是编码的,达到客户端需要解码,播放。
流式传输模式:
(1)顺序流式传输:顺序下载音频,视频文件,可以实现边下载边播放。不过,只可以观看已下载的视频内容。无法快进到未下载视频部分。例如http服务器nginx,apache等。
(2)实时流式传输:与Http流式传输不同,必须使用流媒体服务器,并且使用流媒体协议传输视频。流媒体协议例如:RTSP、RTMP、RSVP等。
1.1点播解决方案
(1)播放器通过http协议从http服务器上下载视频文件进行播放。
(2)播放器通过rtmp协议连接流媒体以实时流方式播放视频。直播采用,造价高。
(3)近实时播放,基于hls协议连接http服务器(nginx,apache等)实现
hls协议: 基于Http协议。源于苹果的动态码率自适应技术。包含一个m3u8的索引文件,将视频分成很多小的ts视频片段,当快进的时候,通过m3u8找到对应的索引文件,然后找到对应的ts视频片段,去服务器下载,从而实现快进快退。
文件格式:例如mp4,av,rmvb等不同的视频文件格式,视频内存包括音频,视频,文字,这些内容按照文件格式封装到一起,然后播放器根据封装格式进行解码。
视频编码:通过特定的压缩技术,将某个视频格式的文件转换成另一种视频格式文件。
(4)m3u8文件产生方案:ffmpeg
二、实战
2.1配置nginx
server { listen 90; server_name localhost; #视频目录 location /video/ { alias D:/linux/hls/; } } map $http_origin $origin_list{ default http://www.xxx.top; "~http://www.xxx.top" http://www.xxx.top; "~http://ucenter.xxx.top" http://ucenter.xxx.top; } upstream video_server_pool{ server 127.0.0.1:90 weight=10; } server { listen 80; server_name video.xxx.top;
location /video { proxy_pass http://video_server_pool; add_header Access‐Control‐Allow‐Origin $origin_list; #add_header Access‐Control‐Allow‐Origin *; add_header Access‐Control‐Allow‐Credentials true; add_header Access‐Control‐Allow‐Methods GET; } } |
2.2 页面编写
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>视频播放</title> <link href="./videojs/video-js.css" rel="stylesheet"> </head> <body> <video id=example-video width=800 height=600 class="video-js vjs-default-skin vjs-big-play-centered" controls poster="http://127.0.0.1:90/video/add.jpg"> <source src="http://video.xxx.top/video/video/lucene.m3u8" type="application/x-mpegURL"> </video> <input type="button" onClick="switchvideo()" value="switch"/> <script src="./videojs/video.js"></script> <script src="./videojs/videojs-contrib-hls.js"></script> <script> var player = videojs('example-video'); //player.play();
function switchvideo(){ player.src({ src: 'http://video.xxx.top/video/video/lucene.m3u8', type: 'application/x-mpegURL', withCredentials: true }); player.play(); } </script> </body> </html> |