팡이네

* 2024-06-17 현재 video.js 8이상 버전에서는

vhs(video.js Http Streaming) 메소드에 오류가 있어

7.21.6 버전으로 설정하는 방법을 기록

* 8 버전의 경우 player.tech().vhs.xhr ... 여기서 vhs 객체가 없다고 오류 발생

 

angular.json

...
        "scripts": [
            "./node_modules/video.js/dist/video.min.js",
            ...
        ],
...

 

styles.scss

@import '../node_modules/video.js/dist/video-js.min.css';

 

video.component.html

vjs-big-play-centered 최초 재생 버튼을 플레이어 한가운데 표시

<video #video id="video" class="video-js vjs-big-play-centered"></video>

 

video.component .ts

import videojs from 'video.js';
// json 파일을 import 하기 위해서는
// tsconfig.json 파일에서 resolveJsonModule: true 옵션 사용
import ko from 'video.js/dist/lang/ko.json';
...
@Input() fileID?: string;
@Input() width?: string;
@Input() height?: string;
@Input() token?: string;
@ViewChild('video', { static: true }) target?: ElementRef;
...

ngAfterViewInit(): void {
    // 한글 언어 파일 설정
    videojs.addLanguage('ko', ko);
    setTimeout(() => {
        this.readyVideo();
    });
}

ngOnDestroy(): void {
    if (this.videoPlayer) {
        this.videoPlayer.dispose();
    }
}

readyVideo(): void {
    // video.js (v7.21.6)
    // header에 스트리밍을 위한 인증 토큰 추가
    videojs.Vhs.xhr.beforeRequest = (options: any) => {
        options.headers = {
            Authorization: 'Bearer '+ this.token
        };
        return options;
    };

    // video.js 옵션 (v7.21.6)
    const options = {
        controls: true,     // 조작 컨트롤 표시
        controlBar: {
            bigPlayButton: true,            // 최초 재생 버튼 표시
            playToggle: true,               // 재생/일시정지 버튼 표시
            volumePanel: {                  // 소리 버튼 표시
                inline: false,              // 음량 조절막대 위치(true: 진행률막대 왼쪽에 표시, false: 세로로 표시)
            },
            progressControl: true,          // 진행률막대 표시
            // currentTimeDisplay: false,      // 재생 시간 표시
            remainingTimeDisplay: true,     // 남은 시간 표시
            pictureInPictureToggle: false,  // PiP 버튼 표시
            // fullscreenToggle: false,     // 전체화면 버튼 표시
        },
        muted: true,        // 소리 꺼짐여부
        autoplay: false,    // false, true, 'muted', 'play', 'any'
        preload: 'none',    // 'auto', 'metadata', 'none'
        playsinline: true,  // 내장 플레이어 재생여부(모바일)
        playbackRates: [0.5, 1, 1.5, 2],    // 재생속도 설정
        width: this.width,
        height: this.height,
        sources: [{
            type: 'application/x-mpegURL',
            src: '/스트리밍파일경로/파일명.m3u8',
        }],
        languages: {    // 번역 수정
            'ko': {
                'Mute': '소리 끄기',    // 기존번역: 음소거
                'Unmute': '소리 켜기',  // 기존번역: 소리 활성화하기
                'Picture-in-Picture': 'PiP 모드', // 미번역
            },
        },
        poster: '/포스터이미지파일경로/파일명.png',	// 1. 직접 이미지 표시할 경우
    };

    // 1. 직접 이미지 표시할 경우
    this.videoPlayer = videojs(this.target?.nativeElement, options);

    // 2. base64 문자열로 이미지를 표시할 경우 위의 1. 부분을 삭제
    this.imageService.getImage(this.fileID)
        .subscribe((blob) => {
            this.loadImage(blob);
            this.videoPlayer = videojs(this.target?.nativeElement, options);
        });
}

/**
 * Blob 데이터 로딩
 * @param img
 */
private loadImage(img: Blob): void {
    const reader = new FileReader();
    reader.addEventListener('load', () => {
        this.videoPlayer.poster(reader.result);
    }, false);

    if (img) {
        reader.readAsDataURL(img);
    }
}

파이프를 변수에 넣어 동적으로 적용시키고자 할 때 사용

 

dynamic-pipe.ts

import { Injector, Pipe, PipeTransform } from '@angular/core';
import { NumberZeroPipe } from './number-zero.pipe';
import { StringZeroPipe } from './string-zero.pipe';

@Pipe({
    name: 'dynamicPipe'
})
export class DynamicPipe implements PipeTransform {

    public constructor(
        private injector: Injector
    ) {
    }

    transform(value: any, pipeToken: any, pipeArgs: any[]): any {
        // 사용할 pipe 선언
        const MAP = {
            'number0': NumberZeroPipe,
            'string0': StringZeroPipe,
        }

        if (pipeToken && MAP.hasOwnProperty(pipeToken)) {
            var pipeClass = MAP[pipeToken];
            var pipe = this.injector.get(pipeClass);
            if (Array.isArray(pipeArgs)) {
                return pipe.transform(value, ...pipeArgs);
            } else {
                return pipe.transform(value, pipeArgs);
            }
        }
        else {
            return value;
        }
    }
}

HTML

<ul>
    <li *ngFor="let item of list">
        {{ item.data | dynamicPipe: item.pipe : item.pipeOptions }}
    </li>
</ul>

TS

this.list = [
	{ data: 1000000.12345, pipe: 'number0', pipeOptions: 'limit: 2' },
	{ data: 2000000.12345, pipe: 'number0', pipeOptions: 'limit: 2' },
];

출처

http:// https://stackoverflow.com/questions/36564976/dynamic-pipe-in-angular-2/46910713#46910713

이름 정의 (엑셀: 수식 > 이름관리자)

HSSFWorkbook wb = new HSSFWorkbook();

//참조 sheet 생성
HSSFSheet sheet = workbook.createSheet("감면");
//참조 데이터 생성
...

//userName 이라는 이름 정의
String name = "userName";

HSSFName namedCell = wb.createName();
namedCell.setNameName(name);
namedCell.setRefersToFormula("감면!$A$11:$A$35");   //감면 sheet 해당 범위에 참조 데이터 존재
//또는
namedCell.setRefersToFormula("'감면'!$A$11:$A$35");

//이미 이름이 정의되어 있는 엑셀인 경우
FileInputStream file = new FileInputStream(new File("already.xlsx"));
HSSFWorkbook workbook = new HSSFWorkbook(file);
HSSFName namedCell = wb.getName(name);
...

 

이름 적용

//String name = "userName";
HSSFSheet sheet = workbook.createSheet("Test");
...
//CellRangeAddressList(시작 row index, 종료 row index, 시작 column index, 종료 column index);
//범위 설정 (1 ~ 10행, B열)
CellRangeAddressList addressList = new CellRangeAddressList(0, 9, 1, 1);

//데이터 유효성 검사 추가(엑셀: 데이터 > 데이터 유효성 검사)
DVConstraint dvConstraint = DVConstraint.createFormulaListConstraint(name);
DataValidation dataValidation = new HSSFDataValidation(addressList, dvConstraint);

dataValidation.setEmptyCellAllowed(false);      //공백무시
dataValidation.setShowPromptBox(false);         //설명 미표시
dataValidation.setSuppressDropDownArrow(false); //셀 선택 시 드롭다운 목록 미표시

sheet.addValidationData(dataValidation);

출처

https://kkani.tistory.com/entry/poi-HSSF-%EC%82%AC%EC%9A%A9%EC%8B%9C-Excel-DropDownListBox-%EC%82%AC%EC%9A%A9-%EC%98%88%EC%A0%9C

'Java' 카테고리의 다른 글

List 다중 컬럼 정렬  (0) 2021.05.21
날짜 관련 유틸리티  (0) 2018.10.23
JDK 8 인스톨 없이 설치하기  (0) 2018.10.20
사진 이미지 크기 변경 후 Base64 문자열 변환  (0) 2018.04.26
POI, Excel 셀 생성  (0) 2015.06.30