H5Player
FAQ
FAQ
简体中文

直通视频接入

1. API 接口

1.1. createLivePlayer

描述

创建直通播放实例

实例

  • livePlayer = playerjs.createLivePlayer(dom: domElement, options: Object)

参数详情

dom：

div DOM 容器，需要设置样式的宽高，不然视频可能塌缩或出现其他样式问题。

options：

字段 类型 描述 默认值 是否必填
devId string 设备唯一标识 是
channel string 通道号，从 1 开始，取值范围为 1~32 是
streamType string 码流类型： MAJOR：主码流； MINOR：子码流； MAJOR 否
hasEncrypt number AES 解密类型：0 平台解密；1 前端解密 0 否
mediaProtocol string 媒体协议：HTTP_FLV；WS_FLV;1.3.9新增 initial HTTP_FLV 否
quality string 清晰度：SMOOTH：流畅 STANDARD：标准 CLARITY：清晰 STANDARD 否
hasAudio number 是否携带音频，默认打开音频： 0：不携带 1：携带 1 否
optId string 业务操作 id，可用于操作留痕记录等 “” 否
expireTime number 地址过期时间，默认为 20 秒 20 否
hasTranscode number 是否需要 H265 视频转码，默认会转码：0 => 不转码， 1 => 转码 0 否
addrType number 地址类型：1：外网地址；2：内网地址； 1 否

1.2. 方法

1.2.1. load

描述

直通播放器获取播放 flv 地址并加载视频流

示例

  • livePlayer.load()

1.2.2. destory

描述

销毁直通播放器

示例

  • livePlayer.destory()

1.2.3. getStartTime

描述

获取直通播放的开始时间，返回客户端 utc 时间戳，单位 ms。

示例

  • livePlayer.getStartTime()

注：如果要获取结束时间，请参考 HOOKS 中 afterDestory

1.2.4. getDuration

描述

获取直通播放的时长，单位 ms。

示例

  • livePlayer.getDuration()

1.3. 属性

1.3.1. streamType：string

描述

获取播放器码流类型 | 设置切换的码流类型

示例

  • 获取：livePlayer.streamType
  • 设置：livePlayer.streamType = 'MAJOR'

设置取值范围：MAJOR（主码流）、MINOR（子码流）

1.3.2. volume：number

描述

获取播放器各通道音量 | 设置播放器通道音量

示例

  • 获取：livePlayer.volume
  • 设置：livePlayer.volume = 0.5

设置取值范围：Number，预期通道音量，范围 0 - 1

1.3.3. aspectRatio：number

描述

设置播放器画面比例

示例

  • livePlayer.aspectRatio = “full”

设置取值范围：String，full: 铺满、origin: 原始比例、比例模式，如：16:9, 4:3, 1:1

1.3.4. （readonly）status：string

描述

获取播放器当前播放状态

示例

  • 获取：livePlayer.status

获取值状态包括：

  • INIT 播放器创建完成
  • CANPLAY 视频已准备好开始播放
  • PLAY 播放中
  • DESTORY 已销毁

2.扩展功能接入

扩展功能

3. 接入示例

<script src="./streamax-player.js"></script>
<script>
    const StPlayer = H5Player;
    StPlayer.config = {
        httpProtocol: 'http',
        ip: '192.168.132.72',
        port: 21250,
    };
    StPlayer.defaultHeaders = {
        _appId: '1',
        _tenantId: '2',
    }
    let livePlayer = null;
    // 打开直通
    function play() {
        if (livePlayer) return;
        const divDom = document.getElementById('div');
        // 初始化直通播放器
        livePlayer = StPlayer.createLivePlayer(divDom, {
            devId: '03d430b6365943f1b02bdde73aceddf8',
            streamType: 'MAJOR',
            channel: '1'
        });
        livePlayer.load();
        livePlayer.hooks.afterLoaded.tap('loaded', () => {
            livePlayer.play();
        });
    }
    // 关闭直通
    function closeVideo() {
        if (livePlayer) {
            livePlayer.destory();
            livePlayer = null;
        }
    }
</script>
目录