1 概念说明

  • 直播和点播 直播是指视频源是实时的，一旦主播停播了，这个地址就已经失去意义了，而且由于是实时直播，所以播放器在播直播视频的时候是没有进度条滴。 点播是指视频源是一个服务器上的文件，文件只要没有被提供方删除，就随时可以播放， 而且由于整个视频都在服务器上，所以播放器在播点播视频的时候是有进度条的哦。

  • 协议的支持（手机） Web播放器的视频播放能力本身不是网页代码实现的，而是靠浏览器的支持，所以其兼容性并不像我们想象的那么好，您必须要接受一个事实：不是所有的手机浏览器都能有符合预期的表现，有些手机浏览器甚至根本就不支持视频播放。>不是所有的手机浏览器都能有符合预期的表现，有些手机浏览器甚至根本就不支持视频播放。

    最常见的用于网页直播的视频源地址是以m3u8结尾的地址，我们称其为HLS (HTTP Live Streaming)，这是苹果推出的标准。由于苹果的影响力，目前各手机浏览器产品对这种格式的兼容性最好，但它有个天然的问题，就是延迟比较大，一般是20-30秒左右的延迟，没有办法，在手机浏览器上我们并没有其它选择。

  • 协议的支持（PC） 在PC上情况会好很多，因为PC上的浏览器目前还没有抛弃flash控件，而flash控件的开发商 Adobe 并不追求设计上的洁癖，所以flash支持的视频源格式挺多的，而且各浏览器上的flash控件都是Adobe它家自己开发，所以兼容性非常好（也是因为这个原因，意图推广 webrtc 和 HTML5 技术的 Google 在最新版的 Chrome 浏览器里默认禁用了 Flash）

    视频协议 用途 示例地址 PC浏览器 移动浏览器
    HLS(m3u8) 可用于直播 http://live.mydomain.com/xxxx/a.m3u8 支持 支持
    HLS(m3u8) 可用于点播 http://vod.mydomain.com/xxxx/b.m3u8 支持 支持
    FLV 可用于直播 http://live.mydomain.com/xxxx/a.flv 支持 不支持
    FLV 可用于点播 http://vod.mydomain.com/xxxx/b.flv 支持 不支持
    RTMP 只适用直播 http://live.mydomain.com/xxxx 支持 不支持
    MP4 只适用点播 http://vod.mydomain.com/xxx/a.mp4 支持 支持

2 使用步骤

2.1 成为开发者

申请开通微吼云账号，提供用户资料，微吼服务人员在后台为用户开通平台账号，账号开通后，用户即可登录，成为一名开发者。

2.2 创建应用

登录微吼云平台后，控制台选择应用管理，进入应用管理页面点击创建应用，根据页面提示信息，完成应用创建。应用创建完成，您可以在控制台界面找到在应用管理界面您可以找到 AppID。

2.3 添加服务

应用创建完成后，默认开通直播服务，在直播服务下直播管理的【直播配置】页面查看AppID

2.4 页面引用SDK文件

在需要播放视频的页面（包括PC或H5）中引入初始化脚本

<link rel="stylesheet" href="https://static.vhallyun.com/jssdk/videojs.min.css?v=1.0.0"></script><!--播放器默认样式，需要引用在包含在页面的head标签里-->
<script src="https://static.vhallyun.com/jssdk/dvideo-plugin.js?v=1.0.0"></script><!--依赖的播放器资源-->
<script src="https://static.vhallyun.com/jssdk/vhall-jssdk-player-1.0.0.js"></script>
<script src="https://static.vhallyun.com/jssdk/vhall-jssdk-base-1.0.0.js"></script>

注意：

  1. 直接用本地网页是调试不了的
  2. 上面所有文件都需要引用，而且顺序需要保持与上面一致
  3. 建议直接复制上面代码

2.5 页面创建播放器容器

在需要web播放的页面位置加入播放器对象容器,也就是放一个div，然后给它取个名字，比如: my-video 。之后推流回显画面都会在这个容器里渲染，容器的大小控制您可以使用div的属性进行控制，示例代码如下：

	<div id="my-video" style="width:100%; height:450px;"></div>

2.6 注册ready事件

Vhall.ready(function(){
    //todo
})

注意： 初始化完成之后，会执行ready回调事件，机制同jQuery ready事件，播放器调用逻辑需要写在此事件里。

2.7 初始化SDK配置

初始化配置：

 Vhall.config({
     appId :'',//应用 ID ,必填
     accountId :'',//第三方用户唯一标识,必填
     token:'',//token必填
 })

注意： appId获取方式：登陆微吼云>>进应用管理>>取得对应AppId token生成方式：通过API生成，生成accessToken接口说明