Videogular Player Demo Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- include all required .js files for dash, angular & videogular -->
<script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/angular/angular.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/angular-sanitize/angular-sanitize.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videogular/dist/videogular/videogular.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videogular/dist/controls/vg-controls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videogular/dist/overlay-play/vg-overlay-play.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videogular/dist/poster/vg-poster.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videogular/dist/dash/vg-dash.min.js"></script>
<title>Auto-DASH-HLS Videogular Player</title>
</head>
<body>
<main role="main" id="main">
<div ng-app="myPlayer">
<div ng-controller="HomeCtrl as controller" class="videogular-container">
<videogular vg-theme="controller.config.theme.url" vg-auto-play="controller.config.autoplay">
<vg-media vg-src="controller.config.sources" vg-dash></vg-media>
<vg-controls>
<vg-play-pause-button></vg-play-pause-button>
<vg-time-display>{{ currentTime | date:'mm:ss':'+0000' }}</vg-time-display>
<vg-scrub-bar>
<vg-scrub-bar-current-time></vg-scrub-bar-current-time>
</vg-scrub-bar>
<vg-time-display>{{ timeLeft | date:'mm:ss':'+0000' }}</vg-time-display>
<vg-volume>
<vg-mute-button></vg-mute-button>
<vg-volume-bar></vg-volume-bar>
</vg-volume>
<vg-fullscreen-button></vg-fullscreen-button>
</vg-controls>
<vg-overlay-play></vg-overlay-play>
<vg-poster vg-url='controller.config.plugins.poster'></vg-poster>
<p>
To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video.
</p>
</videogular>
</div>
</div>
</main>
<script>
/* Initialize Videogular Player */
'use strict';
angular.module('myPlayer',
[
"ngSanitize",
"com.2fdevs.videogular",
"com.2fdevs.videogular.plugins.controls",
"com.2fdevs.videogular.plugins.overlayplay",
"com.2fdevs.videogular.plugins.poster",
"com.2fdevs.videogular.plugins.dash"
]
)
.controller('HomeCtrl',
["$sce", function ($sce) {
this.config = {
/* Options */
autoplay: false,
sources: [
/* DASH-Playlist location */
{src: "playlist.mpd", type: "application/dash+xml"},
/* HLS-Playlist location */
{src: "playlist.m3u8", type: "application/x-mpegURL"}
],
theme: {
/* Using latest stable Videogular version styling */
url: "https://cdn.jsdelivr.net/npm/videogular/dist/themes/default/videogular.min.css"
},
plugins: {
/* Insert here url or path to preview image for video */
poster: "thumbnails/poster.png"
}
};
}]
);
</script>
</body>
</html>