经过前面的知识,基本已经把聊天室的功能搞定了,剩下的就是直播的问题了...

一如既往,阿里云的web demo也是少的可怜,只有一个web播放器(Prismplayer),所以这里主要就此播放器踩的坑分享下...

1.获取直播流地址

目前此播放器有两种模式:

  FLASH(pc端):

    支持视频格式: mp4、flv、m3u8、rtmp、mp3

  HTML5 :

    支持视频格式:  mp4、m3u8

所以那些用rtmp的最好转成m3u8来播放

同样的,不同模式引入不同js文件,如果两个都用,阿里也有提供同时支持两个的版本

传送门------阿里云web播放器

转好格式后,最好添加鉴权,至于是md5,rot13......自行选择

2.使用播放器

播放器使用方法也很简单

// 初始化播放器
var player = new prismplayer({
id: "J_prismPlayer", // 容器id
source: "http://cloud.video.taobao.com/play/u/2554695624/p/1/e/6/t/1/fv/102/28552077.mp4",// 视频地址
autoplay: false, //自动播放:否
width: "100%", // 播放器宽度
height: "400px", // 播放器高度
isLive: true //是否直播
});

将source替换成自己的直播地址即可,至于播放器的方法使用,大家去上方的传送门看就好,这里就不多概述了...

需要注意的是:

当是直播模式的时候,若大家调用 liveStreamStop 方法与 m3u8Retry 方法时,pc与移动端差距略大

pc端可能即时就反馈给你,而移动端需要等待一阵时间

自动播放模式兼容性(移动端)极差,几乎属于摆设,暂时还未找到好的自动播放的方法,若有人解决,希望回复下,谢谢

另外说一下X5浏览器,视频会自动全屏,ios还可以控制,安卓没有法子,关于这个问题,腾讯给的回复是开启同层播放器,具体的方法也很简单

传送门---前端技术文档

所以其实直播就是将视频拉出来给另一个层而已...

这里讲的也就是这么多了,如果在阅读本文过程中发现有任何问题,请您务必指正,感谢万分...

30岁是谈恋爱最矛盾的年纪,往往在爱情和面包中寻找平衡点,所以,不敢踏出去寻找另一半,但爱很美好,请不要放弃

上一篇:web 直播&即时聊天------阿里云、融云(二)

下一篇:web 直播&即时聊天------腾讯云(四)

web 直播&即时聊天------阿里云、融云(三)的更多相关文章

  1. web 直播&即时聊天------阿里云、融云

    随着直播越来越火,所在公司也打算制作自己的直播,所以去了解了这方面,使用后发现还是有些问题需要记录的. 经过分析,制作直播应该是分为两块来做,即直播与实时评论.这里先去制作实时评论,等直播ok后,也会 ...

  2. web 直播&即时聊天------阿里云、融云(二)

    上一篇简要主要介绍了融云制作聊天室的基本方法,这次基本属于对上一篇的补充以及进阶...^_^... (ps:吐槽一下,加了三个融云的线下qq群,全部没人解决问题,也不知道建此群的意义,若是民间的话就当 ...

  3. web 直播&礼物赠送------腾讯云(四)

    直播项目搁置了将近1年,以为都搁浅了,没想到头头又提起来了,这次直播技术更替为了腾讯云,消息系统没变,采用的依然是融云,新增了礼物赠送功能. 项目完成基本就是这样子: 一,播放器 由阿里云转腾讯云,w ...

  4. 克服"水土不服",融云助攻小象直播杀破"出海重围"

    2016年是直播行业被资本疯狂追逐的一年,可至今却经历着“浪潮”褪去,洗刷的不止是中小型直播平台,就连熊猫TV等有资本加持的大平台都纷纷遭遇倒闭危机.然而,直播行业作为泛娱乐的模式之一,其实本身“未死 ...

  5. 融云SDK触达用户数破20亿 王者风范双倍展现

    11月1日,融云SDK触达用户数突破20亿,业务增长速度及用户覆盖量再创即时通讯云领域新高.自去年11月10日公布SDK触达用户数破10亿以来,融云仅用了一年时间,便取得了触达用户数翻倍的成绩,迅猛的 ...

  6. 融云红包全新升级,让App用户更便捷地用“钱”交流感情!

    随着移动互联网的飞速发展,如何增强社交关系.留住用户的心已成为移动社交化时代各类App持续探索的问题,除了接入即时通讯的能力,众多社交平台开始通过趣味性十足的红包功能为App中的社交场景赋能.当即时通 ...

  7. 几款web版整合(QQ、msn、icq、yahoo通、Gtalk等)即时聊天http://hi.baidu.com/ejie/blog/item/e89794ef9a9431efce1b3ebd.html

        直到近期为止,我们经常使用的即时聊天工具(QQ.msn等)了Web版,大家不用下载庞大软件,直接打开网页就能够与自己的好友聊天,很方便.在此将时汇总,便于大家查找,节约大家一点时间. 此都是官 ...

  8. 对接融云即时通讯组件SDK,轻松实现App聊天室

    我好像特别喜欢做聊天室类的东东,刚折腾完微软的SignalR又折腾App.本来想研究研究XMPP的,由于服务器的搭建问题,先采用一个第三方的吧,看看效果如何.听到弟弟说他们公司用到了融云,我也下载个S ...

  9. ThinkPHP 提供Auth 权限管理、支付宝、微信支付、阿里oss、友盟推送、融云即时通讯、云通讯短信、Email、Excel、PDF 等等

    多功能 THinkPHP 开源框架 项目简介:使用 THinkPHP 开发项目的过程中把一些常用的功能或者第三方 sdk 整合好,开源供亲们参考,如 Auth 权限管理.支付宝.微信支付.阿里oss. ...

随机推荐

  1. JavaEE开发之SpringMVC中的静态资源映射及服务器推送技术

    在上篇博客中,我们聊了<JavaEE开发之SpringMVC中的自定义拦截器及异常处理>.本篇博客我们继续的来聊SpringMVC的东西,下方我们将会聊到js.css这些静态文件的加载配置 ...

  2. 使用AF_INET实现点对点的通信示例

    作者:Younger Liu,本作品采用知识共享署名-非商业性使用-相同方式共享 3.0 未本地化版本许可协议进行许可. 1.    客户端(发送方) 操作流如下: (1) 使用AF_INET协议簇, ...

  3. CSS的position/float/display

    一.position position属性取值:static(默认).relative.absolute.fixed.inherit. postision:static:始终处于文档流给予的位置.它可 ...

  4. 分别用css3、JS实现图片简单的无缝轮播功效

    本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...

  5. OC中常见的结构体,以及NSNumber、NSValue、NSDate的使用

    常见的结构体 NSPoint和CGPoint NSSize和CGSize NSRect 和 CGRect NSPoint和CGPoint的使用 NSPoint和CGPoint是同义的 typedef ...

  6. 智能指针剖析(上)std::auto_ptr与boost::scoped_ptr

    1. 引入 C++语言中的动态内存分配没有自动回收机制,动态开辟的空间需要用户自己来维护,在出函数作用域或者程序正常退出前必须释放掉. 即程序员每次 new 出来的内存都要手动 delete,否则会造 ...

  7. java泛型探索——介绍篇

    1. 泛型出现前后代码对比 先来看看泛型出现前,代码是这么写的: List words = new ArrayList(); words.add("Hello "); words. ...

  8. web基础之会话技术

    一.会话技术之Cookie Cookie技术是将数据存储到客户端 1.怎样去向客户端写出一个cookie 1)创建Cookie对象 Cookie cookie = new Cookie(name,va ...

  9. 通过vmware 启动cloudera-quickstart-vm-5.10.0-0-vmware.zip镜像无法启动。

    解压cloudera-quickstart-vm-5.10.0-0-vmware.zip中找到cloudera-quickstart-vm-5.10.0-0-vmware.vmx文件打开注释点#msg ...

  10. Bootstrap实现轮播图

    第一步:设计轮播图容器:div.carousel,添加slide平滑切换,并定义id,方便后面采用data属性来触发 <div class='carousel slide' id="t ...