hm-ng-video/fesm5/hm-ng-video.js

（1）引入 npm 包，在==package.json==里面添加：

import videojs from 'video.js';
import { Component, ViewChild, Input, ElementRef, ViewEncapsulation, EventEmitter, Output, Renderer2, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

/**
 * @fileoverview added by tsickle
 * Generated from: lib/hm-ng-video.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
var HmNgVideoComponent = /** @class */ (function () {
    function HmNgVideoComponent(el, renderer) {
        this.el = el;
        this.renderer = renderer;
        this.PauseEventListener = new EventEmitter(); // 暂停回调
        // 暂停回调
        this.PlayingEventListener = new EventEmitter(); // 开始播放回调
        // 开始播放回调
        this.WaitingEventListener = new EventEmitter(); // 缓冲回调
        // 缓冲回调
        this.ErrorEventListener = new EventEmitter(); // 错误回调
        // 错误回调
        this.DataLoadedEventListener = new EventEmitter(); // 数据加载完成回调
        // 数据加载完成回调
        this.CanPlayEventListener = new EventEmitter(); // 可以播放回调
        // 可以播放回调
        this.ReLoadVideoEventListener = new EventEmitter(); // 重新加载
        // 重新加载
        this.FullScreenToggeleEventListener = new EventEmitter(); // 切换全屏
        // 切换全屏
        this.liveLoaded = false;
    }
    /**
     * @param {?} type
     * @return {?}
     */
    HmNgVideoComponent.prototype.createDom = /**
     * @param {?} type
     * @return {?}
     */
    function (type) {
        var _this = this;
        if (type === "file") {
            this.fileVideo.nativeElement.innerHTML = "<video id='" + this.className + "-fileVideo' class='video-js vjs-big-play-centered'  controls muted preload='none' x-webkit-airplay='true' webkit-playsinline='isiPhoneShowPlaysinline' playsinline='isiPhoneShowPlaysinline' x5-playsinline='true' x5-video-player-type='h5'></video>";
        }
        else {
            /** @type {?} */
            var guide = "<div class='loading " + this.className + "-loading'><img src='" +
                (this.loadingSrc || "") +
                "' alt='' ></div>";
            /** @type {?} */
            var error = "<div class='error " + this.className + "-error'><span>" +
                (this.errorContent || "") +
                "</span></div>";
            this.liveVideo.nativeElement.innerHTML =
                "<video id='" + this.className + "-liveVideo' class='video-js vjs-big-play-centered'  controls muted preload='none' x-webkit-airplay='true' webkit-playsinline='isiPhoneShowPlaysinline' playsinline='isiPhoneShowPlaysinline' x5-playsinline='true' x5-video-player-type='h5'></video>" +
                    guide +
                    error;
            this.el.nativeElement
                .querySelector("." + this.className + "-error")
                .addEventListener("click", (/**
             * @return {?}
             */
            function () {
                _this.setBgVisible("error", false);
                _this.createLivePlayer(true);
            }));
        }
    };
    /**
     * @return {?}
     */
    HmNgVideoComponent.prototype.init = /**
     * @return {?}
     */
    function () {
        var _this = this;
        this.liveLoaded = false;
        // 只播放其中一种就传一种类型的option
        if (this.fileOptions) {
            this.createDom("file");
            /** @type {?} */
            var fileVideoEl = this.el.nativeElement.querySelector("#" + this.className + "-fileVideo");
            this.filePlayer = videojs(fileVideoEl, Object.assign(this.fileOptions, {
                autoplay: this.autoplay,
                errorDisplay: false,
                controlBar: {
                    playToggle: true,
                    volumePanel: false,
                    // 不需要静音按钮
                    pictureInPictureToggle: false,
                    // 不需要画中画
                    fullscreenToggle: false,
                },
            }));
            this.setDefaultProperty(this.filePlayer);
            this.filePlayer.on("error", (/**
             * @param {?} $event
             * @return {?}
             */
            function ($event) {
                _this.ErrorEventListener.emit($event);
                console.log("文件流出错了！");
                _this.dispose(_this.filePlayer);
                _this.fileOptions = null;
                _this.createLivePlayer(true, true);
            }));
            this.filePlayer.on("playing", (/**
             * @param {?} $event
             * @return {?}
             */
            function ($event) {
                _this.PlayingEventListener.emit($event);
                if (!_this.livePlayer) {
                    _this.createLivePlayer(true); // 文件流和直播流都存在的情况下，如果不是自动播放，则强行创造自动播放的直播流
                }
            }));
            this.filePlayer.on("pause", (/**
             * @param {?} $event
             * @return {?}
             */
            function ($event) {
                _this.PauseEventListener.emit($event);
            }));
        }
        else {
            this.createLivePlayer(); // 如果没有文件流，则按照设置的是否自动播放执行
        }
    };
    // 创建直播流 ,内部传就按照内部传的，不传则根据调用的决定
    // 创建直播流 ,内部传就按照内部传的，不传则根据调用的决定
    /**
     * @param {?=} isAutoPlay
     * @param {?=} isLoading
     * @return {?}
     */
    HmNgVideoComponent.prototype.createLivePlayer = 
    // 创建直播流 ,内部传就按照内部传的，不传则根据调用的决定
    /**
     * @param {?=} isAutoPlay
     * @param {?=} isLoading
     * @return {?}
     */
    function (isAutoPlay, isLoading) {
        var _this = this;
        if (!this.liveOptions) {
            return;
        }
        this.createDom("live");
        if (isLoading) {
            this.setBgVisible("loading", true);
        }
        /** @type {?} */
        var liveVideoEl = this.el.nativeElement.querySelector("#" + this.className + "-liveVideo");
        /** @type {?} */
        var startTime = 0;
        /** @type {?} */
        var endTime = 0;
        this.livePlayer = videojs(liveVideoEl, Object.assign(this.liveOptions, {
            autoplay: isAutoPlay ? isAutoPlay : this.autoplay,
            errorDisplay: false,
            liveui: true,
            controlBar: {
                playToggle: true,
                volumePanel: false,
                // 不需要静音按钮
                pictureInPictureToggle: false,
                // 不需要画中画
                fullscreenToggle: false,
            },
        }));
        this.addFullScreen();
        this.setDefaultProperty(this.livePlayer);
        this.livePlayer.on("loadstart", (/**
         * @param {?} $event
         * @return {?}
         */
        function ($event) {
            console.log("直播流开始load");
            startTime = new Date().getTime();
            // this.setBgVisible("loading", true);
            if (!_this.isVideoLoadingTimeout) {
                _this.isVideoLoadingTimeout = setTimeout((/**
                 * @return {?}
                 */
                function () {
                    if (_this.livePlayer &&
                        _this.livePlayer.readyState() !== 3 &&
                        _this.livePlayer.readyState() !== 4) {
                        _this.openModal();
                        _this.ErrorEventListener.emit("overtime");
                        console.log("加载超时！");
                    }
                }), _this.maxLoadTime || 15000);
            }
        }));
        this.livePlayer.on("loadedmetadata", (/**
         * @param {?} $event
         * @return {?}
         */
        function ($event) {
            endTime = new Date().getTime();
            console.log("直播流加载成功");
            _this.setBgVisible("loading", false);
            _this.DataLoadedEventListener.emit(Object.assign($event, { bufferTime: endTime - startTime }));
        }));
        this.livePlayer.on("canplaythrough", (/**
         * @param {?} $event
         * @return {?}
         */
        function ($event) {
            if (_this.livePlayer.readyState() === 3 ||
                _this.livePlayer.readyState() === 4) {
                setTimeout((/**
                 * @return {?}
                 */
                function () {
                    if (_this.filePlayer) {
                        _this.dispose(_this.filePlayer);
                    }
                    _this.liveLoaded = true;
                    _this.setBgVisible("loading", false);
                }), 1000);
                _this.CanPlayEventListener.emit($event);
            }
            console.log(_this.livePlayer.readyState(), "canplaythrough");
        }));
        this.livePlayer.on("playing", (/**
         * @param {?} $event
         * @return {?}
         */
        function ($event) {
            console.log("直播流正在播放！");
            _this.destroyTimeout();
            _this.setBgVisible("loading", false);
            _this.PlayingEventListener.emit($event);
        }));
        this.livePlayer.on("error", (/**
         * @param {?} $event
         * @return {?}
         */
        function ($event) {
            _this.ErrorEventListener.emit($event);
            console.log("直播流出错了！");
            _this.openModal();
        }));
        this.livePlayer.on("pause", (/**
         * @param {?} $event
         * @return {?}
         */
        function ($event) {
            _this.PauseEventListener.emit($event);
        }));
        this.livePlayer.on("timeupdate", (/**
         * @param {?} $event
         * @return {?}
         */
        function ($event) {
            if (!_this.isVideoBreak) {
                if (_this.livePlayer.readyState() !== 3 &&
                    _this.livePlayer.readyState() !== 4) {
                    _this.WaitingEventListener.emit($event);
                    _this.isVideoBreak = setTimeout((/**
                     * @return {?}
                     */
                    function () {
                        if (_this.livePlayer &&
                            _this.livePlayer.readyState() !== 3 &&
                            _this.livePlayer.readyState() !== 4) {
                            _this.openModal();
                            _this.ErrorEventListener.emit("overtime");
                            console.log("缓冲超时！");
                        }
                    }), _this.maxLoadTime || 15000);
                }
            }
        }));
    };
    // 获取player实例
    // 获取player实例
    /**
     * @return {?}
     */
    HmNgVideoComponent.prototype.getFilePlayer = 
    // 获取player实例
    /**
     * @return {?}
     */
    function () {
        return this.filePlayer || undefined;
    };
    /**
     * @return {?}
     */
    HmNgVideoComponent.prototype.getLivePlayer = /**
     * @return {?}
     */
    function () {
        return this.livePlayer || undefined;
    };
    // 默认配置
    // 默认配置
    /**
     * @param {?} player
     * @return {?}
     */
    HmNgVideoComponent.prototype.setDefaultProperty = 
    // 默认配置
    /**
     * @param {?} player
     * @return {?}
     */
    function (player) {
        player.playsinline(true);
        //player.crossOrigin("anonymous");
    };
    // 销毁
    // 销毁
    /**
     * @param {?} player
     * @return {?}
     */
    HmNgVideoComponent.prototype.dispose = 
    // 销毁
    /**
     * @param {?} player
     * @return {?}
     */
    function (player) {
        if (!player) {
            return;
        }
        if (!player.isDisposed()) {
            player.dispose();
            player = undefined;
        }
    };
    // 销毁定时器
    // 销毁定时器
    /**
     * @return {?}
     */
    HmNgVideoComponent.prototype.destroyTimeout = 
    // 销毁定时器
    /**
     * @return {?}
     */
    function () {
        clearTimeout(this.isVideoBreak);
        clearTimeout(this.isVideoLoadingTimeout);
        clearInterval(this.fullScreenTimer);
        this.isVideoBreak = undefined;
        this.isVideoLoadingTimeout = undefined;
        this.fullScreenTimer = undefined;
    };
    // 全部销毁
    // 全部销毁
    /**
     * @return {?}
     */
    HmNgVideoComponent.prototype.destroy = 
    // 全部销毁
    /**
     * @return {?}
     */
    function () {
        this.destroyTimeout();
        this.dispose(this.filePlayer);
        this.dispose(this.livePlayer);
    };
    // 绑定错误事件
    // 自定义错误显示方式
    // 0,1,2,3,4,5
    // MEDIA_ERR_CUSTOM、
    // MEDIA_ERR_ABORTED、取回过程被用户中止
    // MEDIA_ERR_NETWORK、当下载时发生错误
    // MEDIA_ERR_DECODE、当解码时发生错误
    // MEDIA_ERR_SRC_NOT_SUPPORTED、不支持音频/视频
    // MEDIA_ERR_ENCRYPTED // 被加密
    // 错误弹窗
    // 绑定错误事件
    // 自定义错误显示方式
    // 0,1,2,3,4,5
    // MEDIA_ERR_CUSTOM、
    // MEDIA_ERR_ABORTED、取回过程被用户中止
    // MEDIA_ERR_NETWORK、当下载时发生错误
    // MEDIA_ERR_DECODE、当解码时发生错误
    // MEDIA_ERR_SRC_NOT_SUPPORTED、不支持音频/视频
    // MEDIA_ERR_ENCRYPTED // 被加密
    // 错误弹窗
    /**
     * @return {?}
     */
    HmNgVideoComponent.prototype.openModal = 
    // 绑定错误事件
    // 自定义错误显示方式
    // 0,1,2,3,4,5
    // MEDIA_ERR_CUSTOM、
    // MEDIA_ERR_ABORTED、取回过程被用户中止
    // MEDIA_ERR_NETWORK、当下载时发生错误
    // MEDIA_ERR_DECODE、当解码时发生错误
    // MEDIA_ERR_SRC_NOT_SUPPORTED、不支持音频/视频
    // MEDIA_ERR_ENCRYPTED // 被加密
    // 错误弹窗
    /**
     * @return {?}
     */
    function () {
        this.fileOptions = null;
        this.destroy();
        this.setBgVisible("loading", false);
        this.setBgVisible("error", true);
    };
    // 设置加载背景/错误背景显示隐藏
    // 设置加载背景/错误背景显示隐藏
    /**
     * @param {?} type
     * @param {?} isShow
     * @return {?}
     */
    HmNgVideoComponent.prototype.setBgVisible = 
    // 设置加载背景/错误背景显示隐藏
    /**
     * @param {?} type
     * @param {?} isShow
     * @return {?}
     */
    function (type, isShow) {
        /** @type {?} */
        var el = type === "loading"
            ? this.el.nativeElement.querySelector("." + this.className + "-loading")
            : this.el.nativeElement.querySelector("." + this.className + "-error");
        this.renderer.setStyle(el, "display", isShow ? "block" : "none");
    };
    // 判断是ios设备
    // 判断是ios设备
    /**
     * @return {?}
     */
    HmNgVideoComponent.prototype.isIOS = 
    // 判断是ios设备
    /**
     * @return {?}
     */
    function () {
        /** @type {?} */
        var u = navigator.userAgent;
        /** @type {?} */
        var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
        console.log("ios", isIOS);
        return isIOS;
    };
    // 添加自定义全屏和播放按钮
    // 添加自定义全屏和播放按钮
    /**
     * @return {?}
     */
    HmNgVideoComponent.prototype.addFullScreen = 
    // 添加自定义全屏和播放按钮
    /**
     * @return {?}
     */
    function () {
        var _this = this;
        /** @type {?} */
        var vjsButtonComponent = videojs.getComponent("Button");
        videojs.registerComponent("FullScreenButton", videojs.extend(vjsButtonComponent, {
            handleClick: (/**
             * @return {?}
             */
            function () {
                if (!_this.livePlayer.isFullscreen()) {
                    try {
                        _this.toFullScreen();
                        if (_this.isIOS()) {
                            _this.fullScreenTimer = setInterval((/**
                             * @return {?}
                             */
                            function () {
                                if (!_this.livePlayer.isFullscreen()) {
                                    // 退出了全屏
                                    _this.FullScreenToggeleEventListener.emit(false);
                                    _this.destroy();
                                    _this.createLivePlayer(true);
                                    // clearInterval(this.fullScreenTimer);
                                    // setTimeout(() => {
                                    //   this.livePlayer.play();
                                    // }, 1000);
                                }
                            }), 1000);
                        }
                    }
                    catch (error) {
                        console.warn(error);
                    }
                }
                else {
                    _this.FullScreenToggeleEventListener.emit(false);
                    _this.livePlayer.exitFullscreen();
                }
            }),
            buildCSSClass: (/**
             * @return {?}
             */
            function () {
                return "my_fullscreen";
            }),
        }));
        this.livePlayer.getChild("controlBar").addChild("FullScreenButton", {});
    };
    // 自定义全屏
    // 自定义全屏
    /**
     * @return {?}
     */
    HmNgVideoComponent.prototype.toFullScreen = 
    // 自定义全屏
    /**
     * @return {?}
     */
    function () {
        this.FullScreenToggeleEventListener.emit(true);
        if (this.livePlayer.requestFullscreen) {
            return this.livePlayer.requestFullscreen();
        }
        else if (this.livePlayer.webkitRequestFullScreen) {
            return this.livePlayer.webkitRequestFullScreen();
        }
        else if (this.livePlayer.mozRequestFullScreen) {
            return this.livePlayer.mozRequestFullScreen();
        }
        else {
            return this.livePlayer.msRequestFullscreen();
        }
    };
    /**
     * @return {?}
     */
    HmNgVideoComponent.prototype.ngOnInit = /**
     * @return {?}
     */
    function () {
        console.log("hm-ng-video 1.5.6");
    };
    /**
     * @param {?} changes
     * @return {?}
     */
    HmNgVideoComponent.prototype.ngOnChanges = /**
     * @param {?} changes
     * @return {?}
     */
    function (changes) {
        var _this = this;
        if (this.exitFullScreen) {
            console.log("按返回键退出全屏");
            this.FullScreenToggeleEventListener.emit(false);
            this.livePlayer.exitFullscreen();
        }
        if ((changes.fileOptions &&
            changes.fileOptions.firstChange &&
            changes.fileOptions.currentValue) ||
            (changes.liveOptions &&
                changes.liveOptions.firstChange &&
                changes.liveOptions.currentValue)) {
            this.init();
        }
        if ((changes.fileOptions &&
            changes.fileOptions.currentValue &&
            !changes.fileOptions.firstChange) ||
            (changes.liveOptions &&
                changes.liveOptions.currentValue &&
                !changes.liveOptions.firstChange)) {
            this.destroy();
            setTimeout((/**
             * @return {?}
             */
            function () {
                _this.init();
            }), 1000);
        }
    };
    /**
     * @return {?}
     */
    HmNgVideoComponent.prototype.ngOnDestroy = /**
     * @return {?}
     */
    function () {
        this.destroy();
    };
    HmNgVideoComponent.decorators = [
        { type: Component, args: [{
                    selector: "hm-ng-video",
                    template: "<!--\r\n * @Descripttion:\r\n * @version:\r\n * @Author: yding\r\n * @Date: 2020-05-08 19:05:06\r\n * @LastEditors: yding\r\n * @LastEditTime: 2020-06-19 10:44:58\r\n-->\r\n<!-- <button\r\n  class=\"button\"\r\n  style=\"background: red;\"\r\n  (click)=\"fullScreen()\"\r\n  value=\"\u5168\u5C4F\"\r\n>\r\n  \u5168\u5C4F\r\n</button> -->\r\n<div\r\n  class=\"vjs-video\"\r\n  #fileVideoEl\r\n  [ngStyle]=\"{\r\n    height: videoHeight + 'px',\r\n    width: videoWidth + 'px',\r\n    position: 'relative'\r\n  }\"\r\n  [hidden]=\"(liveLoaded && liveOptions && fileOptions) || !fileOptions\"\r\n></div>\r\n<div\r\n  class=\"vjs-video\"\r\n  #liveVideoEl\r\n  [ngStyle]=\"{\r\n    height: videoHeight + 'px',\r\n    width: videoWidth + 'px',\r\n    position: 'relative'\r\n  }\"\r\n  [hidden]=\"(!liveLoaded && liveOptions && fileOptions) || !liveOptions\"\r\n></div>\r\n",
                    encapsulation: ViewEncapsulation.None,
                    styles: [".video-js{width:100%;height:100%}.retry:focus,.vjs-big-play-button:focus,video:focus{outline:0}.vjs-paused .vjs-big-play-button,.vjs-paused.vjs-has-started .vjs-big-play-button{display:none}.video-js .vjs-big-play-button{font-size:2.5em;line-height:2.3em;height:2.5em;width:2.5em;border-radius:2.5em;background-color:rgba(115,133,159,.5);border-width:.15em;margin-top:-1.25em;margin-left:-1.75em}.vjs-big-play-button .vjs-icon-placeholder{font-size:1.63em}.vjs-progress-control.vjs-control,.vjs-remaining-time.vjs-time-control.vjs-control{display:none}.vjs-loading-spinner{border:none;visibility:visible;border-radius:0}.vjs-waiting .vjs-loading-spinner{-webkit-animation:none!important;animation:none!important}.video-js .vjs-control.vjs-close-button{display:none}.loading{width:100%;height:100%;top:0;left:0;position:absolute;pointer-events:none;z-index:71;background:#000;display:none}.loading img{width:35px;height:35px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.error{width:100%;height:100%;top:0;left:0;position:absolute;background:#000;cursor:pointer;z-index:70;display:none}.error span{display:block;text-align:center;padding-top:30%;color:#fff}.vjs-control-bar>button.my_fullscreen::before{display:block!important;content:\"\u5168\u5C4F/\u9000\u51FA\";cursor:pointer}"]
                }] }
    ];
    /** @nocollapse */
    HmNgVideoComponent.ctorParameters = function () { return [
        { type: ElementRef },
        { type: Renderer2 }
    ]; };
    HmNgVideoComponent.propDecorators = {
        fileVideo: [{ type: ViewChild, args: ["fileVideoEl",] }],
        liveVideo: [{ type: ViewChild, args: ["liveVideoEl",] }],
        fileOptions: [{ type: Input }],
        liveOptions: [{ type: Input }],
        autoplay: [{ type: Input }],
        videoHeight: [{ type: Input }],
        videoWidth: [{ type: Input }],
        className: [{ type: Input }],
        loadingSrc: [{ type: Input }],
        maxReloadTimes: [{ type: Input }],
        errorContent: [{ type: Input }],
        maxLoadTime: [{ type: Input }],
        exitFullScreen: [{ type: Input }],
        PauseEventListener: [{ type: Output }],
        PlayingEventListener: [{ type: Output }],
        WaitingEventListener: [{ type: Output }],
        ErrorEventListener: [{ type: Output }],
        DataLoadedEventListener: [{ type: Output }],
        CanPlayEventListener: [{ type: Output }],
        ReLoadVideoEventListener: [{ type: Output }],
        FullScreenToggeleEventListener: [{ type: Output }]
    };
    return HmNgVideoComponent;
}());

/**
 * @fileoverview added by tsickle
 * Generated from: lib/hm-ng-video.module.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
var HmNgVideoModule = /** @class */ (function () {
    function HmNgVideoModule() {
    }
    HmNgVideoModule.decorators = [
        { type: NgModule, args: [{
                    declarations: [HmNgVideoComponent],
                    imports: [CommonModule],
                    exports: [HmNgVideoComponent],
                },] }
    ];
    return HmNgVideoModule;
}());

/**
 * @fileoverview added by tsickle
 * Generated from: public-api.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

/**
 * @fileoverview added by tsickle
 * Generated from: hm-ng-video.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

export { HmNgVideoComponent, HmNgVideoModule };

//# sourceMappingURL=hm-ng-video.js.map