JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-controller="MainCtrl" ng-app="app">

<h1>Video Test</h1>

<p> <a href="#/home">Home</a> |
    <a href="#/video">Video</a> |
</p>

<hr>
    <ng-view>Loading...</ng-view>
<hr>

<!-- Inline Templates (Partials) -->

<script type=text/ng-template id=home.html>
    <!-- Home -->
    <ul>
        <li><a href="#/video">Video</a></li>
    </ul>
</script>

<script type=text/ng-template id=video.html>
    <!-- List -->
    <p>Behold</p>
    <video controls>
        <source ng-src={{src}} type={{type}}/>
    </video>
</script>

</div>

JavaScript

angular.module('app', [])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider.
                when('/home', {templateUrl: 'home.html',   controller: HomeCtrl}).
                when('/video', {templateUrl: 'video.html',   controller: VideoCtrl}).
                otherwise({redirectTo: '/home'});
}]);

function MainCtrl($scope) {}

function HomeCtrl($scope) {}

function VideoCtrl($scope) {
    $scope.src = "https://s3.ap-south-1.amazonaws.com/scgallery/othergallery/35dec82e-6c15-4b9b-a678-74ea77a34bee1535025486845.mp4";
    $scope.type = 'video/webm;codecs="vp8, vorbis"';
}