HTMP Page
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div class="row">
<div class="col-md-6">
<h2>Basic Table</h2>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td><button ng-click="playVideo(1)">Test</button></td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td><a ng-click="playVideo(2)">Test</a></td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-6">
<h3>View Content</h3>
<ui-view>
<ion-content style="background-color:white ; margin-top:0px;" ng-init="playVideo()" >
<div >
<video controls style="margin-left: 10%"; width="300";height="400"></video>
</div>
</ion_content>
</ui-view>
</div>
</div>
</body>
</html>
Js File
Module creating:-
Angular.module('app' ,,[]);
Configure UI-Router:-
app.config(function($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise('/nav');
$stateProvider
.state('nav.multipleview', {
url: '/multipleview',
templateUrl: 'App/multiple-view/multipleview.html',
controller:'multipleViewController'
})
});
Controller creating:-
app.controller('multipleViewController',['appService','$scope','$rootScope',function(appService,$scope,$rootScope){
$scope.playVideo = function(id) {
alert(id);
var vidURL = "http://clips.vorwaerts-gmbh.de/VfE_html5.mp4";
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = vidURL;
myVideo.load();
myVideo.play();
}
}]);
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div class="row">
<div class="col-md-6">
<h2>Basic Table</h2>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td><button ng-click="playVideo(1)">Test</button></td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td><a ng-click="playVideo(2)">Test</a></td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-6">
<h3>View Content</h3>
<ui-view>
<ion-content style="background-color:white ; margin-top:0px;" ng-init="playVideo()" >
<div >
<video controls style="margin-left: 10%"; width="300";height="400"></video>
</div>
</ion_content>
</ui-view>
</div>
</div>
</body>
</html>
Js File
Module creating:-
Angular.module('app' ,,[]);
Configure UI-Router:-
app.config(function($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise('/nav');
$stateProvider
.state('nav.multipleview', {
url: '/multipleview',
templateUrl: 'App/multiple-view/multipleview.html',
controller:'multipleViewController'
})
});
Controller creating:-
app.controller('multipleViewController',['appService','$scope','$rootScope',function(appService,$scope,$rootScope){
$scope.playVideo = function(id) {
alert(id);
var vidURL = "http://clips.vorwaerts-gmbh.de/VfE_html5.mp4";
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = vidURL;
myVideo.load();
myVideo.play();
}
}]);
0 comments:
Post a Comment