소스가 로컬 일 때 angle2로 chrome에서 작동하지 않는 HTML5 비디오 요소에 대한 사용자 정의 컨트롤

Question

내 로컬 데스크톱에서 비디오를 검색하기 위해 angular2에 유틸리티를 빌드하려고합니다. 비디오를 html5 비디오 컨트롤에 성공적으로로드하고 표준 내장 컨트롤로 재생할 수 있지만 재생, 일시 중지, 탐색 등의 사용자 정의 컨트롤이 필요합니다 ... play() 또는 pause()를 호출하거나 실제로 동영상 요소가 자체적으로 '재설정'하는 동영상 요소의 이벤트와 관련된 작업을 수행합니다. 로컬 파일을 사용하는 경우에만이 문제가 발생 https://plnkr.co/edit/Zs4FAdeJz0PXPxn7PSBb?p=preview

참고 :

내가 여기 만든 Plunker 프로젝트를 참조하십시오. (URL.CreateObjectURL (...) 메서드를 사용하여. 템플릿 참조 변수를 사용하여 다양한 메서드를 시도한 및 @ViewChild 지시문을 사용한 후 구성 요소 클래스에서 play() 호출하여 시도했다. 결과는 동일합니다 - 비디오 단순히 화면에 깜박 0으로 다시 currentTime을 설정합니다

<div> 
    <h1>Local Video Sandbox</h1> 
    <input type="file" (change)="onFilesSelected($event)" multiple/> 
    <div *ngFor="let file of files" (click)="onSelectFile(file)"> 
    Select to view: {{file.name}} 
    </div> 
</div> 

<div *ngIf="selectedSrc"> 
    <video #movie [src]="_domSanitizer.bypassSecurityTrustUrl(selectedSrc)" width="500" controls></video> 
    <div> 
    <button (click)="movie.play()">Play</button> 
    <button (click)="movie.pause()">Pause</button> 
    </div> 
</div> 

export class App { 

    constructor(private _domSanitizer: DomSanitizer) { 
    } 

    files: FileList; 
    selectedSrc: string; 

    onFilesSelected(event: any) { 
    this.files = event.target.files; 
    } 

    onSelectFile(file: File) { 
    this.selectedSrc = URL.createObjectURL(file); 
    } 
} 

나는이 로컬 파일과 브라우저 제한하지만, 자바 스크립트 로컬 파일을로드 예를 dsbonev 년대의 빠른 적응을 할 수있다 생각 작품을 잘 :. http://jsfiddle.net/4msbuhng/

<h1>HTML5 local video file player example</h1> 
<div id="message"></div> 
<input type="file" accept="video/*"/> 
<video id="movie" width="400"></video> 
<button type="button" 
onclick="document.getElementById('movie').pause()">Pause</button> 
<button type="button" 
onclick="document.getElementById('movie').play()">Play</button> 

내가 뭘 잘못하고 있는지 알 수 있습니까?

Answer 1

템플릿 표현식 대신 이벤트 핸들에서 _domSanitizer를 호출하여이 작업을 수행 할 수있었습니다. 나는 왜 그것이 차이를 만들 었는지 정확히 알지 못합니다. 비디오 요소 속성을 수정하는 방법과 관련이 있습니다.

onSelectFile(file: File) { 
    this.selectedSrc = this._domSanitizer.bypassSecurityTrustUrl(URL.createObjectURL(file)); 
    this.selectedFile = file; 
    }