SDK接入步骤——腾讯云摘抄

1.准备工作

引入初始化脚本

<script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.2.1.js" charset="utf-8"></script>;

2.HTML里放置容器

<div id="id_test_video" style="width:100%; height:auto;"></div>

此div为播放区,可以由样式文件控制大小等

3.对接视频的播放

去指定的URL拉取音视频流，并将视频画面呈现到给定的容器中

（1）手机浏览器播放URL视频，支持PC以及手机浏览器上播放HLS（m3u8）协议的直播地址，不过HLS（m3u8）协议的视频虽然不兼容还不错(部分android手机不支持)，但其延迟非常高，大约20s以上的延迟：

var player = new TcPlayer('id_test_video', {
"m3u8": "http://2157.liveplay.myqcloud.com/2157_358535a.m3u8", //请替换成实际可用的播放地址
"autoplay" : true,      //iOS下safari浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
"coverpic" : "http://www.test.com/myimage.jpg",
"width" :  '480',//视频的显示宽度，请尽量使用视频分辨率宽度
"height" : '320'//视频的显示高度，请尽量使用视频分辨率高度
});

（2）PC上实现更低的延迟，PC浏览器支持flash：

var player =  new TcPlayer('id_test_video', {
"m3u8": "http://2157.liveplay.myqcloud.com/2157_358535a.m3u8",
"flv": "http://2157.liveplay.myqcloud.com/live/2157_358535a.flv", //增加了一个flv的播放地址，用于PC平台的播放 请替换成实际可用的播放地址
"autoplay" : true,      //iOS下safari浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
"coverpic" : "http://www.test.com/myimage.jpg",
"width" :  '480',//视频的显示宽度，请尽量使用视频分辨率宽度
"height" : '320'//视频的显示高度，请尽量使用视频分辨率高度
});

3.失败原因分析：

（1）视频源问题

         如果是直播URL，检查主播是否已经停止推流

         如果是点播URL，检查要播放的文件是否在服务器上

（2）本地网页调试

         腾讯云的Web播放器是不支持本地网页调试的，因为浏览器跨域问题。需要上传到服务器进行测试。

         前端工程师可以通过反向代理的方式对线上的页面进行本地代理以实现本地调试。

（3）手机兼容问题

         

（4）跨域安全问题

         PC浏览器的视频播放是基于Flash控件实现的，但是Flash控件会做跨域访问检查，在我们要播放的视频所存放的服务器没有部署跨域策略时才会碰到这个问题。

         解决办法:在视频服务器的根域名下的跨域配置文件crossdomain.xml中增加qq.com域名

<cross-domain-policy>
<allow-access-from domain="*.qq.com" secure="false"/>
</cross-domain-policy>

4.给播放器设置封面——coverpic

         1）简单封面设置，用图片作为封面

"coverpic" : "http://www.test.com/myimage.jpg"

         2）设置封面的展现样式

             给coverpic传入一个style对象设置封面的展现样式和图片地址src

             style支持样式：

                default：居中并且以这种图片的实际分辨率进行显示

                stretch：拉伸铺满播放器区域，图片可能变形

                cover：优先横向等比拉伸铺满播放器区域，图片某些部分可能无法显示在区域内

"coverpic" : {"style":"stretch", "src":"http://www.test.com/myimage.jpg"}

5.多清晰度设置

var player = new TcPlayer('id_test_video', {
"m3u8"      : "http://200002949.vod.myqcloud.com/200002949_b6ffc.f240.m3u8",//请替换成实际可用的播放地址
"m3u8_hd"   : "http://200002949.vod.myqcloud.com/200002949_b6ffc.f230.av.m3u8",
"m3u8_sd"   : "http://200002949.vod.myqcloud.com/200002949_b6ffc.f220.av.m3u8",
"autoplay"  : true,      //iOS下safari浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
"coverpic"  : "http://www.test.com/myimage.jpg",
});

6.错误提示语

var player = new TcPlayer('id_test_video', {
"m3u8"   : "http://200002949.vod.myqcloud.com/200002949_b6ffc.f0.m3u8",//请替换成实际可用的播放地址
"autoplay" : true,      //iOS下safari浏览器是不开放这个能力的
"coverpic" : "http://www.test.com/myimage.jpg",
"wording": {
    2032: "请求视频失败，请检查网络",
    2048: "请求m3u8文件失败，可能是网络错误或者跨域问题"
}
});