videogular2 icon indicating copy to clipboard operation
videogular2 copied to clipboard

Hi Jaime I am still getting these error to play a m3u8 file

Open harry9345 opened this issue 4 years ago • 2 comments

Description

@IxquitilisSaid I have install "@videogular/ngx-videogular": "^3.0.1", and "hls.js": "^0.14.17",
have add the hls.min.js file to The script in Angular.json file. On my component.html I have :

 <video
          #media
          #vgHls="vgHls"
          width="1000"
          height="800"
          crossorigin
          controls
          [vgMedia]="media"
          [vgHls]="
            'http://demo.unified-streaming.com/video/tears-of-steel/tears-of-steel.ism/.m3u8'
          "
          id="singleVideo"
          type="video/mp4"
        ></video>

My app.module.ts :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppRoutingModule } from './app-routing.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { VgCoreModule } from '@videogular/ngx-videogular/core';
import { VgControlsModule } from '@videogular/ngx-videogular/controls';
import { VgOverlayPlayModule } from '@videogular/ngx-videogular/overlay-play';
import { VgBufferingModule } from '@videogular/ngx-videogular/buffering';
import { VgStreamingModule } from '@videogular/ngx-videogular/streaming';

import { AppComponent } from './app.component';
import { CameraComponent } from './camera/camera.component';
import { NavbarComponent } from './navbar/navbar.component';

@NgModule({
  declarations: [AppComponent, CameraComponent, NavbarComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule,
    NgbModule,
    VgCoreModule,
    VgControlsModule,
    VgOverlayPlayModule,
    VgBufferingModule,
    VgStreamingModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}


Expected Behavior

But still, can t play my file I have created a question on StackOverflow too please visit : https://stackoverflow.com/questions/65846501/how-to-play-m3u8-file-from-unified-streaming-on-ngx-videogular

Please help me make this run

Thanks

harry9345 avatar Jan 25 '21 10:01 harry9345

Please refer to this Dash & HLS example as a practical guide.

But without more context, I'm kinda in the dark here.

You said you installed HLS npm i --save hls.js and imported it in your angular.json file but could you please post the scripts part of it? Because if it's logging Hls is not defined then it's probably one of these cases:

  • Wrong path to node_modules/hls.js/dist/hls.min.js in your angular.json
  • You're initializing the video player before HLS being resolved/available

If none of that works, please let me know

IxquitilisSaid avatar Jan 27 '21 08:01 IxquitilisSaid

Thank you @IxquitilisSaid I check them but they fine, Please have look at https://github.com/harry9345/angular.git whenever you have time for a headache.

harry9345 avatar Jan 28 '21 11:01 harry9345