ionic 使用videogular播放视频

最新推荐文章于 2024-08-27 09:53:19 发布

qq_27717857

最新推荐文章于 2024-08-27 09:53:19 发布

阅读量3k

点赞数

分类专栏： ionic angularjs 文章标签： videogular

本文链接：https://blog.csdn.net/qq_27717857/article/details/80776485

版权

ionic 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

angularjs

13 篇文章 0 订阅

订阅专栏

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>