cordova ionic 使用 videogular 视频插件播放视频
插件官网:
官方文档:
http://www.videogular.com/tutorials/how-to-start/
github下载:
https://github.com/2fdevs/videogular
根据官方提供的文档,使用该插件:
(一)创建项目
ionic start 项目
ionic platform add android
ionic build android
adb kill-server
whereis adb # 得到adb 路径
sudo adb的路径 start-server #使用root权限重新开启adb服务
#手机安装打包生成的文件:
adb install 项目路径/platforms/android/build/outputs/apk/android-debug.apk
(二)安装videogular插件
先安装bower :
npm install -g bower
然后,cd 项目文件夹
1. 安装videogular
bower install videogular
2. 安装主题
bower install videogular-themes-default
3. 安装其它插件
bower install videogular-controls
bower install videogular-buffering
bower install videogular-overlay-play
bower install videogular-poster
bower install videogular-ima-ads
bower install videogular-angulartics
4. 安装依赖
bower install angular
bower install angular-sanitize
用webstorm打开项目,发现所有插件已经安装上:
新建demo.html如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<!-- ionic/angularjs js -->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/angular/angular.js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/angular-animate/angular-animate.js"></script>
<script src="lib/angular-sanitize/angular-sanitize.js"></script>
<script src="lib/angular-ui-router/release/angular-ui-router.js"></script>
<!--屏幕容器样式-->
<style type="text/css">
.videogular-container {
width: 100%;
height: 320px;
/*height: auto;*/
margin: auto;
overflow: hidden;
}
@media (min-width: 1200px) {
.videogular-container {
width: 1170px;
height: 658.125px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.videogular-container {
width: 940px;
height: 528.75px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.videogular-container {
width: 728px;
height: 409.5px;
}
}
</style>
<!--主题样式-->
<link href="bower_components/videogular-themes-default/videogular.css" rel="stylesheet">
<!--核心js: 这三个有先后顺序-->
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="bower_components/videogular/videogular.js"></script>
<!--其它插件: 这几个没有先后顺序-->
<script src="bower_components/videogular-angulartics/vg-analytics.js"></script>
<script src="bower_components/videogular-buffering/vg-buffering.js"></script>
<script src="bower_components/videogular-controls/vg-controls.js"></script>
<script src="bower_components/videogular-dash/vg-dash.js"></script>
<script src="bower_components/videogular-ima-ads/vg-ima-ads.js"></script>
<script src="bower_components/videogular-overlay-play/vg-overlay-play.js"></script>
<script src="bower_components/videogular-poster/vg-poster.js"></script>
<!--控制器-->
<script type="application/javascript">
'use strict';
angular.module('myApp',
[
"ionic",
"ngSanitize",
"com.2fdevs.videogular",
"com.2fdevs.videogular.plugins.controls",
"com.2fdevs.videogular.plugins.overlayplay",
"com.2fdevs.videogular.plugins.poster"
]
)
.controller('VedioCtrl',
["$scope","$sce", function ($scope,$sce) {
$scope.config = {
sources: [
/{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.mp4"), type: "video/mp4"},
{src: $sce.trustAsResourceUrl("others/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: "http://www.videogular.com/assets/subs/pale-blue-dot.vtt",
src: "others/pale-blue-dot.vtt",
kind: "subtitles",
srclang: "en",
label: "English",
default: ""
}
],
theme: "bower_components/videogular-themes-default/videogular.css",
plugins: {
//播放器预览图片
//poster: "http://www.videogular.com/assets/images/videogular.png"
poster: "others/videogular.png"
}
};
}]
);
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="VedioCtrl" class="videogular-container">
<videogular vg-theme="config.theme">
<vg-media vg-src="config.sources" vg-tracks="config.tracks"></vg-media>
<vg-controls>
<vg-play-pause-button></vg-play-pause-button>
<vg-time-display>{{ currentTime | date:'mm:ss' }}</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' }}</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>
<vg-poster vg-url='config.plugins.poster'></vg-poster>
</videogular>
</div>
</div>
</body>
</html>
可以用本地资源代替网络上的播放资源:
使用webstorm浏览器运行demo.html,点击屏幕就可以播放了(手机端在打包APK后可以安装):