## Tcplayer 播放器 組件內部集成了[騰訊云Web超級播放器 TCPlayerLite](https://cloud.tencent.com/document/product/881/20207#.E5.BC.80.E5.90.AF.E4.BC.98.E5.85.88-h5-.E6.92.AD.E6.94.BE.E6.A8.A1.E5.BC.8F)。 使用時無需再次引入騰訊云播放器sdk，直接使用此播放器組件，傳入相應參數即可。 常用于視頻回放和即時直播，如對海康、大華等監控設備抓取的視頻進行回放或實時觀看。 ### 代碼示例 基礎用法  ```html <cvu-tcplayer m3u8="http://1258876183.vod2.myqcloud.com/fe5259fbvodtranscq1258876183/f950151d5285890788091139489/drm/v.f220.m3u8" width="500" height="380" ></cvu-tcplayer> ``` 自動播放 > 設置`autoplay`屬性開啟自動播放  ```html <cvu-tcplayer m3u8="http://1258876183.vod2.myqcloud.com/fe5259fbvodtranscq1258876183/f950151d5285890788091139489/drm/v.f220.m3u8" width="500" height="380" autoplay ></cvu-tcplayer> ``` ### props | 屬性 | 說明 | 類型 | 默認值 | | --- | --- | --- | --- | | m3u8 | 視頻地址，支持點播、直播 | String | 無 | | mp4 | 視頻地址，僅支持點播 | String | 無 | | webrtc | 視頻地址，僅支持直播 | String | 無 | | flv | 視頻地址，支持點播、直播 | String | 無 | | rtmp | 視頻地址，僅支持直播 | String | 無 | | autoplay | 是否自動播放 | Boolean | false | | preload | 是否自動預加載 | String | auto | | live | 是否開啟直播 | Boolean | false | | width | 播放器寬度 | Number \/Strnig | 500 | | height | 播放器高度 | Number\/String | 380 | | volume | 音量 | Number | 0.3 | | poster | 封面 | String\/Object | 無 | | controls | default 顯示默認控件，none 不顯示控件，system 移動端顯示系統控件。 | String | 'default' | | x5_type | 聲明啟用 H5同層播放器 | String | h5-page | | x5_orientation | 播放器支持的方向，可選值：0（`landscape`橫屏），1（`portraint`豎屏），2（`landscape` /`verbar`/`portrait`跟隨手機自動旋轉）| Number | 無 | ### methods | 方法名 | 說明 | 返回值 | 示例 | | --- | --- | --- | --- | | play | 開始播放 | 無 | palyer.play() | | pause | 暫停播放 | 無 | player.pause() | | duration | 獲取視頻時長 | 視頻時長 | player.duration() | | currentTime | 設置視頻播放時間點 | 無 | player.currentTime(time) | | fullscreen | 是否全屏播放 | 無 | player.fullscreen(true/false) | | destroy | 銷毀播放器 | 無 | player.destroy() |