JSFiddle - React, Tailwind, and code Playground

by Paul Grenier

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 = "http://www.html5rocks.com/en/tutorials/video/basics/devstories.webm";
    $scope.type = 'video/webm;codecs="vp8, vorbis"';
}