> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# TcPlayer 播放器接入

## 业务需求：

直播过程中需要不断的拉流进行播放，遇到网络突然中断的情况时，直播推流中断会中断；此时因为播放器拉流失败无法正常播放而导致播放器会播放失败。当直播恢复推流恢复时候，播放器需要自动恢复拉流来自动恢复直播播放。综合了常用的播放器做对比，对比结果如下：

1. [**阿里云播放器（aliplayer）**](https://player.alicdn.com/aliplayer/index.html)推流中断时播放失败，此时其可以设置指定重复拉流次数的恢复拉流尝试，当达到尝试的次数时，播放器会报错，提示信息不是很明显，当再次恢复推流时候，会一直停留在播放失败的页面；
2. [**腾讯播放器（TcPlayerLite）**](https://cloud.tencent.com/document/product/881/20207)推流失败时有指定的错误提示【 **根据不同的错误码设置不同的错误提示**】，方便用户知晓直播状态；当直播失败时可以在播放界面显示视频封面，相对来说比较美观；
3. **aliplayer 不支持直播暂停**，**tcplayer 支持直播暂停**【因为当时 **Android** 手机的同层播放时，支持直播暂停，直播中断时，手机上会**不断尝试拉流**，直至正常播放】，因此为了达到与手机微信端一致的效果，就采取了此方案。
4. **aliplayer** 配置直播地址的参数是固定的【 **source** 】，直播地址没有要求；而 **tcplayer** 配置直播地址属性的参数是收到直播推流地址影响的【 **m3u8、flv** 等】，同时可以配置多个推流地址，在 **手机端** 和 **PC** 端会自动切换【浏览器支持 **flash** 的话会自动匹配 **flv** 格式的直播】。

## 代码配置：

1. 在 **head** 标签中引入播放器的 **cdn；**
2. 在页面创建播放器容器，样式自定义；
3. 初始化视频直播播放器。

```html title="初始化页面"
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <!-- TCPlayerLite 初始化cdn -->
        <script src="https://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.3.js"></script>
        <!-- or -->
        <script src="https://cloudcache.tencent-cloud.com/open/qcloud/video/vcplayer/TcPlayer-2.3.3.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- 初始化播放器 -->
            <div id="tc_palyer_lite" style="width:100%; height:auto;"></div>
        </div>
    </body>
</html>
```

**初始化直播播放器**

- 设置直播拉流地址和视频播放器封面；
- 设置 **H5** 兼容（**微信同层播放**设置）；
- 设置播放器错误码以及对应提示信息；
- 设置直播失败定时重连。

```javascript title="初始化播放器"
export default {
    name: "TcPlayer",
    data() {
        return {
            player: null,
            videoUrl:
                "https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8" /* 直播拉流地址 */,
            poster: "" /* 视频封面 */,
        };
    },
    mounted() {
        this.initPlayer();
    },
    methods: {
        // 初始化播放器
        initPlayer() {
            if (this.player) {
                this.player.destroy();
                this.player = null;
            }

            let options = {
                m3u8: this.videoUrl /* 播放地址 */,
                // mp4: "" /* 回看地址 */,
                // poster: this.poster /* 视频封面 */,
                live: false /* 是否直播 */,
                autoplay: true,
                poster: { style: "cover", src: this.poster },
                pausePosterEnabled: true /* 暂停时显示封面 默认为true */,
                wording: {
                    1002: "即将直播，请稍等",
                    2032: "请求视频失败，请检查网络",
                    2048: "请求m3u8文件失败，可能是网络错误或者跨域问题",
                },
                controls: "system", //default||'' 显示默认控件，none 不显示控件，system 移动端显示系统控件
                x5_player: true,
                x5_type: "h5-page",
                x5_fullscreen: true,
                listener: function (msg) {
                    // 播放失败，重新连接
                    if (msg.type == "error") {
                        setTimeout(() => {
                            this.player.load(); // 重连
                        }, 4000);
                    }
                },
            };
            // 初始化
            this.player = new TcPlayer("tc_player_view", options);
        },
    },
};
```

## 参数列表：

|  **参数**  |      **类型**     | **默认值** |                     **参数说明**                     |
| :------: | :-------------: | :-----: | :----------------------------------------------: |
|   m3u8   |      String     |    无    |                  原画 M3U8 播放 URL。                 |
|  m3u8_hd |      String     |    无    |                  高清 M3U8 播放 URL。                 |
|  m3u8_sd |      String     |    无    |                  标清 M3U8 播放 URL。                 |
|    flv   |      String     |    无    |                  原画 FLV 播放 URL。                  |
|  flv_hd  |      String     |    无    |                  高清 FLV 播放 URL。                  |
|  flv_sd  |      String     |    无    |                  标清 FLV 播放 URL。                  |
|    mp4   |      String     |    无    |                  原画 MP4 播放 URL。                  |
|  mp4_hd  |      String     |    无    |                  高清 MP4 播放 URL。                  |
|  mp4_sd  |      String     |    无    |                  标清 MP4 播放 URL。                  |
|   rtmp   |      String     |    无    |   原画 RTMP 播放 URL。 示例：`rtmp://xxxxxxxxxxxxxxx_`   |
|  rtmp_hd |      String     |    无    |  高清 RTMP 播放 URL。 示例：`rtmp://xxxxxxxxxxxxxxxx_hd` |
|  rtmp_sd |      String     |    无    | 标清 RTMP 播放 URL。 示例：`rtmp://xxxxxxxxxxxxxxxxx_sd` |
|   width  |      Number     |    无    |           **必选**，设置播放器宽度，单位为像素。 示例：640           |
|  height  |      Number     |    无    |           **必选**，设置播放器高度，单位为像素。 示例：480           |
|  volume  |      Number     |   0.5   |        设置初始音量，范围：0 到 1 \[v2.2.0+]。 示例：0.6        |
|   live   |     Boolean     |  false  |  **必选**，设置视频是否为直播类型，将决定是否渲染时间轴等控件，以及区分点直播的处理逻辑。  |
| autoplay |     Boolean     |  false  |         是否自动播放。（**备注：该选项只对大部分 PC 平台生效**）         |
|  poster  | String / Object |    无    |  预览封面，可以传入一个图片地址或者一个包含图片地址 src 和显示样式 style 的对象。  |

## 实例方法：

|                                                        **方法**                                                       |                      **参数**                     |        **返回值**        |                         **说明**                         |           **示例**           |
| :-----------------------------------------------------------------------------------------------------------------: | :---------------------------------------------: | :-------------------: | :----------------------------------------------------: | :------------------------: |
|                                                        play()                                                       |                        无                        |           无           |                         开始播放视频。                        |        player.play()       |
|                                                       pause()                                                       |                        无                        |           无           |                         暂停播放视频。                        |       player.pause()       |
|                                                     togglePlay()                                                    |                        无                        |           无           |                       切换视频播放状态 。                       |     player.togglePlay()    |
|                                                     mute(muted)                                                     |                 \{Boolean} \[可选]                | true,false \{Boolean} |                  切换静音状态，不传参则返回当前是否静音。                  |      player.mute(true)     |
|                                                     volume(val)                                                     |              \{int} 范围：0 到 1 \[可选]              |        范围：0 到 1       |                    设置音量，不传参则返回当前音量 。                   |     player.volume(0.3)     |
|                                                      playing()                                                      |                        无                        | true,false \{Boolean} |                       返回是否在播放中 。                       |      player.playing()      |
|                                                      duration()                                                     |                        无                        |         \{int}        |                        获取视频时长 。                        |                            |
|                                   （**备注：只适用于点播，需要在触发 loadedmetadata 事件后才可获取视频时长**）                                  |                player.duration()                |                       |                                                        |                            |
|                                                  currentTime(time)                                                  |                   \{int} \[可选]                  |         \{int}        |                设置视频播放时间点，不传参则返回当前播放时间点 。               |                            |
|                                                   （**备注：只适用于点播** ）                                                  |               player.currentTime()              |                       |                                                        |                            |
|                                                  fullscreen(enter)                                                  |                 \{Boolean} \[可选]                | true,false \{Boolean} | 调用全屏接口(Fullscreen API)，不支持全屏接口时使用伪全屏模式，不传参则返回值当前是否是全屏。 |                            |
|                                        （**备注：移动端系统全屏没有提供 API，也无法获取系统全屏状态** ）                                        |             player.fullscreen(true)             |                       |                                                        |                            |
|                                                      buffered()                                                     |                        无                        |         0 到 1         |              获取视频缓冲数据百分比。 （**备注：只适用于点播**）              |      player.buffered()     |
|                                                      destroy()                                                      |                        无                        |           无           |                   销毁播放器实例\[v2.2.1+]。                   |      player.destroy()      |
|                                                   switchClarity()                                                   |                  \{String}\[必选]                 |           无           |           切换清晰度，传值 "od"、"hd"、"sd" \[v2.2.1+]。          | player.switchClarity('od') |
|                                                      load(url)                                                      |                  \{String}\[必选]                 |           无           |                       通过视频地址加载视频。                      |                            |
| （**备注：该方法只能加载对应播放模式下支持的视频格式，Flash 模式支持切换 RTMP、FLV、HLS 和 MP4 ，H5 模式支持 MP4、HLS 和 FLV（HLS、FLV 取决于浏览器是否支持）**\[v2.2.2+]） | player.load(`[http://xxx.mp4](http://xxx.mp4)`) |                       |                                                        |                            |

## 错误码：

|  **Code** |             **提示语**            |                                   **说明**                                   |
| :-------: | :----------------------------: | :------------------------------------------------------------------------: |
|     1     |     网络错误，请检查网络配置或者播放链接是否正确。    |                                  H5 提示的错误。                                 |
|     2     |     网络错误，请检查网络配置或者播放链接是否正确。    |                              视频格式 Web 播放器无法解码。                             |
| H5 提示的错误。 |                                |                                                                            |
|     3     |             视频解码错误。            |                                  H5 提示的错误。                                 |
|     4     |        当前系统环境不支持播放该视频格式。       |                                  H5 提示的错误。                                 |
|     5     |        当前系统环境不支持播放该视频格式。       |           播放器判断当前浏览器环境不支持播放传入的视频，可能是当前浏览器不支持 MSE 或者 Flash 插件未启用。           |
|     10    | 请勿在 file 协议下使用播放器，可能会导致视频无法播放。 |                                      -                                     |
|     11    |       使用参数有误，请检查播放器调用代码。       |                                      -                                     |
|     12    |           请填写视频播放地址。           |                                      -                                     |
|     13    |          直播已结束，请稍后再来。          |       RTMP 正常播放过程中触发事件（NetConnection.Connect.Closed）。**Flash 提示的错误。**      |
|    1001   |     网络错误，请检查网络配置或者播放链接是否正确。    |            网络已断开（NetConnection.Connect.Closed）。**Flash 提示的错误。**            |
|    1002   |       获取视频失败，请检查播放链接是否有效。      | 拉取播放文件失败（NetStream.Play.StreamNotFound），可能是服务器错误或者视频文件不存在。**Flash 提示的错误。** |
|    2032   |       获取视频失败，请检查播放链接是否有效。      |                                Flash 提示的错误。                                |
|    2048   |        无法加载视频文件，跨域访问被拒绝。       |                 请求 M3U8 文件失败，可能是网络错误或者跨域问题。**Flash 提示的错误。**                |

:::info 视频播放器详细信息

- 「参数配置」
- 「示例方法」
- 「错误码」
- 请查阅 - 腾讯官方文档

:::