ionic 使用videogular播放視訊
阿新 • • 發佈：2018-11-08
ionic 專案如果沒有bower.json的話新建bower.json
命令：bower.init
1. 安裝videogular，主題和其它外掛
bower install videogular videogular-themes-default videogular-controls videogular-buffering videogular-overlay-play videogular-poster videogular-ima-ads videogular-angulartics
2. 安裝依賴
bower install angular-animate
bower install angular-sanitize
使用：
<!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/ionic/js/ionic.bundle.js"></script> <script src="lib/angular-animate/angular-animate.js"></script> <script src="lib/angular-sanitize/angular-sanitize.js"></script> <!--螢幕容器樣式--> <style type="text/css"> .videogular-container { width: 100%; height: 320px; margin: auto; overflow: hidden; } </style> <!--主題樣式--> <link href="bower_components/videogular-themes-default/videogular.css" rel="stylesheet"> <!--核心js: 這三個有先後順序--> <script src="lib/angular/angular.min.js"></script> <script src="lib/angular-sanitize/angular-sanitize.min.js"></script> <script src="bower_components/videogular/videogular.js"></script> <!--其它外掛: 這幾個沒有先後順序--> <script src="lib/videogular-angulartics/vg-analytics.js"></script> <script src="lib/videogular-buffering/vg-buffering.js"></script> <script src="lib/videogular-controls/vg-controls.js"></script> <script src="lib/videogular-ima-ads/vg-ima-ads.js"></script> <script src="lib/videogular-overlay-play/vg-overlay-play.js"></script> <script src="lib/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","$timeout", function ($scope,$sce,$timeout) {
$scope.onPlayerReady = function(API) { $timeout(function(){ API.play(); //vg-auto-play="true"無法自動播放，加個方法使其進入頁面自動播放 }, 100); }; $scope.config = { sources: [{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.mp4"), type: "video/mp4"}], //看不到視訊可能是地址不對 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: "lib/videogular-themes-default/videogular.css", plugins: { //播放器預覽圖片 poster: "http://www.videogular.com/assets/images/videogular.png" } }; }] ); </script> </head> <body> <div ng-app="myApp"> <div ng-controller="VedioCtrl" class="videogular-container"> <videogular vg-player-ready="onPlayerReady($API)" vg-theme="config.theme"> <vg-media vg-src="config.sources" vg-loop="true" 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>{{ totalTime | 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>