[Angular] video.js(v7.21.6) 설정
Angular2024. 6. 17. 15:31
* 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);
}
}
'Angular' 카테고리의 다른 글
[Angular] 동적 파이프(Dynamic Pipe) (0) | 2023.03.02 |
---|---|
[Angular] 테이블 tr 태그에 포커스 (0) | 2021.10.22 |
[Angular] 문자열 표시 파이프(V2) (0) | 2021.05.24 |
[Angular] 숫자형식 표시 파이프(v3) (0) | 2021.05.20 |
Angular 5 이미지 Base64 문자열 변환(primeng fileupload 컴포넌트 사용) (0) | 2018.08.24 |
[Angular] 동적 파이프(Dynamic Pipe)
Angular2023. 3. 2. 09:13
파이프를 변수에 넣어 동적으로 적용시키고자 할 때 사용
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
'Angular' 카테고리의 다른 글
[Angular] video.js(v7.21.6) 설정 (0) | 2024.06.17 |
---|---|
[Angular] 테이블 tr 태그에 포커스 (0) | 2021.10.22 |
[Angular] 문자열 표시 파이프(V2) (0) | 2021.05.24 |
[Angular] 숫자형식 표시 파이프(v3) (0) | 2021.05.20 |
Angular 5 이미지 Base64 문자열 변환(primeng fileupload 컴포넌트 사용) (0) | 2018.08.24 |
[POI 3.17] 이름 정의 및 데이터 유효성 검사 추가(드롭다운 구현)
Java2021. 11. 5. 11:10
이름 정의 (엑셀: 수식 > 이름관리자)
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);
출처
'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 |