我試圖更新視頻源，然後播放它。我在Ionic 2（Angular 2）應用程序中使用Videogular2。更新視頻圖像2中的視頻源

預期的行爲

我希望將視頻源進行更改，並在加載時開始播放。

實際行爲

視頻源成功地改變和海報圖像的變化（我可以在Chrome開發者工具/ DOM看到這個）。視頻雖然不播放。我使用的是vg-overlay-play，點擊/點按時不播放視頻。如果我修改我的代碼在video上包含原生controls，那麼我可以通過手動使用這些控件來播放視頻。

HTML

<ion-header> 
    <ion-navbar> 
    <ion-title>{{ selectedClass.name }}</ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content> 
    <vg-player vg-responsive="true" vg-plays-inline="true" (onPlayerReady)="onPlayerReady($event)"> 
    <vg-overlay-play [vgFor]="singleVideo"></vg-overlay-play> 
    <vg-buffering></vg-buffering> 
    <vg-controls> 
     <vg-time-display [vgFor]="singleVideo" [vgProperty]="'left'" [vgFormat]="'mm:ss'"></vg-time-display> 

     <vg-scrub-bar [vgFor]="singleVideo"> 
      <!-- more components here --> 
     </vg-scrub-bar> 
    </vg-controls> 

    <video [vgMedia]="media" #media 
     id="singleVideo" 
     preload="auto" 
     type="video/mp4" 
     webkit-playsinline 
     playsinline> 

     <source *ngFor="let video of sources" [src]="video.src" [type]="video.type"> 

    </video> 
    </vg-player> 
</ion-content>

打字原稿

import { Component } from '@angular/core'; 
import { Content, NavController, NavParams } from 'ionic-angular'; 

import { VgAPI } from 'videogular2/core'; 
import { VgCoreModule } from 'videogular2/core'; 
import { VgControlsModule } from 'videogular2/controls'; 
import { VgOverlayPlayModule } from 'videogular2/overlay-play'; 
import { VgBufferingModule } from 'videogular2/buffering'; 

@Component({ 
    selector: 'page-class-video', 
    templateUrl: 'class_video.html' 
}) 
export class ClassVideoPage { 

    selectedClass: any; 
    playlist: any; 
    currentVideo: any = 0; 
    currentVideoURL: any; 
    totalVideos: any; 
    classEnded: boolean = false; 
    api: any; 
    sources : Array<Object>; 

    constructor() { 

    this.selectedClass = navParams.get('class'); 
    this.playlist = this.selectedClass.videos; 
    this.totalVideos = this.selectedClass.videos.length; 

    this.sources = new Array<Object>(); 
    this.sources.push({ 
     src: this.selectedClass.videos[0].video_s3, 
     type: "video/mp4" 
    }); 
    } 

    // Load API when video is ready 
    onPlayerReady(api: VgAPI) { 
    this.api = api; 

    // Listen for end of video 
    this.api.getDefaultMedia().subscriptions.ended.subscribe(() => { 
     this.currentVideo++; 
     if(this.currentVideo == this.totalVideos) { 
     this.classEnded = true; 
     } else { 
     this.setCurrentVideo(this.playlist[this.currentVideo].video_s3); 

     this.onPlayerReady(this.api); 

     this.api.play(); // Rarely works as it fires before video has loaded 
     } 
    }); 

    // Play video automatically 
    this.api.getDefaultMedia().subscriptions.canPlayThrough.subscribe(() => { 
     this.api.play(); 
    }); 

    this.api.getDefaultMedia().subscriptions.loadedData.subscribe(() => { 
     this.api.play(); 
    }); 
    } 

    setCurrentVideo(source: string){ 
    this.sources = new Array<Object>(); 
    this.sources.push({ 
     src: source, 
     type: "video/mp4" 
    }); 
    this.api.getDefaultMedia().currentTime = 0; 
    this.api.play(); 
    } 

}

this.selectedClass.videos是視頻對象的數組。

我試過綁定到標記上的src而不是使用sources列表，但得到完全相同的行爲。

來源

2017-07-27 Mike

我解決這個問題的方式是不使用API來玩遊戲。相反，我使用的是原生autoplay視頻標籤，該標籤在加載後立即播放視頻，這意味着我無需嘗試自己開始播放。

這樣做時，vg-overlay-play功能按預期工作。

我不確定爲什麼api.play()對視頻造成這樣的痛苦。它幾乎就像它不斷被呼叫，所以vg-overlay-play的任何新聞被立即推翻api.play()。

autoplay固定這雖然：

<video [vgMedia]="media" #media 
    id="singleVideo" 
    preload="auto" 
    type="video/mp4" 
    webkit-playsinline 
    playsinline 
    autoplay> 

    <source *ngFor="let video of sources" [src]="video.src" [type]="video.type"> 

</video>

來源

2017-08-01 08:34:23 Mike

更新視頻圖像2中的視頻源

預期的行爲

實際行爲

回答

相關問題