hy-mse-player

播放器属性

||~名称||~类型||~说明|| || url || string || 只支持流媒体 websocket 协议 || || container|| string | HTMLElement|| 播放器容器 || || live|| boolean || 预览流:true,回放流:false || || loop || boolean || 循环播放 || || autoPlay || boolean || 是否自动播放 || || hasAudio || boolean || 是否加载音频 || || control || boolean || 是否显示控制栏 || || muted || boolean || 是否静音 || || volume || number || 音量 0~1|| || width || number || 播放器宽度 || || height || number || 播放器高度 || || speed || number || 播放速率 0.0625、0.125 、0.25、0.5、1、2、4、8、16 || || filled || boolean || 是否播放画面填充播放容器 || || screenshot || boolean || 是否允许抓图 || ||decoderURL|| string || 解码器地址 ||

播放器接口

API 需要在 ready 事件发生之后或创建播放器 reday 回调里， H5 可以在创建播放器构造函数的回调函数里调用，比如：

player.on('ready',function(e) {
    player.play();
 });

||~名称||~参数||~说明|| ||play||||播放视频|| ||pause||||暂停视频|| ||seeked||time||跳转到某个时刻进行播放，time 的单位为秒。|| ||setPlayerSize||w，h||设置播放器大小|| ||setSpeed||number||设置速率只有回放流才有效|| ||screenshot|| ||抓图返回 base64|| ||setScale||||设置画面比例,需要与 filled 属性为 true 配合使用|| ||flow||number||0：主码流，1：子码流。切换主子码流，只对预览流有效,返回 Promise 对象|| ||setTimes||startTime:number,endTime:number,playing:boolean||单位秒，只对回放流有效，重新设置播放的绝对开始时间和绝对结束时间,playing 的绝对定位后是否播放,返回 Promise 对象|| ||destroy||||注销播放器||

其他说明

实例化播放器

 const player= new HYPlayer({
      url: url,
      container: canvasRef.current,
      live: true,
      loop: false,
      autoPlay: true,
      hasAudio: true,
      control: false,
      muted: false,
      volume: 1,
      width: playerRef.current.offsetWidth,
      height: playerRef.current.offsetHeight,
      screenshot: true,
      filled: true,
      decoderURL: "./player/core/decoder.js"
    });

获取当前时间

player.currentTime

设置静音

player.muted =true

设置音量

player.volume = 0.7

播放器事件

timeupdate：返回播放器的当前相对时间(time:nunber)

ready ：请求流成功后会触发该事件，特别注意只要重连 websocket 都会触发 ready 事件

error：错误码事件，流加载失败后服务端返回的错误码

备注说明: 预览流自动播放，只能通过 autoPlay 属性设置为 true 实现，因为预览流，执行 play()方法后才会去请求流。预览流自动播放，解码器注册成功后执行 play()方法，才开始请求流数据。

回放流自动播放，支持两种模式，一种设置 autoPlay 属性为 true。还有一种方式，通过监听 ready 事件，当触发 ready 事件后，执行 play()方法。 回放流是实例化后先请求 websocket，执行心跳，等待 contunie 指令后，才开始接收流数据。

在请求 websocket 的时候，需要提示正在请求中，监听 ready 事件即可完成，触发 ready 后表示 websocket 连接成功，并可以接收流数据。

异常情况处理 当发送的指令的状态为 continue，并且已经 onclose 的话，就判断为异常结束。 //待处理 可以发送 exEnded 事件，表示异常结束。 并且重新播放的时候，需要重新拉流。

react 的例子

import React, { useEffect, useRef } from "react";
import { HYPlayer } from "hy-mse-player";

enableMapSet();
function Player(props) {
  const playerRef = useRef();
  const playRef = useRef();
  useEffect(() => {
    playRef.current = new HYPlayer({
      url: "ws://192.168.16.82:32200/flv/play_real/607531997851336b236f91f3143436cb/0/0",
      container: playerRef.current,
      live: true,
      loop: false,
      autoPlay: true,
      hasAudio: true,
      control: true,
      muted: false,
      cors: true,
      volume: 0.7,
      width: 600,
      height: 400,
      speed: 1,
      duration: 0,
    });
  }, []);

  return (
    <>
      <div ref={playerRef}></div>
    </>
  );
}

export default Player;