2023年11月28日发(作者：)
Web点播播放器1.0——腾讯sdk⽹页点播播放器
功能介绍
本⽂档是介绍腾讯云视频点播服务的⽹页播放器（Web SDK）的使⽤说明，它可帮助腾讯云客户直接使⽤经过验证的视频播放能⼒，通过
灵活的接⼝，快速同⾃有Web应⽤集成，以实现桌⾯应⽤播放功能。同时本SDK还提供在WEB端上传视频的能⼒。
该SDK所播放的⽂件受限于全局防盗链功能定义。详细内容请查看官⽹FAQ安全功能相关说明。
该⽂档⾯向考虑使⽤腾讯云视频点播播放器Web SDK进⾏开发并具备Javascript语⾔基础的开发⼈员。
能⼒⽀持
播放格式
WEB SDK播放视频格式⽀持：
播放格式PC浏览器环境⼿机浏览器环境
HLS（m3u8）⽀持⽀持
MP4⽀持⽀持
FLV不⽀持不⽀持
Android 系统兼容性问题
不像iPhone上只有⼀个Safari浏览器，Android上的系统标配浏览器有⾮常多的实现版本，所以Android⼿机浏览器的兼容是⼀个业
界难题，故此表格中所⽰的⼿机浏览器格式⽀持情况⽐不适⽤于所有Android⼿机。
上传格式
SDK上传视频格式⽀持：
标准格式详细格式
step2 :上传⽂件
点播服务开通之后，进⼊ 就可以上传新的视频⽂件了，因为我们本篇⽂档主要介绍播放器的使⽤，所以这样做是为了让您先有个⾃⼰的在
线视频地址。如果您没有开通点播服务，这个页⾯是进不去的。
step3 :获取ID
上传完视频之后，您就可以视频管理页⾯查到⽂件的id了，这个是播放器播放视频的最基本信息，与此同时，本款播放器有质量统计功能，
在使⽤之前需要先确认APPID，您的APPID也可以在视频管理页⾯查看到。
下图中的两个ID，左边⼀个是视频⽂件的ID，另⼀个就是您的APPID了。
step4 :页⾯准备
在需要播放视频的页⾯（包括PC或H5）中引⼊初始化脚本：
var player = new ("id_video_container", {
"file_id": "61041838", "app_id": "125132611", "width":640, "height":480 });
该构造函数将会⽣成⼀个播放器对象，并且根据file_id和app_id找到对应的视频进⾏播放，您可以使⽤播放器对象player 对播放器进⾏控
制。播放器对象的参数选项下⽅API⽅法总览有详细介绍。
完整实例代码
更多的情况 case 1 :有视频地址但是没有file_id 及app_id的情况下怎么播放视频？ 这时需要⽤到传视频播放地址的功能，这时不需要传file_id 及app_id。JS⽤例如下: var option = { "width": 640, "height": 480, //...可选填其他属性 "third_video": { "urls":{ 20 : "/4"//演⽰地址，请替换实际地址 } } }; var player = new qcVideo 其中参数third_video的 urls属性是个Object 可以传多个不同清晰度的视频地址，具体参数说明在API⽅法总览中，。 备注：urls 中⾄少包含⼀个视频地址 case 2 :如何使⽤"弹幕"功能? 在播放器初始化完成后，调⽤播放器对象的addBarrage(barrage) ⽅法，可以为视频添加弹幕。具体参数的说明。 例⼦：给正在播放的视频添加两条弹幕 var barrage = [ {"type":"content", "content":"hello world", "time":"1"}, {"type":"content", "content":"居中显⽰", "time":"1", "style":"C64B03;30","position":"center"} ]; rage 备注：弹幕功能仅在前端实现，后台⽀持请⾃⾏开发。弹幕只在PC Flash播放器中⽣效，H5暂时不具备弹幕功能 case 3 :播放结束时做⼀些操作，如视频推荐，应该怎么做？ 使⽤listener参数，传⼊playStatus事件的回调函数。当播放状态变更时，会调⽤此函数。具体回调函数参数的说明参考API总览， var option ={ "file_id":"61041838", "app_id":"125132611", "width":800, "height":720, "remember":1 //...可选填其他属性 }; var player = new ("id_video_container", option); case 5 :如何让播放器在⽹页尺⼨变化时跟着变化尺⼨ 使⽤播放器对象的resize(width, height)，可以动态修改播放器尺⼨。 (640, 480); case 6 :如何播放在云视频管理⾥设置了密码的视频？ 和播放普通视频⼀样，SDK会⾃动显⽰输⼊密码对话框，输⼊密码后即可播放。 备注：密码功能只对传视频ID播放⽅式有效。 case 7 :如何⽣成通过⼆维码或者链接传播的链接？ 例⼦（请替换链接中的appid和fileid）： case 8 :如何指定播放视频的清晰度？ 在确认视频拥有该清晰度的情况下，使⽤definition参数指定播放视频的清晰度，适⽤于视频ID和传地址播放两种⽅式。 例⼦： var option ={ "file_id":"261415426", "app_id":"1251606588", "definition":30, "width":800, "height":700 }; var player = new ("id_video_container", option); API⽅法总览 1.构造函数 (id, option, listener); id: String ; 必选参数 ; 页⾯放置播放器的容器ID，可以⾃由定义。 option: Object ; 必选选参数 ; 播放器的参数设置选项，具体选项有: disable_dragNumber0是否允许拖动时间轴，0: 允许拖拽，1: 禁⽌拖拽 参数类型默认值参数说明 stretch_fullNumber0 备注：该选项只对PC平台Flash播放器⽣效 是否等⽐拉伸视频⾄铺满播放器0: 不拉伸,1: 拉伸全屏 备注：该选项只对PC平台Flash播放器⽣效 试看功能，例如设置：60，60秒后停⽌播放，并且触发“playStatus”事件stop_timeNumber⽆ 是否开启续播功能，0：关闭，1：开启，开启后将会记录这个视频上⼀次未看完的时间点，下⼀次继续播 rememberNumber0放。 备注：该选项只对PC平台Flash播放器⽣效 变速播放，例如设置2表⽰2倍速度播放，0.5表⽰慢正常速度⼀倍播放。 备注：该选项暂时只对H5播放器⽣效 是否隐藏H5的设置按钮，true：隐藏，false：不隐藏hide_h5_settingBooleanfalse 是否隐藏H5的错误提⽰， 备注：该选项暂时只对H5播放器⽣效 Window模式不⽀持其他页⾯元素覆盖在flash播放器上⾯，如需要可以修改为opaque 或其他flash wmode playbackRateNumber1 dragPlayfunction 函数名称类型说明 返回值：拖动播放的位置（单位秒） 例⼦： function(second){ ... } 备注：该事件只对PC平台Flash播放器⽣效 2.获取参数和状态 构造函数返回的播放器对象具有以下获取参数和状态的⽅法 ⽅法名返回值说明 getVolumeNumber，取值范围（0 到 1）获取当前⾳量 getDurationNumber，单位秒获取当前视频总时长 getCurrentTimeNumber，单位秒获取当前播放位置 isSeekingBoolean ; true 为”加载中”当前播放状态是否 “加载中” isSuspendedBoolean ; true 为”暂停中”当前播放状态是否 “暂停中” isPlayingBoolean ; true 为”播放中”当前播放状态是否 “播放中” isPlayEndBoolean ; true 为”播放结束”当前播放状态是否 “播放结束” getWidthNumber(int)获取当前播放器宽度 getHeightNumber(int)获取当前播放器⾼度 getClarityNumber(int) ( 1:”⼿机”, 2:“标清”, 3:“⾼清”, 4:“超清”)获取当前视频的清晰度 getAllClaritysArray addBarrage(barrage)"style": "C64B03;35",// 分号分割，第⼀项颜⾊值，第⼆项字体⼤⼩ (可选) ⽅法说明 "postion":"center" //固定位置 center: 居中，bottom: 底部， up: 顶上 (可选) }, ... ] 功能：添加弹幕 返回：Int 备注：弹幕仅在前端实现，后台功能请⾃⾏开发。该功能只在PC Flash播放器中⽣效 功能：关闭弹幕，关闭后重新调⽤addBarrage可开启弹幕。 closeBarrage()返回：Int 备注：弹幕仅在前端实现，后台功能请⾃⾏开发。该功能只在PC Flash播放器中⽣效 这些设置⽅法的统⼀返回码是： 错误码含义 200操作成功 QQ浏览器下⽆法在盖住视频 解答：浏览器接管了H5的视频播放功能，X5内核视频播放使⽤了⾃研的播放器，考虑⽤户体验，浏览器使⽤了统⼀的播放界⾯。
发布评论