最近遇到一个业务需求，需要在其官网上插入一个直播定时播放，因此在此分享下我的功能思路及相关问题和解决方式。 功能：1.直播倒计时设计 2.倒计时结束进入直播 3.附加主题设计
问题：1.直播信号在PC端正常显示，移动端无法显示 2.移动端直播正常，PC端异常
插件：CKplayer.js
一、直播简介
直播的过程其实就是推流到拉流的过程，而前端需要做的就是正确的引用拉流地址，并进行播放。 目前可进行直播的协议有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：
优点：加载速度快，格式简单，适用于大规模并发方面；缺点：手机浏览器支持度有限；
针对实际业务需求，需要在pc端、pad端和手机端网页中都能够进行播放，因此本次选择hls协议实现直播效果。
插件下载地址：www.ckplayer.com/down/
直接上代码: （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协议的直播流，导致手机端根本无法播放直播，因此采用m3u8格式的直播流即可解决。 问题2出现手机端正常播放，pc端播放异常的情况下，是由于播放直播的网页通过https加载，但直播流地址是http协议的请求，部分浏览器会将之视为不安全链接，默认被阻止，内容必须通过https提供。 解决方式:将直播流地址的头部去除，让浏览器通过https解析地址。
//ivi.bupt.edu.cn/hls/cctv1hd.m3u8
至此，一个直播需求就完成了。
针对直播插件，另推荐video.js：docs.videojs.com/tutorial-op…
*此为小key工作过程中遇到的直播相关需求，编写文章最重要的是记录工作中遇到的问题及解决方式，同时希望能过对大家有所帮助，也欢迎大家评论更优秀的解决方案哦
