前端之家收集整理的这篇文章主要介绍了
angular.js video.js directive,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
</head>
<body>
<div ng-app="app" ng-controller="MainCtrl">
<div ng-if="mediaToggle">
<video class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" vjs-video vjs-media="mediaToggle"></video>
</div>
<button ng-click="change()">change</button>
</div>
<script src="http://cdn.bootcss.com/angular.js/1.3.0/angular.min.js"></script>
<link href="http://cdn.bootcss.com/video.js/5.0.0-11/video-js.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/video.js/5.0.0-11/video.min.js"></script>
<!-- https://github.com/LonnyGomes/vjs-video -->
<script src="vjs-video.min.js"></script>
<script>
angular.module('app',['vjs.video']).controller('MainCtrl',function ($scope) {
$scope.change = function () {
if ($scope.mediaToggle && $scope.mediaToggle.sources[0].src === 'http://vjs.zencdn.net/v/oceans.mp4') {
$scope.setSrc('http://easyhtml5video.com/assets/video/new/Penguins_of_Madagascar.mp4');
}
else {
$scope.setSrc('http://vjs.zencdn.net/v/oceans.mp4');
}
}
$scope.setSrc = function (url) {
$scope.mediaToggle = {
sources: [
{
src: url,type: 'video/mp4'
}
],poster: 'https://cn.vuejs.org/images/logo.png'
};
}
$scope.$on('vjsVideoReady',function (e,data) {
//data contains `id`,`vid`,`player` and `controlBar`
//NOTE: vid is depricated,use player instead
console.log('video id:' + data.id);
console.log('video.js player instance:' + data.player);
console.log('video.js controlBar instance:' + data.controlBar);
});
});
</script>
</body>
</html>