app直播商城源码，实现一个直播的前端功能

一、直播简介

直播的过程其实就是推流到拉流的过程，而app直播商城源码前端需要做的就是正确的引用拉流地址，并进行播放。 目前可进行直播的协议有3种，即rtmp、flv、hls。

1）rtmp：即实时消息传输协议，该协议基于TCP，是一个协议族，包括RTMP基本协议及RTMPT/RTMPS/RTMPE等多种变种。RTMP是一种设计用来进行实时数据通信的网络协议，主要用来在Flash/AIR平台和支持RTMP协议的流媒体/交互服务器之间进行音视频和数据通信。支持该协议的软件包括Adobe Media Server/Ultrant Media Server/red5等。RTMP与HTTP一样，都属于TCP/IP四层模型的应用层。

2）HLS (HTTP Live Streaming)是Apple的动态码率自适应技术。主要用于PC和Apple终端的音视频服务。包括一个m3u(8)的索引文件，TS媒体分片文件和key加密串文件。

3）FLV 是FLASH VIDEO的简称，FLV流媒体格式是随着Flash MX的推出发展而来的视频格式。由于它形成的文件极小、加载速度极快，使得网络观看视频文件成为可能，它的出现有效地解决了视频文件导入Flash后，使导出的SWF文件体积庞大，不能在网络上很好的使用等问题。

本次基于ckplayer去拉流播放，首先需要了解下3个直播协议的优缺点，总结如下：

1.rtmp:

优点：延时小；缺点：手机浏览器无法支持；

2.hls：

优点：基于H5的video标签播放，手机浏览器支持度良好；缺点：延时大；

3.flv：

优点：加载速度快，格式简单，适用于大规模并发方面；缺点：手机浏览器支持度有限；

针对app直播商城源码实际业务需求，需要在pc端、pad端和手机端网页中都能够进行播放，因此本次选择hls协议实现直播效果。

直接上代码: （1）HTML：

                <div class="teaser-container countdown-container" data-src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" data-live="true">
                    <div class="countdown-img">
                        <img class="pc-pad img-hide" src="../imgs/advance-live/countdown-bg-pc.jpg" alt="">
                        <img class="mb-only img-hide" src="../imgs/advance-live/countdown-bg-m.jpg" alt="">
                        <!-- 直播视频 -->
                        <div class="video-liver live_body"></div>
                        <!-- video start -->
                        <div class="video-live">
                            <img class="close" src="../resource/ev/KV1/close.png">
                            <img class="redClose" src="../resource/ev/KV1/redClose.png">
                        </div>

                        <div class="live-waiting">
                            <div class="live-waiting-title">
                                <p></p>
                            </div>
                            <div class="live-waiting-box">

                                <div class="live-waiting-content">
                                    <p></p>
                                    <p></p>
                                </div>

                            </div>
                        </div>
 </div>

live_body为直播的容器，通过css控制显示大小即可。data-src属性值为拉流地址，当data-live为true时触发直播事件； （2）直播倒计时：

将minutes，seconds，days，hours放入相应的显示位置，css控制显示效果，这里需要处理一个小细节，即给秒钟的盒子设置宽度超过100%，优化倒计时过程中时间显示效果。 （3）初始化ckplayer，并添加直播事件：

初始化方法可以参考官网示例，然后根据项目需求编写代码即可。 初始化完成后，即可播放直播了。

本文刚开始部分问题1的出现是由于使用了rtmp协议的直播流，导致app直播商城源码手机端根本无法播放直播，因此采用m3u8格式的直播流即可解决。 问题2出现手机端正常播放，pc端播放异常的情况下，是由于播放直播的网页通过https加载，但直播流地址是http协议的请求，部分浏览器会将之视为不安全链接，默认被阻止，内容必须通过https提供。 解决方式:将直播流地址的头部去除，让浏览器通过https解析地址。

//ivi.bupt.edu.cn/hls/cctv1hd.m3u8

至此，app直播商城源码的直播需求就完成了。
声明：本文由云豹科技转发自keyman博客，如有侵权请联系作者删除