腾讯会议渲染视频播放器组件（tm-video）_办公协同解决方案
功能描述
客户端支持在 Webview 上渲染原生视频播放器组件（v3.10.0 起支持同层渲染视频播放器组件）。说明：需要先完成接口鉴权才能调用，包括调用 binduser 或者创建自定义标签，否则会鉴权失败，无法展示视频（鉴权请查看 JS-API 接口鉴权）
属性说明
| 属性 | 类型 | 默认值 | 必填 | 说明 |
| id | String | – | 否 | ID 定义了一个全文档唯一的标识符（ID）。其规定 HTML 元素的唯一的 ID。 |
| src | String | – | 否 | 视频链接。 |
| controls | Boolean | false | 否 | 是否在视频底部显示默认控制面板。允许用户控制视频的播放，包括静音，暂停和恢复播放等。 |
说明：src（视频链接）为非必填属性，初始化好后可以通过调用 videoContext.load({ src: ‘xxxxx’ }) 接口去加载。另外 src（视频链接）必须是一个完整的 URL（统一资源定位符），包括协议部分、域名部分、文件名部分等（例如：https://website-1253513412.cos.ap-guangzhou.myqcloud.com/static/video/BigBuckBunny.mp4）
相关JS-API接口
wemeet.createVideoContext
接口描述：创建 tm-video 上下文 VideoContext 对象。参数说明：
| 参数名称 | 参数类型 | 参数描述 |
| id | String | tm-video 组件的 ID。 |
VideoContext
接口描述：VideoContext 实例，可通过 wemeet.createVideoContext 获取。VideoContext 通过 ID 跟一个 tm-video 组件绑定，操作对应的 tm-video 组件。
VideoContext 方法
videoContext.load({ src: ‘xxx’ })
接口描述：加载需要播放的视频链接。参数描述：
| 参数名称 | 参数类型 | 必填 | 参数描述 |
| src | String | 否 | 视频链接。 |
// 加载需要播放的视频链接。videoContext.load({ src: "https://website-1253513412.cos.ap-guangzhou.myqcloud.com/static/video/BigBuckBunny.mp4" });
videoContext.play() 播放视频videoContext.pause() 暂停播放videoContext.stop() 停止播放videoContext.mute() 静音videoContext.unmute() 解除静音
videoContext.seek({ time: xxx })
功能描述：跳转到指定的播放时间。参数说明：
| 参数名称 | 参数类型 | 必填 | 参数描述 |
| time | Number | 是 | 需要跳转的指定播放时间，单位为 ms（毫秒）。 |
videoContext.seek({ time: 10 * 1000 });
videoContext.getSrc() 获取当前视频链接videoContext.getPlaytime() 获取当前视频的播放时间点，单位 ms（毫秒）videoContext.getDuration() 获取当前播放段的时长，单位 ms（毫秒）videoContext.getVolume() 获取当前音量，约定取值范围是[0,1]，如果为0则是静音状态（muted）videoContext.getMutedVolume() 获取静音前的音量
VideoContext 事件
通过 videoContext.on(‘event-name’, callbackFunction) 方法去监听 VideoContext 的回调事件。例如：
videoContext.on('on-play', (res) => { console.info(res);});videoContext.on('on-loaded-metadata', (res) => { console.info(res);});videoContext.on('on-ended', (res) => { console.info(res);});
播放器事件列表（TmVideoPlayEvent）
on-play 播放事件回调on-pause 暂停事件回调on-waiting 视频加载中事件回调on-loaded-metadata 视频信息事件回调回调参数：
| 参数名称 | 参数类型 | 参数描述 |
| width | Number | 视频内容宽 pixel。 |
| height | Number | 视频内容高 pixel。 |
| duration | Number | 媒体时长 ms（毫秒）。 |
on-error 播放错误事件回调回调参数：
| 参数名称 | 参数类型 |
| type | Number |
| code | Number |
| arg1 | Number |
| arg2 | Number |
on-ended 播放完毕事件回调on-time-update 播放进度事件回调回调参数：
| 参数名称 | 参数类型 | 参数描述 |
| currentTime | Number | 当前进度 ms（毫秒）。 |
| duration | Number | 媒体时长 ms（毫秒）。 |
on-seek 跳转到指定的播放时间点事件回调回调参数：
| 参数名称 | 参数类型 | 参数描述 |
| to | Number | 完成 seek 的进度 ms（毫秒）。 |
代码示例
注意：需要在 js-api 接口鉴权成功之后，才能在页面中添加 tm-live-video、 tm-video和 tm-audio 等自定义标签。否则自定义标签在调用 wemeet.createLiveVideoContext、wemeet.createVideoC ontext、wemeet.createAudioContext 初始化接口会报”Need to call JSAPI config first.”的错误。通过 js-api 去加载需要播放的视频链接：
import * as wemeet from '@tencent/wemeet-js-sdk';// wemeet.createVideoContext(id) 接口需要传入 标签的 id。const videoContext = await wemeet.createVideoContext('xxx');// 加载需要播放的视频链接。videoContext.load({ src: "https://website-1253513412.cos.ap-guangzhou.myqcloud.com/static/video/BigBuckBunny.mp4" });// 播放视频。videoContext.play();// 暂停播放。videoContext.pause();// 停止播放。videoContext.stop();// 静音。videoContext.mute();// 解除静音。videoContext.unmute();// 跳转到指定的播放时间。参数 time 的单位为 ms（毫秒）videoContext.seek({ time: 10 * 1000 });// 获取当前视频链接videoContext.getSrc();// 获取当前视频的播放时间点，单位 ms(毫秒)videoContext.getPlaytime();// 获取当前播放段的时长，单位 ms(毫秒)videoContext.getDuration();// 获取当前音量，约定取值范围是[0,1]，如果为0则是静音状态（muted）videoContext.getVolume();// 获取静音前的音量videoContext.getMutedVolume();
说明：调用 wemeet.createVideoContext(id) 接口时会与 html 页面中 id 所对应的 tm-video 标签进行绑定，然后返回对应的 videoContext 实例去调用 tm-video 标签的 js-api。但是若 html 页面中的 tm-video 标签发生过被 html 销毁（移除）再重新创建，这时就需要重新调 wemeet.createVideoContext(id) 接口获取新的 videoContext 实例。
对腾讯办公协同的解决方案有疑惑？想了解解决方案收费？ 联系解决方案专家
腾讯云限时活动1折起，即将结束： 马上收藏
同尘科技为腾讯云授权服务中心，购买腾讯云享受折上折，更有现金返利:同意关联，立享优惠
阿里云解决方案也看看？： 点击对比阿里云的解决方案
