100ms HLS 播放器
这个 HMSHLSPlayer 是一款由100ms提供的HLS播放器,可用于播放HLS流. 玩家使用URL和视频元素来播放流.
如何整合 HLS 播放器 SDK
您可以使用节点包管理器或纱线将 HMSHLSPlayer sdk 添加到您的工程中. 使用 @ 100mslive/hls- player (英语) 作为软件包源.
npm i @100mslive/hls-player
HMSHLSP 制定方法
下面显示玩家曝光的所有方法
interface IHMSHLSPlayer {
/**
* @returns get html video element
*/
getVideoElement(): HTMLVideoElement;
/**
* set video volumne
* @param { volume } - in range [0,100]
*/
setVolume(volume: number): void;
/**
*
* @returns returns HMSHLSLayer which represents current
* quality.
*/
getLayer(): HMSHLSLayer | null;
/**
*
* @param { HMSHLSLayer } layer - layer we want to set the stream to.
* set { height: auto } to set the layer to auto
*/
setLayer(layer: HMSHLSLayer): void;
/**
* move the video to Live
*/
seekToLivePosition(): Promise<void>;
/**
* play stream
* call this when autoplay error is received
*/
play(): Promise<void>;
/**
* pause stream
*/
pause(): void;
/**
* It will update the video element current time
* @param seekValue Pass currentTime in second
*/
seekTo(seekValue: number): void;
}
如何使用玩家的 HLS 流
您创建 HMSHLSPlayer 实例如下 :
import { HMSHLSPlayer } from '@100mslive/hls-player';
// hls url should be provided which player will run.
// second parameter is optional, if you had video element then pass to player else we will create one.
const hlsPlayer = new HMSHLSPlayer(hlsURL, videoEl)
// if video element is not present, we will create a new video element which can be attached to your ui.
const videoEl = hlsPlayer.getVideoElement();
如何暂停并恢复播放
您在 HlsPlayer 实例上调用播放/暂停如下 :
// return Promise<void>
hmsPlayer.play()
hmsPlayer.pause()
如何向前或向后寻找
你用这个 seekTo 以下举例说明hlsPlayer上寻求任何视频位置的方法:
// seekValue Pass currentTime in second
hmsPlayer.seekTo(5)
如何寻求生存
你用这个 seekToLivePosition 在hlsPlayer实例上使用如下方法进行活页:
hmsPlayer.seekToLivePosition()
如何改变 HLS 播放的音量
使用音量属性来更改 HLS 播放器的音量 。 音量级别为0-100. 音量默认为100.
hlsPlayer.setVolume(50);
将视频质量级别设定为 Hls 播放器
/**
*
* @returns returns HMSHLSLayer which represents current
* quality.
*/
hlsPlayer.getLayer(): HMSHLSLayer | null;
/**
*
* @param { HMSHLSLayer } layer - layer we want to set the stream to.
* set { height: auto } to set the layer to auto
*/
hlsPlayer.setLayer(layer: HMSHLSLayer): void;
// quality interface
interface HMSHLSLayer {
readonly bitrate: number;
readonly height?: number;
readonly id?: number;
readonly width?: number;
url: string;
resolution?: string;
}
从 HMSHLSP 显示器曝光的事件
我们正在揭露我们玩家的事件.
enum HMSHLSPlayerEvents {
TIMED_METADATA_LOADED = 'timed-metadata',
SEEK_POS_BEHIND_LIVE_EDGE = 'seek-pos-behind-live-edge',
CURRENT_TIME = 'current-time',
AUTOPLAY_BLOCKED = 'autoplay-blocked',
MANIFEST_LOADED = 'manifest-loaded',
LAYER_UPDATED = 'layer-updated',
ERROR = 'error',
PLAYBACK_STATE = 'playback-state',
STATS = 'stats',
}
回放状态
enum HLSPlaybackState {
playing,
paused,
}
interface HMSHLSPlaybackState {
state: HLSPlaybackState;
}
hlsPlayer.on(HMSHLSPlayerEvents.PLAYBACK_STATE, (event: HMSHLSPlayerEvents, data: HMSHLSPlaybackState): void => {});
HLS 点数
interface HlsPlayerStats {
/** Estimated bandwidth in bits/sec. Could be used to show connection speed. */
bandwidthEstimate?: number;
/** The bitrate of the current level that is playing. Given in bits/sec */
bitrate?: number;
/** the amount of video available in forward buffer. Given in ms */
bufferedDuration?: number;
/** how far is the current playback from live edge.*/
distanceFromLive?: number;
/** total Frames dropped since started watching the stream. */
droppedFrames?: number;
/** the m3u8 url of the current level that is being played */
url?: string;
/** the resolution of the level of the video that is being played */
videoSize?: {
height: number;
width: number;
};
}
hlsPlayer.on(HMSHLSPlayerEvents.STATS, (event: HMSHLSPlayerEvents, data: HlsPlayerStats): void => {});
明确装入的数据
Hls 播放器将会提供一个表, 一旦装入url, 它将提供类似不同质量层的数据 .
interface HMSHLSManifestLoaded {
layers: HMSHLSLayer[];
}
hlsPlayer.on(HMSHLSPlayerEvents.MANIFEST_LOADED, (event: HMSHLSPlayerEvents, data: HMSHLSManifestLoaded): void => {});
质量变化数据
interface HMSHLSLayerUpdated {
layer: HMSHLSLayer;
}
hlsPlayer.on(HMSHLSPlayerEvents.LAYER_UPDATED, (event: HMSHLSPlayerEvents, data: HMSHLSLayerUpdated): void => {});
现场活动
玩家会告诉你玩家是否在直播视频
interface HMSHLSStreamLive {
isLive: boolean;
}
hlsPlayer.on(HMSHLSPlayerEvents.SEEK_POS_BEHIND_LIVE_EDGE, (event: HMSHLSPlayerEvents, data: HMSHLSStreamLive): void => {});
HLS 计时元数据
HLS 播放器将解析并发送定时-元数据.
interface HMSHLSCue {
id?: string;
payload: string;
duration: number;
startDate: Date;
endDate?: Date;
}
hlsPlayer.on(HMSHLSPlayerEvents.TIMED_METADATA_LOADED, (event: HMSHLSPlayerEvents, data: HMSHLSCue): void => {});
处理错误
interface HMSHLSException {
name: string,
message: string,
description: string,
isTerminal: boolean, // decide if player error will automatically restart(if false)
}
hlsPlayer.on(HMSHLSPlayerEvents.ERROR, (event: HMSHLSPlayerEvents, data: HMSHLSException): void => {});
hlsPlayer.on(HMSHLSPlayerEvents.AUTOPLAY_BLOCKED, (event: HMSHLSPlayerEvents, data: HMSHLSException): void => {});
当前时间
hlsPlayer.on(HMSHLSPlayerEvents.CURRENT_TIME, (event: HMSHLSPlayerEvents, data: number): void => {});
事件使用示例
以下是如何使用hls玩家事件的例子
const isPlaying = false;
const playbackEventHandler = data => isPlaying = data.state === HLSPlaybackState.paused;
hlsPlayer.on(HMSHLSPlayerEvents.PLAYBACK_STATE, playbackEventHandler);
高级 玩家示例
下面是一个简单的例子,其中hls-player将被用于您的应用中.
// Vanilla JavaScript Example
import { HLSPlaybackState, HMSHLSPlayer, HMSHLSPlayerEvents } from "@100mslive/hls-player";
const videoEl; // reference for video element
const hlsUrl; // reference to hls url
// variable to handle ui and take some actions
let isLive = true, isPaused = false, isAutoBlockedPaused = false;
const handleError = data => console.error("[HLSView] error in hls", data);
const handleNoLongerLive = ({ isLive }) => isLive = isLive;
const playbackEventHandler = data => isPaused = (data.state === HLSPlaybackState.paused);
const handleAutoplayBlock = data => isAutoBlockedPaused = !!data;
const hlsPlayer = new HMSHLSPlayer(hlsUrl, videoEl);
hlsPlayer.on(HMSHLSPlayerEvents.SEEK_POS_BEHIND_LIVE_EDGE, handleNoLongerLive);
hlsPlayer.on(HMSHLSPlayerEvents.ERROR, handleError);
hlsPlayer.on(HMSHLSPlayerEvents.PLAYBACK_STATE, playbackEventHandler);
hlsPlayer.on(HMSHLSPlayerEvents.AUTOPLAY_BLOCKED, handleAutoplayBlock);
// React Example
import { HLSPlaybackState, HMSHLSPlayer, HMSHLSPlayerEvents } from "@100mslive/hls-player";
import { useEffect, useState } from 'react';
const videoEl; // reference for video element
const hlsUrl; // reference to hls url
// variable to handle ui and take some actions
const [isVideoLive, setIsVideoLive] = useState(true);
const [isHlsAutoplayBlocked, setIsHlsAutoplayBlocked] = useState(false);
const [isPaused, setIsPaused] = useState(false);
useEffect(() => {
const handleError = data => console.error("[HLSView] error in hls", data);
const handleNoLongerLive = ({ isLive }) => {
setIsVideoLive(isLive);
};
const playbackEventHandler = data =>
setIsPaused(data.state === HLSPlaybackState.paused);
const handleAutoplayBlock = data => setIsHlsAutoplayBlocked(!!data);
const hlsPlayer = new HMSHLSPlayer(hlsUrl, videoEl);
hlsPlayer.on(HMSHLSPlayerEvents.SEEK_POS_BEHIND_LIVE_EDGE, handleNoLongerLive);
hlsPlayer.on(HMSHLSPlayerEvents.ERROR, handleError);
hlsPlayer.on(HMSHLSPlayerEvents.PLAYBACK_STATE, playbackEventHandler);
hlsPlayer.on(HMSHLSPlayerEvents.AUTOPLAY_BLOCKED, handleAutoplayBlock);
return () => {
hlsPlayer.off(HMSHLSPlayerEvents.SEEK_POS_BEHIND_LIVE_EDGE, handleNoLongerLive);
hlsPlayer.off(HMSHLSPlayerEvents.ERROR, handleError);
hlsPlayer.off(HMSHLSPlayerEvents.PLAYBACK_STATE, playbackEventHandler);
hlsPlayer.off(HMSHLSPlayerEvents.AUTOPLAY_BLOCKED, handleAutoplayBlock);
}
}, []);