视频播放

最新推荐文章于 2021-06-23 15:17:29 发布

单人影i

最新推荐文章于 2021-06-23 15:17:29 发布

阅读量233

点赞数

分类专栏：运维文章标签：视频

本文链接：https://blog.csdn.net/a185589690/article/details/89603407

版权

运维专栏收录该内容

9 篇文章 0 订阅

订阅专栏

流媒体
- 流式传输
  在网络上传输音、视频信息有两个方式：下载和流式传输。
  下载：就是把音、视频文件完全下载到本机后开始播放，它的特点是必须等到视频文件下载完成方可播放，
  播放等待时间较长，无法去播放还未下载的部分视频。
  流式传输：就是客户端通过链接视频服务器实时传输音、视频信息，实现“边下载边播放”。
  流式传输包括如下两种方式：
  1）顺序流式传输
  即顺序下载音、视频文件，可以实现边下载边播放，不过，用户只能观看已下载的视频内容，无法快进到未
  下载的视频部分，顺序流式传输可以使用Http服务器来实现，比如Nginx、Apache等。
  2）实时流式传输
  实时流式传输可以解决顺序流式传输无法快进的问题，它与Http流式传输不同，它必须使用流媒体服务器并
  且使用流媒体协议来传输视频，它比Http流式传输复杂。常见的实时流式传输协议有RTSP、RTMP、RSVP
  等。
- 视频编码格式
  - 这个就自己百度吧. 我也不是很懂.
FFmpeg
- 下载：FFmpeg https://www.ffmpeg.org/download.html#build-windows
生成m3u8/ts文件
- 转换avi格式命令:
  - ffmpeg.exe ‐i 文件名.avi ‐c:v libx264 ‐s 1280x720 ‐pix_fmt yuv420p ‐b:a 63k ‐b:v 753k ‐r 18.\lucene.mp4
    - 解释:
      - -c:v 视频编码为x264 ，
      - x264编码是H264的一种开源编码格式
      - -s 设置分辨率
      - -pix_fmt yuv420p：设置像素采样方式，主流的采样方式有三种，YUV4:4:4，YUV4:2:2，YUV4:2:0，它的作用是根据采样方式来从码流中还原每个像素点的YUV（亮度信息与色彩信息）值
      - -b 设置码率，-b:a和-b:v分别表示音频的码率和视频的码率，-b表示音频加视频的总码率。码率对一个视频质量有很大的作用，
      - -r：帧率，表示每秒更新图像画面的次数，通常大于24肉眼就没有连贯与停顿的感觉了
- MP4转m3u8
  - ffmpeg ‐i 文件名.mp4 ‐hls_time 10 ‐hls_list_size 0 ‐hls_segment_filename./hls/文件名_%05d.ts ./hls/文件名.m3u8
    - -hls_time 设置每片的长度，单位为秒
    - -hls_list_size n: 保存的分片的数量，设置为0表示保存所有分片
    - -hls_segment_filename ：段文件的名称，%05d表示5位数字
    - 生成的效果是：将lucene.mp4视频文件每10秒生成一个ts文件，
    - 最后生成一个m3u8文件，m3u8文件是ts的索引文件
    - ./hls/文件名_%05d.ts 在hls目录下生成文件_00000(自增的数字).ts
    - ./hls/文件名.m3u8 在hls目录下文件名.m3u8文件 (打开m3u8使用VLC打开)
- 码率的设置
  - 码率又叫比特率即每秒传输的bit数，单位为bps(Bit Per Second)，码率越大传送数据的速度越快。
    码率的计算公式是：文件大小（转成bit）/ 时长（秒）/1024 = kbps 即每秒传输千位数
    例如一个1M的视频，它的时长是10s，它的码率等于1*1024*1024*8/10/1024 = 819Kbps

播放器

Video.js 它支持HTML5和Flash视频，它支持在台式机和移动设备上播放视频
下载:
- Video.js： https://github.com/videojs/video.js
  videojs-contrib-hls： https://github.com/videojs/videojs-contrib-hls#installation
  （videojs-contrib-hls是播放hls的一个插件）
- 使用 video.js 6.7.3 版本，videojs-contrib-hls 5.14.1版本
正常使用video.js播放视频是通过一个网页，用户通过浏览器打开网页去播放视频，网页和视频都从web服务器请
求，通常视频的url地址使用单独的域名使用Nginx媒体服务器

server {
    listen 80;
    server_name video.com;
    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;
    }
}


#媒体服务代理
map $http_origin $origin_list{
default http://www.baidu1.com;
    "~http://www.baidu2.com" http://www.baidu2.com;
    "~http://www.baidu3.com" http://www.baidu3.com;
}

cors跨域参数:
Access-Control-Allow-Origin：允许跨域访问的外域地址
通常允许跨域访问的站点不是一个，所以这里用map定义了多个站点。
如果允许任何站点跨域访问则设置为*，通常这是不建议的。
Access-Control-Allow-Credentials： 允许客户端携带证书访问
Access-Control-Allow-Methods：允许客户端跨域访问的方法

然后通过Nginx直接访问.m3u8文件就ok了.

在页面导入video标签 viden.js和组件

var player = videojs('example‐video');
player.play();

function switchvideo(){
    player.src({
        src: 'http://你Nginx配置的地址/文件名.m3u8',
        type: 'application/x‐mpegURL',
        withCredentials: true
    });
    player.play();
}