最近应公司的要求做一个手机端视频播放器,之前打算就用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"
}
};
}]
);
效果如下: