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>