cordova ionic 使用 videogular 视频插件播放视频

最新推荐文章于 2024-05-13 09:57:24 发布

雨过天晴~

最新推荐文章于 2024-05-13 09:57:24 发布

阅读量1.7w

点赞数 2

分类专栏： ionic cordova

本文链接：https://blog.csdn.net/u012714280/article/details/51570816

版权

ionic 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

cordova

2 篇文章 0 订阅

订阅专栏

cordova ionic 使用 videogular 视频插件播放视频

插件官网：

http://www.videogular.com/

官方文档：

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>
    
    <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">
    
    <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后可以安装)：

雨过天晴~

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
cordova ionic 使用 videogular 视频插件播放视频

cordova ionic 使用 videogular 视频插件播放视频插件官网：http://www.videogular.com/官方文档：http://www.videogular.com/tutorials/how-to-start/github下载：https://github.com/2fdevs/videogular 根据官方提供的文档，使用该插件：
复制链接

扫一扫