LivePlayer

H5直播播放器

Setup

cnpm i @xiaoe/live-player --save

API

配置项

|属性名|说明|类型|默认值 |-|-|-|- |wrapper|用于装载播放器的dom元素|String|必填项 |url|用于播放的视频地址，支持m3u8和mp4格式|String|必填项 |poster|视频播放前的封面图|String|null |isShowSpeed|全屏时是否展示倍速按钮(type=pull时该选项固定值为false)|Boolean|true |isCanDrag|是否允许拖拽进度条(限制往当前播放时间点之后拖动，不限制往前拖动)|Boolean|true |dragMaxTime|允许拖拽的最大播放进度(需配合isCanDrag)|Number|0 |isAutoPlay|是否尝试自动播放|Boolean|true |isAutoRotate|是否允许安卓设备全屏时自动旋转|Boolean|true |type|播放器模式。可选值为：pull-拉流模式|String|null |playerStyle|播放器风格。可选值为：1-竖屏直播播放器 2-横屏直播播放器|Number|2 |fullScreenMode|全屏方式1-假全屏(即宽高100%) 2-系统级全屏|Number|1 |isUseHls|安卓设备是否使用Hls|Boolean|false |isFastLive|是否快直播|Boolean|false |fastListenerUrl|快直播监听断流(快直播不提供断流回调，需额外传普通直播的m3u8)|String|null

回调函数

|函数名|说明|返回值 |-|-|- |onTimeupdate|视频播放位置改变时触发|currentTime(视频当前播放进度，单位：秒)、 duration(视频总时长，单位：秒) |onPlay|视频开始播放时触发|- |onPause|视频暂停时触发|- |onEnded|视频播放结束时触发|- |onError|视频加载错误时触发|errorCode 详细说明 |onHlsError|Hls错误回调(Hls.Events.ERROR)|errorType |onFastStatus|快直播状态回调|播放信息(Object) |onChangeSpeed|视频播放倍速改变时触发|视频当前播放倍速 |onOpenSpeed|打开/关闭倍速设置弹窗时触发|此时是否打开倍速设置弹窗(Boolean) |onOpenClear|打开/关闭清晰度设置弹窗时触发|此时是否打开清晰度设置弹窗(Boolean) |onBeforeClear|点击切换清晰度时立刻触发|此时清晰度对应的index和name(Object) |onClearChange|清晰度切换成功触发|此时清晰度对应的index和name(Object) |onFullScreen|视频全屏/退出全屏时触发|此时是否处于全屏状态(Boolean) |onScreenDirection|屏幕方向改变时触发|屏幕方向(1-竖屏, 2-横屏) |onRatioOrientation|第一次点击播放时触发|视频分辨率方向(1-竖向, 2-横向) |onNowPull|拉流/断流时触发|此时是否处于拉流状态(Boolean) |onMoveSlider|视频进度条拖动时触发|视频当前播放进度(单位：秒) |onStopSlider|视频进度条拖动停止后触发|视频当前播放进度(单位：秒) |onRestrictDrag|视频进度拖拽被禁止时触发|拖拽类型(1-滑动, 2-点击)、当前允许最大拖拽到的秒数 |onBtnsClick|视频非全屏时点击了底部按钮触发|点击按钮类型(speed-倍速, clear-清晰度, share-分享, arrow-收起箭头) |onGetVideoSrc|video 标签 src 属性有值后的回调|-

实例方法

|方法名|传参|说明|返回值 |-|-|-|- |getVideoEle|-|返回该组件的video元素|Video DOM |setFullScreen|-|播放器外部调用全屏/退出全屏|- |destroy|-|销毁组件|- |setAirPlay|callback|设置投屏按钮|- |changeClearHandle|清晰度选项的index(Number)|外部业务调用播放器内清晰度切换|- |changeSpeedHandle|要设置的倍速|外部业务调用播放器内倍速切换|-

Example

注意：务必要在引用该组件页面的 destroyed 或 beforeDestroy 钩子中，调用该组件的 destroy 方法

import { CustomVideo } from '@xiaoe/live-player';
// 根据配置项中，你设置的播放器风格(playerStyle)，引入不同的样式
import '@xiaoe/live-player/dist/css/index_normal.css'; // 普通播放器
// import '@xiaoe/live-player/dist/css/index.css'; // 竖屏直播播放器

<template>
    <div class="container">
        <div id="videoWrapper"></div>
    </div>
</template>

<script>
export default {
    name: '',
    data() {
        return {
            myVideo: '',
        }
    },
    mounted() {
        this.initVideo();
    },
    destroyed() {
        this.myVideo.destroy();
    },
    methods: {
        initVideo() {
            this.myVideo = new LivePlayer({
                wrapper: '#videoWrapper',
                poster: 'http://xxxxx.png',
                url: 'http://xxxx.mp4',
                isCanDrag: true,
                isShowSpeed: true,
                playerStyle: 2,
                type: null,
                onTimeupdate: (currentTime, duration) => {
                    console.log('=====>timeupdate', currentTime, duration);
                },
                onPlay: () => {
                    console.log('=====>play');
                },
                onPause: () => {
                    console.log('=====>pause');
                },
                onEnded: () => {
                    console.log('=====>ended');
                },
                onFastStatus: res => {
                    console.log('=====> 快直播回调', res);
                    /* res可能的值：
                     * { code: 0 }
                     * { code: -1, msg: 'pullStream error'} // 拉流失败
                     * { code: -2, msg: 'xxxx' } // 当前环境不兼容
                    */
                },
                onError: errorCode => {
                    console.log(`=====>errorCode = ${errorCode}`);
                },
                onHlsError: errorType => {
                    console.log(`=====>Hls errorType = ${errorType}`);
                },
                onChangeSpeed: speed => {
                    console.log(`=====>Set speed: ${speed}`);
                },
                onOpenSpeed: type => {
                    console.log(`=====>${type ? '打开' : '关闭'}倍速弹窗`);  
                },
                onOpenClear: type => {
                    console.log(`=====>${type ? '打开' : '关闭'}清晰度设置弹窗`);  
                },
                onFullScreen: isFull => {
                    console.log(`=====>${isFull ? '打开' : '关闭'}全屏`);
                },
                onScreenDirection: type => {
                    console.log(`=====>当前为${type === 1 ? '竖' : '横'}屏`);
                },
                onRatioOrientation: type => {
                    console.log(`=====>当前视频分辨率为${type === 1 ? '竖' : '横'}向`);
                },
                onNowPull: isPull => {
                    console.log(`=====>此时处于${isPull ? '拉流': '断流'}状态`);
                },
                onMoveSlider: time => {
                    console.log(`=====>拖动进度条，视频当前进度：${time}`);
                },
                onStopSlider: time => {
                    console.log(`=====>进度条拖动完毕，视频当前进度：${time}`);
                },
                onRestrictDrag: (type, currentMaxTime) => { // isCanDrag 为 false 时，此回调才会生效
                    console.log(`=====>${type === 1 ? '滑动' : '点击'}进度条被限制！当前允许最大拖拽到第${currentMaxTime}秒`);
                }
            });
            console.log(this.myVideo.getVideoEle()); // 获取 video 元素
            // 设置投屏按钮
            this.myVideo.setAirPlay(() => {
                console.log("=====> 投屏开启成功!");
            });
        },
    }
}
</script>