zoukankan      html  css  js  c++  java
  • [转] 视频直播前端方案

    流媒体本质上是:现实的图像,经过编码器压缩,持久化为点播文件或者直播流,经过传输,在终端解码和展示。

    http live streaming(hls)

    适用移动端
    HTTP Live Streaming(HLS)是苹果公司实现的基于HTTP的流媒体传输协议,可实现流媒体的直播和点播。原理上是将视频流分片成一系列HTTP下载文件。
    Alt text

    由于大多数移动设备的H5页面的HTML5新的video标签都支持HLS协议,所以在移动端非常适合使用HLS协议进行直播。

    上图所示的m3u8格式就是支持HLS协议的流媒体格式。

    使用方法也非常简单,直接在html中嵌入一个video标签及可。

    <video class="video" controls="controls"  width="375" height="300" id="player1" webkit-playsinline>
       <source src="../index.m3u8">
    </video>

    值得注意的是hls在pc端仅仅支持safari浏览器(因为就是苹果实现的hls技术),所以在类似chrome浏览器上是无法看到视频的。即使在chrome的调试器中模拟移动端还是无法播放视频。

    这里推荐一个播放m3u8格式文件的网站,只要将视频地址扔到这个网站,就能播放。http://osmfhls.kutu.ru/

    video标签拥有很多属性、事件以及方法。http://www.w3school.com.cn/ta... 
    包含play() pause()等等,这些原生事件方法就能脱离原生video样式,打造独一的风格。

    这里推荐一个教程,如何用css3实现自己风格的播放器。http://www.inserthtml.com/201...

    另外再提及一点webkit-playsinline属性,在video中增加这个属性,用户在微信App中的webview中打开视频不会进入默认的全屏播放模式,若我们给播放器设置了宽200高200,在有这个属性的前提下打开视频,高宽还是200。

    之前有谈到hls协议的视频直播格式无法再pc端播放,但现有许多video库可以结合flash实现m3u8格式的视频在pc端各大浏览器播放。
    https://github.com/johndyer/m...
    https://github.com/videojs/vi...
    https://github.com/jwplayer/j...

    RTMP Real Time Messaging Protocol

    Real Time Messaging Protocol(简称 RTMP)是 Macromedia 开发的一套视频直播协议,现在属于 Adobe。这套方案需要搭建专门的 RTMP 流媒体服务如 Adobe Media Server,并且在浏览器中只能使用 Flash 实现播放器。它的实时性非常好,延迟很小,但无法支持移动端ios h5页面播放是它的硬伤。

    虽然无法再ios的H5页面播放,但是对于ios原生应用是可以自己写解码去解析的。而且rtmp延迟低,我们公司就采用了rtmp协议。

    在pc浏览器端,HTML5video标签无法播放rtmp协议的视频,所以还是需要借用flash去播放。

    之前提到的几个video库都可以实现这样的效果,这里就video.js为例。

    <body>
        <video class="video-js vjs-default-skin" controls="controls"  width="375" height="300" id="player1" webkit-playsinline>
            <source src="rtmp://wsrtmp.yizhibo.tv:1935/live/0p4kf8k3Aubp" type='rtmp/mp4'>
        </video>
    <script type="text/javascript" src="lib/video.min.js"></script>
    <script>
        videojs.options.flash.swf = "lib/video-js.swf";
    </script>
    <script type="text/javascript">
        var player = videojs('player1', {}, function() {
          console.log('Good to go!');
          this.play(); 
          this.on('ended', function() {
            console.log('awww...over so soon?');
          });
        });
    </script>
    </body>

    youtube pc端html5实现方法

  • 相关阅读:
    【解题报告】 洛谷P1663 山
    【解题报告】 洛谷P6733 间歇泉
    【解题报告】 洛谷P1542 包裹快递
    二分总结
    SmartSchool CC校友录V8(毕业入世版)
    Hide/Show running Console
    Calculate drive total/free/available space
    C# list installed softwares
    How to: Modify a Project System So That Projects Load in Multiple Versions of Visual Studio
    PS:WINRAR制作32位安装程序和64位安装程序选项
  • 原文地址:https://www.cnblogs.com/chris-oil/p/9754088.html
Copyright © 2011-2022 走看看