h5 视频播放器

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

<!--HTML--><div ng-app="myApp"><div ng-controller="HomeCtrl as controller" class="videogular-container">    <videogular vg-theme="controller.config.theme.url">        <vg-media vg-src="controller.config.sources"                  vg-tracks="controller.config.tracks">        </vg-media>        <vg-controls>            <vg-play-pause-button></vg-play-pause-button>            <vg-time-display>{{ currentTime | date:'mm:ss':'+0000' }}</vg-time-display>            <vg-scrub-bar>                <vg-scrub-bar-current-time></vg-scrub-bar-current-time>            </vg-scrub-bar>            <vg-time-display>{{ timeLeft | date:'mm:ss':'+0000' }}</vg-time-display>            <vg-volume>                <vg-mute-button></vg-mute-button>                <vg-volume-bar></vg-volume-bar>            </vg-volume>            <vg-fullscreen-button></vg-fullscreen-button>        </vg-controls>        <vg-overlay-play></vg-overlay-play>    </videogular></div></div><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.min.js"></script><script src="https://unpkg.com/videogular@2.1.2/dist/videogular/videogular.js"></script><script src="https://unpkg.com/videogular@2.1.2/dist/controls/vg-controls.js"></script><script src="https://unpkg.com/videogular@2.1.2/dist/overlay-play/vg-overlay-play.js"></script>

/**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/videogular@2.1.2/dist/themes/default/videogular.css"                }            };        }]    );

效果如下：