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>
angular.js video.js directive

相关文章
