AngularJS Directive HTML5 Video with Flash Fallback

Implementing the HTML5 Video with Flash Fallback example as an AngularJS Directive.

html5 video with flash fallback in chrome

In index.html apply the custom directive (html5-fallback-video) as an attribute on an element:

<!DOCTYPE html>
<html ng-app="myApp"> 
<head>
  <title>HTML5 Video with Flash Fallback AngularJS Directive Example</title>
  <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.1/modernizr.min.js"></script>
  <script src="flowplayer/flowplayer-3.2.12.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
  <script src="app.js"></script>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      display: table;
      background-color: #000;
    }
    #video {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="video" 
  html5-fallback-video 
  webm-url="media/big_buck_bunny.webmsd.webm" 
  mp4-url="media/big_buck_bunny.mp4" 
  video-width="854" 
  video-height="480" 
  splash-image="splash-screen.jpg">
</div>
</body>
</html>

The directive itself is defined in app.js. Modernizr determines if the browser supports HTML5 video in the directive’s link method. If the browser does not support HTML5 video, Flowplayer plays it with Flash:

var app = angular.module('myApp', []);
//attach a directive to app which will display video
app.directive('html5FallbackVideo', function () {
    return {
        restrict: 'A', //this means the direct must be declared as an attribute on an element
        replace: false, //don't replace the surrounding element with the template code
        link: function (scope, element, attrs) { // manipulate the DOM in here
            if (!Modernizr.video) { //if html5 video is not supported start flowplayer
                //alert('flash video');
                flowplayer("flash-player", "flowplayer/flowplayer-3.2.16.swf", {
                    clip: {
                        url: scope.mp4Url,
                        autoPlay: false,
                        autoBuffering: true,
                        scaling: "fit"
                    },
                    canvas: {
                        backgroundColor: "#000000",
                        backgroundGradient: "none"
                    }
                });
            }
        },
        scope: {
            webmUrl: '@', //binds property value to the element's attribute
            mp4Url: '@',
            videoWidth: '@',
            videoHeight: '@',
            splashImage: '@'
        },
        templateUrl: 'html5-fallback-video.html' //contains the video code
    }
}); 

The directive loads an external template (html5-fallback-video.html) which contains the HTML code for the video players:

<div ng-style="{'width':'{{ videoWidth }}px','height':'{{ videoHeight }}px}">
	<video width="{{ videoWidth }}" height="{{ videoHeight }}" poster="{{ splashImage }}" controls >
		<source src="{{ mp4Url }}" type="video/mp4" />
		<source src="{{ webmUrl }}" type="video/webm" />
		<a id="flash-player" ng-style="{'width':'{{ videoWidth }}px','height':'{{ videoHeight }}px','display':'block','margin':'0 auto'}"></a>
	</video>
</div>

View a demo here. Download the source files.

Links:
- ngStyle Background
- AngularJS Directives
- Detecting HTML5 Features

This entry was posted in Uncategorized. Bookmark the permalink.
  • Ankit Patidar

    i am using mean js for audio streaming website and want to use this examplebut getting flowplayer undefined error.i an including flowplayer js from default.js.
    please help.