ソースがローカルの場合、HTML5ビデオ要素のカスタムコントロールがangular2のchromeで機能しない

Question

ローカルデスクトップのビデオをブラウズするために、angular2でユーティリティを構築しようとしています。私は正常にhtml5ビデオコントロールにビデオをロードし、標準のビルトインコントロールでそれらを再生することができますが、私は再生、一時停止、シークなど、カスタムコントロールが必要になります...私は再生（）または一時停止（）ビデオ要素のイベントに関連する何かを行い、ビデオ要素はそれ自身を「リセット」します。ローカルファイルを使用している場合、この問題が発生すること https://plnkr.co/edit/Zs4FAdeJz0PXPxn7PSBb?p=preview

注：

は、私がここで作成したPlunkerプロジェクトを参照してください。 （URL.CreateObjectURL（...）メソッドを使用しています）テンプレート参照変数を使用していろいろなメソッドを試しましたが、@ViewChildディレクティブを使用した後にコンポーネントクラスからplay（）を呼び出そうとしました。 。単に画面上に点滅し、ゼロに戻る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のJavaScriptの例の迅速な適応が正常に動作します： 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; 
    }