Playing multiple videos/audios in a player- Angular/ JavaScript

Photo by Alphacolor on Unsplash

Plugin: VideoJS Player

Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 video and modern streaming formats, as well as YouTube, Vimeo, and even Flash (through plugins, more on that later).

In HTML File:

<video id=”video-player” class=”video-js player__video viewer”

preload=”auto” width=”640" height=”268">

</video>

import videojs from ‘video.js’;

declare var videojs: any;

ngOnInit() { this.video = document.getElementById(‘video-player’);

Now, to play a sequence of videos/audios or anything — install :

video-js playlist : refer this link.

$ npm install videojs-playlist

import { Component, OnInit AfterViewInit, Input} from '@angular/core';
import { ElementRef } from '@angular/core';
import videojs from ‘video.js’;
declare var videojs: any;
export class DummyComponent implements OnInit, AfterViewInit {
video: any;
player: any;
ngOnInit() {
this.video = document.getElementById(‘video-player’)
this.player = videojs('video');
this.player.playlist([{
sources: [{
src: 'http://media.w3.org/2010/05/sintel/trailer.mp4',
type: 'video/mp4'
}],
poster: 'http://media.w3.org/2010/05/sintel/poster.png'
}, {
sources: [{
src: 'http://media.w3.org/2010/05/bunny/trailer.mp4',
type: 'video/mp4'
}],
poster: 'http://media.w3.org/2010/05/bunny/poster.png'
}, {
sources: [{
src: 'http://vjs.zencdn.net/v/oceans.mp4',
type: 'video/mp4'
}],
poster: 'http://www.videojs.com/img/poster.jpg'
}, {
sources: [{
src: 'http://media.w3.org/2010/05/bunny/movie.mp4',
type: 'video/mp4'
}],
poster: 'http://media.w3.org/2010/05/bunny/poster.png'
}, {
sources: [{
src: 'http://media.w3.org/2010/05/video/movie_300.mp4',
type: 'video/mp4'
}],
poster: 'http://media.w3.org/2010/05/video/poster.png'
}]);
// Play through the playlist automatically.
player.playlist.autoadvance(0);
}
}