• 前端video视频


    AVI格式(后缀为.AVI):它的英文全称为Audio Video Interleaved,即音频视频交错格式.这种视频格式的优点是图像质量好。由于无损AVI可以保存alpha通道,,经常被我们使用。缺点太多,体积过于庞大,而且更加糟糕的是压缩标准不统一,最普遍的现象就是高版本Windows媒体播放器播放不了采用早期编码编辑的

    DV-AVI格式(后缀为.AVI):DV的英文全称是Digital Video Format,是由索尼、松下、JVC等多家厂商联合提出的一种家用

    QuickTime File Format格式(后缀为.MOV)美国Apple公司开发的一种视频格式,默认的播放器是苹果的QuickTime。

    MPEG:它的英文全称为Moving Picture Experts Group,即运动图像专家组格式. MPEG文件格式是运动图像压缩算法的国际标准。MPEG格式目前有三个压缩标准,分别是MPEG-1、MPEG-2、和MPEG-4。MPEG-1、MPEG-2目前已经使用较少,着重介绍MPEG-4,其制定于1998年,MPEG-4是为了播放流式媒体的高质量视频而专门设计的,以求使用最少的数据获得最佳的图像质量。

    WAV(后缀为.WMV .ASF):它的英文全称为Windows Media Video,也是微软推出的一种采用独立编码方式,并且可以直接在网上实时观看视频节目的文件压缩格式。

    Real Video格式(后缀为.RM .RMVB):Real Networks公司所制定的音频视频压缩规范称为Real Media。用户可以使用RealPlayer根据不同的网络传输速率制定出不同的压缩比率,从而实现在低速率的网络上进行影像数据实时传送和播放。:这是一种由RM视频格式升级延伸出的新视频格式,当然性能上有很大的提升。RMVB视频也是有着较明显的优势,一部大小为700MB左右的DVD影片,如果将其转录成同样品质的RMVB格式,其个头最多也就400MB左右。大家可能注意到了,以前在网络上下载电影和视频的时候,经常接触到RMVB格式,但是随着时代的发展这种格式被越来越多的更优秀的格式替代,著名的人人影视字幕组在2013年已经宣布不再压制RMVB格式视频。

    Flash Video(后缀.FLV):由Adobe Flash延伸出来的的一种流行网络视频封装格式.

    Matroska格式(后缀为.MKV):是一种新的多媒体封装格式,这个封装格式可把多种不同编码的视频及16条或以上不同格式的音频和语言不同的字幕封装到一个Matroska Media档内。它也是其中一种开放源代码的多媒体封装格式。Matroska同时还可以提供非常好的交互功能,而且比MPEG的方便、强大。

    video标签可播放的视频格式为mp4,ogg,mov,mkv

    谷歌浏览器支持mp4播放格式,但是MP4的视频格式可以使用DivX也可使用H264,Chrome只支持H264。

    常用视频格式mp4,mov,avi,谷歌浏览器仅支持mp4中H264视频格式,safari支持mov,mp4但avi不支持,发现web端浏览器对这些支持并不好,相比较而言移动端还可以

    视频比较大,直接在加载整个页面显然不是最好的选择,于是想到了m3u8流媒体,将一个大的媒体文件进行分片直接用播放器进行在线播放

    HLS流:
    1、HLS是苹果公司实现的基于 HTTP 的流媒体传输协议,全称 HTTP Live Streaming,可支持流媒体的直播和点播,主要应用在 iOS 系统,为 iOS 设备(如 iPhone、iPad)提供音视频直播和点播方案。

    2、HLS 的基本原理就是当采集推流端将视频流推送到流媒体服务器时,服务器将收到的流信息每缓存一段时间就封包成一个新的 ts 文件,同时服务器会建立一个 m3u8 的索引文件来维护最新几个 ts 片段的索引。当播放端获取直播时,它是从 m3u8 索引文件获取最新的 ts 视频文件片段来播放,从而保证用户在任何时候连接进来时都会看到较新的内容,实现近似直播的体验。HLS 最大的不同在于直播客户端获取到的并不是一个完整的数据流,而是连续的、短时长的媒体文件,客户端不断的下载并播放这些小文件。这种方式的理论最小延时为一个 ts 文件的时长,一般情况为 2-3 个 ts 文件的时长。HLS 的分段策略,基本上推荐是 10 秒一个分片,这就看出了 HLS 的缺点:

    通常 HLS 直播延时会达到 20-30s,而高延时对于需要实时互动体验的直播来说是不可接受的。
    HLS 基于短连接 HTTP,HTTP 是基于 TCP 的,这就意味着 HLS 需要不断地与服务器建立连接,TCP 每次建立连接时的三次握手、慢启动过程、断开连接时的四次挥手都会产生消耗。
    HLS 的优点:
    数据通过 HTTP 协议传输,所以采用 HLS 时不用考虑防火墙或者代理的问题。
    使用短时长的分片文件来播放,客户端可以平滑的切换码率,以适应不同带宽条件下的播放。
    HLS 是苹果推出的流媒体协议,在 iOS 平台上可以获得天然的支持,采用系统提供的 AVPlayer 就能直接播放,不用自己开发播放器。

    当使用 HLS 流媒体网络传输协议时,<video> 元素 src 属性使用的是 blob:// 协议。讲到该协议,我们就不得不聊一下 Blob 与 Blob URL。


    RTMP流:
    RTMP实时消息传输协议,Real Time Messaging Protocol,是 Adobe Systems 公司为 Flash 播放器和服务器之间音频、视频和数据传输开发的开放协议。协议基于 TCP是一个协议族,包括 RTMP 基本协议及 RTMPT/RTMPS/RTMPE 等多种变种。RTMP 是一种设计用来进行实时数据通信的网络协议,主要用来在 Flash/AIR 平台和支持RTMP协议的流媒体/交互服务器之间进行音视频和数据通信。

    相对于 HLS 来说,采用 RTMP 协议时,从采集推流端到流媒体服务器再到播放端是一条数据流,因此在服务器不会有落地文件。这样 RTMP 相对来说就有这些优点:

    延时较小,通常为 1-3s。
    基于 TCP 长连接,不需要多次建连。稳定性高。
    支持加密: RTMPE和RTMPS为加密协议。
    因此业界大部分直播业务都会选择用 RTMP 作为流媒体协议。通常会将数据流封装成 FLV 通过 HTTP 提供出去。但是这样也有一些问题需要解决:
    iOS 平台没有提供原生支持 RTMP 或 HTTP-FLV 的播放器,这就需要开发支持相关协议的播放器。
    协议复杂:RTMP协议比起HTTP复杂很多,导致性能低下。
    有累积延迟:,原因是RTMP基于TCP不会丢包。所以当网络状态差时,服务器会将包缓存起来,导致累积的延迟;待网络状况好了,就一起发给客户端。这个的对策就是,当客户端的缓冲区很大,就断开重连。

    Video.js的使用(可兼容播放hls与rtmp)

    Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器

    1、对于Video.js 5.x及更低版本,Flash技术是Video.js核心存储库的一部分。对于Video.js 6.x及更高版本,Flash技术位于单独的存储库中。videojs-flash.js插件只与Video.js> = 6.0.0一起使用,因为之前的flash技术已构建到版本中! video.js不能直接播放rtmp流,需要videojs-flash.js 这个插件。

    2、对于播放HLS视频,在videojs7版本之前要引用videojs-contrib-hls.js插件才能播放。videojs7版本之后的,Video.js默认捆绑VHS(VHS是videojs-contrib-hls的继承者。它是一个源自videojs-contrib-hls存储库的源处理程序。虽然videojs-contrib-hls最初设计用于在所有浏览器上添加HLS播放,但我们意识到引擎也可以播放其他格式,所以videojs-contrib-hls这个项目已经被弃用,被videojs-http-streaming继承)。默认情况下,在Video.js 7及以上版本中已经集成Videojs HTTP Streaming(昵称为VHS),不必使用videojs-http-streaming插件就可以播放HLS,DASH和未来的HTTP流媒体协议视频。

    注意:

    1.对于Video.js 7之前的版本(明确说是6版本的),必须使用videojs-http-streaming.js插件才可以播放HLS,DASH和未来的HTTP流媒体协议视频,即使它们不是本机支持的。

    播放rtmp流提示No compatible source was found for this media

    这是你的浏览器没有开启flash的原因,只要将flash开启就好了

     1 const myer = videojs(this.$refs.eventVideo, {
     2                       autoplay: true,
     3                       muted: true,
     4                   }, function onPlayReady() {
     5                       this.on('error', function (error) {
     6                           videojs.log('监听到异常,错误信息:');
     7                           videojs.log(error);
     8                       });
     9                   });
    10                   myer.play();

    这里需要特殊注意,flv文件比较特殊,在video标签需要加上 muted属性,因为音频转码可能会转码失败导致整段视频无法播放.
    flv.js是bilibili开发,大致的播放方法是把flv文件转成一小段一小段的mp4格式(再往深处说就是指用代码标记人物动作,而不储存人物图像)

    初始化video播放器,让其能播放flv文件
    vue 和 html都适用:

     1     // 在js中flv改为flvjs即可,flvjs是默认的参数
     2     if(flv.isSupported()){
     3       setTimeout(function(){
     4           // 这里加了个200ms的定时器,原因是因为抓取元素之后vue无法瞬间响应
     5         var videoElement = document.getElementById('videoElementByFlv')
     6         that.flvPlayer = flv.createPlayer({
     7           url:"src",
     8           type: 'flv',
     9         })
    10         that.flvPlayer.attachMediaElement(videoElement)
    11         that.flvPlayer.load()
    12       },200)
    13     }

    对比以下互联网上用的流媒体分发方式:
      . HLS(m3u8格式):apple的HLS,支持点播和直播。

      . HTTP:即HTTP stream,各家自己定义的http流,应用于国内点播视频网站。
      . RTMP:直播应用,对实时性有一定要求,以PC为主。

    . 编码器输出RTMP协议。
      . 流媒体系统接入使用RTMP协议。
      . 流媒体系统内部直播分发使用RTMP。
      . PC+直播+实时性要求高:使用flash播放RTMP。
      . PC+直播+没有实时性要求:使用RTMP或者HLS均可。
      . PC+点播:使用HTTP或者HLS。

  • 相关阅读:
    oracle 判断字符串是否包含指定内容
    java 如何使用多线程调用类的静态方法?
    oracle 快速复制表结构、表数据
    oracle 清空表数据的2种方式及速度比较
    一、Instrument之Core Animation工具
    net登录积分(每天登录积分仅仅能加一次) 时间的比較
    正规方程 Normal Equation
    笑谈贝叶斯网络(干货)上
    SQL SERVER 面试题
    好的创始人想要改变世界,最好的创始人还要不放弃——扎克伯格清华中文演讲
  • 原文地址:https://www.cnblogs.com/huangxingquan/p/15976836.html
Copyright © 2020-2023  润新知