angular.js h5 视频播放器

最近应公司的要求做一个手机端视频播放器，之前打算就用h5的video播放，但是到手机上去看的时候兼容不好，因为项目本身基于angularjs，所有就找了一个videogular.js感觉不错，直接上代码：

    
        
        

        
            
            {{ currentTime | date:'mm:ss':'+0000' }}
            
                
            
            {{ timeLeft | date:'mm:ss':'+0000' }}
            
                
                
            
            
        

        
    

/**css*/
html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.videogular-container {
    width: 100%;
    height: 320px;
    margin: auto;
    overflow: hidden;
}

@media (min-width: 1200px) {
    .videogular-container {
        width: 1170px;
        height: 658.125px;
    }

    .videogular-container.audio {
        width: 1170px;
        height: 50px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .videogular-container {
        width: 940px;
        height: 528.75px;
    }

    .videogular-container.audio {
        width: 940px;
        height: 50px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .videogular-container {
        width: 728px;
        height: 409.5px;
    }

    .videogular-container.audio {
        width: 728px;
        height: 50px;
    }
}

//js
'use strict';
angular.module('myApp',
        [
            "ngSanitize",
            "com.2fdevs.videogular",
            "com.2fdevs.videogular.plugins.controls",
            "com.2fdevs.videogular.plugins.overlayplay"
        ]
    )
    .controller('HomeCtrl',
        ["$sce", function ($sce) {
            this.config = {
                preload: "none",
                sources: [
                    {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.mp4"), type: "video/mp4"},
                    {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.webm"), type: "video/webm"},
                    {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.ogg"), type: "video/ogg"}
                ],
                tracks: [
                    {
                        src: "pale-blue-dot.vtt",
                        kind: "subtitles",
                        srclang: "en",
                        label: "English",
                        default: ""
                    }
                ],
                theme: {
          url: "https://unpkg.com/[email protected]/dist/themes/default/videogular.css"
                }
            };
        }]
    );

效果如下：