2. 程式人生 > >cordova ionic 使用 videogular 視訊外掛播放視訊

cordova ionic 使用 videogular 視訊外掛播放視訊

阿新 • • 發佈：2018-12-30

cordova  ionic 使用 videogular 視訊外掛播放視訊

外掛官網：

官方文件：

github下載：

根據官方提供的文件，使用該外掛：

（一）建立專案

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後可以安裝)：

 

相關推薦

cordova ionic 使用 videogular 視訊外掛播放視訊

cordova  ionic 使用 videogular 視訊外掛播放視訊 外掛官網： 官方文件： github下載： 根據官方提供的文件，使用該外掛： （一）建立專案 ionic start 專案 ionic platform add android ionic 

安防視訊之web無外掛播放視訊

本博文是個宣傳帖子，主要介紹如何把安防攝像機的視訊轉成無外掛Web播放。 安防攝像機主要通過rtsp協議獲取視訊碼流。 Web預覽通過Hls協議進行預覽。 結構圖如下：  這裡我們提供一個轉碼服務，實現把安防的rtsp碼流轉成Hls碼流。 具體轉換過程，可以參考我

在小程式中使用騰訊視訊外掛播放教程視訊

在我們開發的一個小程式裡面，為了給客戶瞭解一些教程內容，我們需要增加一個線上播放視訊的模組，考慮過直接使用視訊元件播放伺服器上的視訊不成功，因此使用騰訊視訊外掛來播放最終測試成功。本篇隨筆介紹微信小程式使用視訊元件和騰訊視訊外掛兩種方式的解決方式，並重點介紹視訊外掛方式的處理過程。 1、使用視訊元件播放視訊

html5-video視訊標籤播放視訊實現過程中遇到的一系列問題。

問題一，video標籤支援視訊播放格式有限制；    一共支援三種格式： Ogg、MPEG4、WebM，但是這三種格式對於瀏覽器的相容性卻各不同。 問題二，三種支援的視訊檔案格式對瀏覽器的版本支援有限

ionic 使用videogular播放視訊

ionic 專案如果沒有bower.json的話新建bower.json       命令：bower.init  1. 安裝videogular，主題和其它外掛 bower install&nb

ckplayer 外掛線上視訊播放

1. CKplayer 它是一款用於網頁上播放視訊的外掛，支援的格式有：http 協議上的 flv, f4v, mp4格式，同時支援 rtmp 視訊流格式播放。使用非常簡單。 <html> <head> <meta http-equiv="Content

ie 嵌入 vlc 播放器外掛播放rtsp直播視訊

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www

外掛用法--視訊播放video.js

1、video.js 這篇裡面全部覆蓋，總結得真好。 https://www.awaimai.com/2053.html   大坑--安卓手機上video層級最高，在播放視訊後video尷尬地在頁面所有元素之上，設定z-index也沒有用，這個時候，可以設定video的屬性： x5-pla

unity 播放伺服器視訊及本地視訊外掛

一、unity用於Android的視訊播放外掛： 嘗試了很多，最好用的是Easy Movie Texture Video Texture 支援絕對路徑、相對路徑、網路路徑。 下載地址： 下載 使用方法： 1、匯入 2、設定File -> BuildSettings

Cordova 圖片視訊選擇，圖片多選，模仿微信 Cordova ionic 圖片視訊選擇

Cordova 圖片視訊選擇，圖片多選，模仿微信 Cordova ionic圖片視訊選擇https://github.com/DmcSDK/cordova-plugin-mediaPicker點選開啟連結我司商業專案用的蠻好用的，而且完全模仿微信的UI很容易被使用者接受。

前端視訊播放初探總結，video標籤-視訊外掛jwplayer

1.HTML5原生支援<video> 簡單使用： <video src="../TestRes/test.mp4" autoplay controls></video> html5的video標籤只支援mp

JMeter流媒體線上播放HLS外掛BlazeMeter - HLS Plugin實現視訊線上播放壓測

一、前提 近日因工作需要，需對視訊線上播放功能進行壓測，視訊播放使用的是HLS協議，傳輸內容包括兩部分，一是用來控制播放的m3u8檔案，二是TS媒體檔案。（HLS協議和m3u8詳解可參考此連結：https://blog.csdn.net/aoshilang2249/article/details/820121

linux系統，CentOS7.2安裝ffmpeg擴充套件，PHP用FFmpeg擷取視訊第一幀作為視訊封面，並給圖片新增播放視訊按鈕

最近做公司的專案中，有使用者上傳視訊，後臺這邊接收視訊並上傳，獲取視訊第一幀作為視訊封面的功能，在網上查找了好多資料，並且安裝 了ffmpeg-php的PHP擴充套件，由於版本問題，安裝好幾個版本都不成功，最後放棄安裝擴充套件，後來執行程式碼發現不用安裝那個擴充套件也能實現截圖並上傳的功能，所以要擷

WebView 視訊播放，全屏按鈕顯示不出來，全屏後不能播放視訊

最近專案的一個需求，需要在Webview 裡面播放視訊遇到了一些問題： 視訊可以正常播放但是，視訊底部的全屏按鈕沒了，只有一個音量按鈕。修改後，點選全屏，視訊不能播放。 接下來一 一解決： 問題1 ：沒有全屏按鈕： 如圖：可以看到只有一個音量按鈕，沒有全屏按鈕。 查了一

ubuntu 系統在播放視訊時，一段時間後黑屏

在網上查閱了相關的資料，有下面幾種方法：  1、setterm -blank 0         這種方法在這篇部落格中偶詳細的描述，但是在實際操作中並未生效。       Linux LCD

Android SurfaceView+MediaPlayer實現幾個不同的視訊輪流播放

MediaPlayer 1）如何獲得MediaPlayer例項： 可以使用直接new的方式： MediaPlayer mp = new MediaPlayer(); 也可以使用create的方式，如： MediaPlayer mp = MediaPlayer.create(t

video.js+swiper 視訊播放結束後三秒播放下一個，點選播放視訊

代嗎 <!DOCTYPE html> <html>   <head> <meta charset="UTF-8"> <title></title> <link rel="stylesh

彈窗播放視訊

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>視訊播放彈窗</title>   <styl

ios獲取所有相簿的視訊並播放

端午節前，把公司的專案忙完了，這幾天開始繼續DDPlayer的開發，熟悉程式碼之後，首先要解決的是：獲取並播放相簿裡面的視訊。 對於相簿中的視訊，我需要關注視訊的名稱、時常、格式、縮圖等資訊，因此，定義了表示視訊資訊的物件。 //AlbumVideoInfo.h #import <

Android 播放視訊有聲音無畫面

許多第三方播放器用到了TextureView，不開硬體加速的時候就顯示不出來影象，只有聲音。 <application android:hardwareAccelerated="true"> <activity ... /> <