<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angularjs@1.5.3" data-semver="1.5.3" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src= "http://player.twitch.tv/js/embed/v1.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="AppCtrl as ac">
<div id="TWITCH-PLAYER"></div>
<form ng-submit="ac.seek(ac.seekToTime)">
<input type="number" ng-model="ac.seekToTime" step="0.01">
<button type="submit">Seek</button>
</div>
<br>
<ul>
<li ng-repeat="message in ac.messages">{{ message }}</li>
</ul>
</body>
</html>
angular
.module('app', [])
.controller('AppCtrl', function($scope, $timeout) {
var vm = this;
vm.seekToTime = 30.89;
vm.messages = [];
var playerOptions = {
width: 640,
height: 440,
autoplay: false,
time: 0,
video: "v62244377"
};
var player = new Twitch.Player("TWITCH-PLAYER", playerOptions);
player.addEventListener('ready', function() {
$scope.$apply(function() {
log('ready');
});
$timeout(function() { player.play(); }, 1000);
});
player.addEventListener('play', function() {
$scope.$apply(function() {
log('play');
});
});
vm.seek = function(time) {
player.seek(time);
$timeout(logTime, 500);
};
function log(message) {
vm.messages.push(new Date().toISOString().slice(14, 23) + ' | ' + message);
}
function logTime() {
log('time | ' + player.getCurrentTime());
}
});
/* Styles go here */