/document/product/267/5706
功能介绍
本文档是介绍腾讯云视频点播服务的网页播放器（Web SDK）的使用说明，它可帮助腾讯云客户直接使用经过验证的视频播放能力，通过灵活的接口，快速同自有Web应用集成，以实现桌面应用播放功能。同时本SDK还提供在WEB端上传视频的能力。
该SDK所播放的文件受限于全局防盗链功能定义。详细内容请查看官网FAQ安全功能相关说明。
该文档面向考虑使用腾讯云视频点播播放器Web SDK进行开发并具备Javascript语言基础的开发人员。
能力支持
播放格式
WEB SDK播放视频格式支持：
Android 系统兼容性问题
不像iPhone上只有一个Safari浏览器，Android上的系统标配浏览器有非常多的实现版本，所以Android手机浏览器的兼容是一个业界难题，故此表格中所示的手机浏览器格式支持情况比不适用于所有Android手机。
上传格式
SDK上传视频格式支持：
点播平台的转码服务
由于MP4和HLS（m3u8） 是目前在PC浏览器和手机浏览器上支持程度相对较好的格式，所以腾讯云的视频点播平台最终会把上传的视频发布为 MP4和HLS（m3u8） 格式。
平台兼容
为手机浏览器和PC浏览器写两套代码是非常吃力的事情，但如果您使用本款播放器，同一段代码可以自动实现PC浏览器和手机浏览器的自适应切换，播放器内部会自动区分平台使用最优的播放方案。例如：PC平台优先使用Flash 播放器以适应多种视频格式的情况，而手机浏览器上会使用HTML5技术实现视频播放。
准备工作
step1 :开通服务
首先您需要注册一个腾讯云账号，然后开通点播服务。
step2 :上传文件
点播服务开通之后，进入点播视频管理就可以上传新的视频文件了，因为我们本篇文档主要介绍播放器的使用，所以这样做是为了让您先有个自己的在线视频地址。如果您没有开通点播服务，这个页面是进不去的。
step3 :获取ID
上传完视频之后，您就可以视频管理页面查到文件的id了，这个是播放器播放视频的最基本信息，与此同时，本款播放器有质量统计功能，在使用之前需要先确认APPID，您的APPID也可以在视频管理页面查看到。
下图中的两个ID，左边一个是视频文件的ID，另一个就是您的APPID了。
step4 :页面准备
在需要播放视频的页面（包括PC或H5）中引入初始化脚本：
<script src="///open/qcloud/video/h5/h5connect.js" charset="utf-8"></script>;
本地文件限制
本地文件是不能用这款播放器播放的，因为有跨域问题，播放器一定要挂IP或者域名访问，这也是为什么需要您先上传一个视频文件获取在线播放地址的原因。
添加播放器
经过下面两个简单的步骤，您就可以在您的网页上添加一个视频播放器了。
step 1 :添加播放器容器
在需要展示播放器的页面位置加入播放器容器，例如：在index.html中加入如下代码（容器id以及宽高都可以自定义）
<div id="id_video_container" style="width:100%; height:auto;"></div>;
step 2 :创建Player 对象
接下来在页面引入的Javascript脚本中，创建一个播放器对象，这时将使用播放器的构造函数
var player = new qcVideo.Player("id_video_container", {"file_id": "1465197896261041838", "app_id": "125132611", "width":640, "height":480 });
该构造函数将会生成一个播放器对象，并且根据file_id和app_id找到对应的视频进行播放，您可以使用播放器对象player 对播放器进行控制。播放器对象的参数选项下方API方法总览有详细介绍。
完整实例代码
<!DOCTYPE html><html><head> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/> <title>点播</title> </head> <body> <div id="id_video_container" style="width:100%; height:auto;"></div> <script src="///open/qcloud/video/h5/h5connect.js" charset="utf-8"></script> <script type="text/javascript"> (function () { var player = new qcVideo.Player("id_video_container", { "file_id": "1465197896261041838", "app_id": "125132611", "width":640, "height":480 }); })() </script> </body> </html>
更多的情况
case 1 :有视频地址但是没有file_id 及app_id的情况下怎么播放视频？
这时需要用到传视频播放地址的功能，这时不需要传file_id 及app_id。JS用例如下:
var option = {"width": 640,"height": 480, //...可选填其他属性 "third_video": { "urls":{ 20 : "http://208./204.mp4"//演示地址，请替换实际地址 } } }; var player = new qcVideo.Player("id_video_container", option);
其中参数third_video的 urls属性是个Object 可以传多个不同清晰度的视频地址，具体参数说明在API方法总览中，直达链接。
备注：urls 中至少包含一个视频地址
case 2 :如何使用"弹幕"功能?
在播放器初始化完成后，调用播放器对象的addBarrage(barrage) 方法，可以为视频添加弹幕。具体参数参考API方法总览的说明。
例子：给正在播放的视频添加两条弹幕
var barrage = [{"type":"content", "content":"hello world", "time":"1"}, {"type":"content", "content":"居中显示", "time":"1", "style":"C64B03;30","position":"center"} ]; player.addBarrage(barrage);
备注：弹幕功能仅在前端实现，后台支持请自行开发。弹幕只在PC Flash播放器中生效，H5暂时不具备弹幕功能
case 3 :播放结束时做一些操作，如视频推荐，应该怎么做？
使用listener参数，传入playStatus事件的回调函数。当播放状态变更时，会调用此函数。具体回调函数参数的说明参考API总览，直达链接
例子：
var option ={"file_id":"1465197896261041838","app_id":"125132611", "width":800, "height":720 //...可选填其他属性 }; var listener = { playStatus: function (status){ //TODO console.log(status); } }; var player = new qcVideo.Player("id_video_container", option, listener);
case 4 :让播放器记住上次观看的时间点，下次从这个时间点继续播放该怎么做？
option中设置remember参数为1，播放器将会记录该视频最后一次未播放完的的时间点，下次播放会从这个时间点继续播。
例子：
var option ={"file_id":"1465197896261041838","app_id":"125132611", "width":800, "height":720, "remember":1 //...可选填其他属性 }; var player = new qcVideo.Player("id_video_container", option);
case 5 :如何让播放器在网页尺寸变化时跟着变化尺寸
使用播放器对象的resize(width, height)，可以动态修改播放器尺寸。
player.resize(640, 480);
case 6 :如何播放在云视频管理里设置了密码的视频？
和播放普通视频一样，SDK会自动显示输入密码对话框，输入密码后即可播放。
备注：密码功能只对传视频ID播放方式有效。
case 7 :如何生成通过二维码或者链接传播的链接？
例子（请替换链接中的appid和fileid）：
http://play./qrplayer.html?appid=1251769111&fileid=14651978969211156176147&autoplay=0&sw=640&sh=426&\$def=20&wmode=transparent…
http://play./iplayer.html?appid=1251769111&fileid=14651978969211156176147&autoplay=0&sw=1800&sh=1200&def=20&wmode=transparent…
case 8 :如何指定播放视频的清晰度？
在确认视频拥有该清晰度的情况下，使用definition参数指定播放视频的清晰度，适用于视频ID和传地址播放两种方式。参数说明链接
例子：
var option ={"file_id":"14651978969261415426","app_id":"1251606588", "definition":30, "width":800, "height":700 }; var player = new qcVideo.Player("id_video_container", option);
API方法总览
1.构造函数
qcVideo.Player(id, option, listener);
id: String ;必选参数 ;
页面放置播放器的容器ID，可以自由定义。
option: Object ;必选选参数 ;
播放器的参数设置选项，具体选项有:
listener: Object ; 可选参数 ; 播放状态变化回调函数列表
2.获取参数和状态
构造函数返回的播放器对象具有以下获取参数和状态的方法
3.设置和动作
构造函数返回的播放器对象具有以下设置方法
这些设置方法的统一返回码是：
视频文件上传功能
用户可以使用点播Web SDK上传视频，以帮助腾讯云视频用户通过Web上传视频文件。
该SDK当前支持HTML5上传（不支持HTML5的浏览器暂不支持上传）
具体操作方法请阅：/sdk/upload.html
问题排查
错误码列表
SDK使用过程中出现的异常code对照表，如遇到未在列表中的异常code，请联系我们的客服，客服会安排工程师进行解决。
常见问题
为什么H5播放视频拉伸变形了？
解答：H5并不具备拉伸视频的能力，请检查播放器的容器宽高是否设置正确
QQ浏览器显示下载视频，怎么屏蔽？
解答：手机QQ浏览器的内核限制，JS无法干预，同样在UC等浏览器的内核也提供了自动嗅探视频提供下载的功能。需要联系浏览器开发商进行关闭。
QQ浏览器下无法在盖住视频
解答：浏览器接管了H5的视频播放功能，X5内核视频播放使用了自研的播放器，考虑用户体验，浏览器使用了统一的播放界面。相关信息参考QQ浏览器文档说明
在调用isPlaying()等方法时没有获取到正确的状态信息
解答：在移动端的某些浏览器和webview中，播放视频会被浏览器自带的内核接管，sdk将无法获得正确的播放状态。
设置了自动播放，但在移动端无法自动播放？
解答：目前大部分手机浏览器由于数据流量等原因，默认不自动加载媒体文件，播放视频时需要用户触发操作。
iOS系统下视频自动全屏播放
解答：iOS系统由于webkit设置原因，默认视频全屏播放，如果您的视频需要在APP内实现内联播放，可以设置webkit-playsinline属性。目前iOS10以下版本的Safari无法禁止视频自动全屏。
为什么在 PC Chrome 中Flash播放器会有两个播放按钮？
解答：从Chrome 42版本开始将不再自动播放Flash, 只对主要的Flash内容进行自动播放，其它的Flash内容将被暂停播放，除非用户决定去手动点开它。
如果觉得《Web点播播放器1.0——腾讯sdk网页点播播放器》对你有帮助，请点赞、收藏，并留下你的观点哦！
