live-player-xiaoetest v1.0.67

LivePlayer

H5直播播放器

Setup

cnpm i @xiaoe/live-player --save

API

配置项

回调函数

实例方法

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>