视频不同时播放

config.xml

 <?xml version='1.0' encoding='utf-8'?>
-<widget id="io.ionic.partyCloud.starter.test" version="0.3.10" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+<widget id="io.ionic.partyCloud.starter.test" version="0.3.11" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
     <name>部机关党建云(测试)</name>
     <description>An awesome Ionic/Cordova app.</description>
     <author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>

package-lock.json

@@ -156,11 +156,6 @@
       "resolved": "https://registry.npmjs.org/@ionic-native/status-bar/-/status-bar-4.4.0.tgz",
       "integrity": "sha512-ZLlIdNh9XpA+XrOJ+Bt0hHxxhpE/bLzv77CBLIYb7twYrsK4QU5d43PtCLQeOqBz7ZX2SPMea+84Kt4mrsY1gQ=="
     },
-    "@ionic-native/video-player": {
-      "version": "4.20.0",
-      "resolved": "http://r.cnpmjs.org/@ionic-native/video-player/download/@ionic-native/video-player-4.20.0.tgz",
-      "integrity": "sha1-LzbvKBjR9Z7JKUs9OMss+Asf8Ms="
-    },
     "@ionic/app-scripts": {
       "version": "3.1.8",
       "resolved": "https://registry.npmjs.org/@ionic/app-scripts/-/app-scripts-3.1.8.tgz",
@@ -6604,7 +6599,7 @@
           "version": "1.0.2",
           "bundled": true,
           "requires": {
-            "dezalgo": "^1.0.2"
+            "dezalgo": "1.0.3"
           }
         },
         "block-stream": {
@@ -6684,8 +6679,8 @@
           "version": "1.0.3",
           "bundled": true,
           "requires": {
-            "asap": "^2.0.0",
-            "wrappy": "1"
+            "asap": "2.0.3",
+            "wrappy": "1.0.2"
           },
           "dependencies": {
             "asap": {
@@ -6727,10 +6722,10 @@
           "version": "1.0.10",
           "bundled": true,
           "requires": {
-            "graceful-fs": "^4.1.2",
-            "inherits": "~2.0.0",
-            "mkdirp": ">=0.5 0",
-            "rimraf": "2"
+            "graceful-fs": "4.1.6",
+            "inherits": "2.0.3",
+            "mkdirp": "0.5.1",
+            "rimraf": "2.5.4"
           }
         },
         "fstream-npm": {
@@ -6941,7 +6936,7 @@
           "version": "3.0.6",
           "bundled": true,
           "requires": {
-            "abbrev": "1"
+            "abbrev": "1.0.9"
           }
         },
         "normalize-git-url": {
@@ -7199,13 +7194,13 @@
           "version": "4.0.3",
           "bundled": true,
           "requires": {
-            "debuglog": "^1.0.1",
-            "graceful-fs": "^4.1.2",
-            "read-package-json": "^2.0.0",
-            "readdir-scoped-modules": "^1.0.0",
-            "semver": "2 || 3 || 4 || 5",
-            "slide": "~1.1.3",
-            "util-extend": "^1.0.1"
+            "debuglog": "1.0.1",
+            "graceful-fs": "4.1.6",
+            "read-package-json": "2.0.4",
+            "readdir-scoped-modules": "1.0.2",
+            "semver": "5.1.0",
+            "slide": "1.1.6",
+            "util-extend": "1.0.1"
           },
           "dependencies": {
             "debuglog": {
@@ -7216,10 +7211,10 @@
               "version": "1.0.2",
               "bundled": true,
               "requires": {
-                "debuglog": "^1.0.1",
-                "dezalgo": "^1.0.0",
-                "graceful-fs": "^4.1.2",
-                "once": "^1.3.0"
+                "debuglog": "1.0.1",
+                "dezalgo": "1.0.3",
+                "graceful-fs": "4.1.6",
+                "once": "1.4.0"
               }
             },
             "util-extend": {
@@ -7817,9 +7812,9 @@
           "version": "2.2.1",
           "bundled": true,
           "requires": {
-            "block-stream": "*",
-            "fstream": "^1.0.2",
-            "inherits": "2"
+            "block-stream": "0.0.9",
+            "fstream": "1.0.10",
+            "inherits": "2.0.3"
           }
         },
         "text-table": {
@@ -7899,9 +7894,9 @@
           "version": "1.1.4",
           "bundled": true,
           "requires": {
-            "graceful-fs": "^4.1.2",
-            "imurmurhash": "^0.1.4",
-            "slide": "^1.1.5"
+            "graceful-fs": "4.1.6",
+            "imurmurhash": "0.1.4",
+            "slide": "1.1.6"
           }
         }
       }
@@ -10467,6 +10462,11 @@
         }
       }
     },
+    "videogular2": {
+      "version": "6.0.1",
+      "resolved": "http://r.cnpmjs.org/videogular2/download/videogular2-6.0.1.tgz",
+      "integrity": "sha1-RhpPj2M9yiSUOATUSRCXKZneeZo="
+    },
     "vlq": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/vlq/-/vlq-0.2.3.tgz",

package.json

@@ -33,7 +33,6 @@
     "@ionic-native/mobile-accessibility": "^4.20.0",
     "@ionic-native/splash-screen": "^4.20.0",
     "@ionic-native/status-bar": "4.4.0",
-    "@ionic-native/video-player": "^4.20.0",
     "@ionic/storage": "2.1.3",
     "cordova": "^6.5.0",
     "cordova-android": "7.0.0",
@@ -59,6 +58,7 @@
     "rxjs": "^5.5.12",
     "sw-toolbox": "3.6.0",
     "vconsole": "^3.3.0",
+    "videogular2": "^6.0.1",
     "zone.js": "0.8.18"
   },
   "devDependencies": {

platforms/android/app/src/main/AndroidManifest.xml

 <?xml version='1.0' encoding='utf-8'?>
-<manifest android:hardwareAccelerated="true" android:versionCode="310" android:versionName="0.3.10" package="io.ionic.partyCloud.starter.test" xmlns:android="http://schemas.android.com/apk/res/android">
+<manifest android:hardwareAccelerated="true" android:versionCode="311" android:versionName="0.3.11" package="io.ionic.partyCloud.starter.test" xmlns:android="http://schemas.android.com/apk/res/android">
     <supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" />
     <application android:hardwareAccelerated="true" android:icon="@mipmap/icon" android:label="@string/app_name" android:supportsRtl="true">
         <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="@android:style/Theme.DeviceDefault.NoActionBar" android:windowSoftInputMode="adjustResize">

platforms/android/app/src/main/res/xml/config.xml

 <?xml version='1.0' encoding='utf-8'?>
-<widget id="io.ionic.partyCloud.starter.test" version="0.3.10" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+<widget id="io.ionic.partyCloud.starter.test" version="0.3.11" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
     <feature name="Keyboard">
         <param name="android-package" onload="true" value="io.ionic.keyboard.IonicKeyboard" />
     </feature>

src/app/app.module.ts

@@ -42,7 +42,6 @@ import {MobileAccessibility} from "@ionic-native/mobile-accessibility";
 import {Camera} from "@ionic-native/camera";
 import {ProposalPageModule} from "../pages/mine-pages/proposal/proposal.module";
 import {MineService} from "../pages/mine-pages/mine.service";
-import {VideoPlayer} from "@ionic-native/video-player";
 
 @NgModule({
     declarations: [
@@ -101,7 +100,6 @@ import {VideoPlayer} from "@ionic-native/video-player";
         MobileAccessibility,
         Camera,
         Geolocation,
-        VideoPlayer,
         DatePipe,
         LearnService,
         LearnManageService,

src/components/components.module.ts

@@ -5,6 +5,8 @@ import {ReplyComponent} from './reply/reply';
 import {CommentComponent} from './comment/comment';
 import {SwiperComponent} from './swiper/swiper';
 import {EducationComponent} from './education/education';
+import {VideoiComponent} from './videoi/videoi';
+import { VideoListComponent } from './video-list/video-list';
 
 @NgModule({
     declarations: [
@@ -12,18 +14,21 @@ import {EducationComponent} from './education/education';
         ReplyComponent,
         CommentComponent,
         SwiperComponent,
-        EducationComponent
+        EducationComponent,
+        VideoiComponent,
+    VideoListComponent
     ],
     imports: [
         IonicPageModule,
-
     ],
     exports: [
         SlideListComponent,
         ReplyComponent,
         CommentComponent,
         SwiperComponent,
-        EducationComponent
+        EducationComponent,
+        VideoiComponent,
+    VideoListComponent
     ],
     providers: [
         SlideListComponent,

src/index.html

@@ -37,21 +37,24 @@
 
 <body>
 
-  <!-- Ionic's root component and where the app will load -->
-  <ion-app></ion-app>
+<!-- Ionic's root component and where the app will load -->
+<ion-app></ion-app>
 
-  <!-- The polyfills js is generated during the build process -->
-  <script src="build/polyfills.js"></script>
+<!-- The polyfills js is generated during the build process -->
+<script src="build/polyfills.js"></script>
 
-  <!-- The vendor js is generated during the build process
+<!-- The vendor js is generated during the build process
      It contains all of the dependencies in node_modules -->
-  <script src="build/vendor.js"></script>
+<script src="build/vendor.js"></script>
 
-  <!-- The main bundle js is generated during the build process -->
-  <script src="build/main.js"></script>
+<!-- The main bundle js is generated during the build process -->
+<script src="build/main.js"></script>
 
 </body>
 
 <script src="assets/swiper/swiper-4.1.6.min.js"></script>
+<script src="assets/jwplayer/jwplayer.js"></script>
+<script src="assets/jwplayer/jwpsrv.js"></script>
+<script src="assets/jwplayer/jwplayer.html5.js"></script>
 
 </html>

src/pages/home-pages/stuff-detail/stuff-detail.html

@@ -18,13 +18,8 @@
             </div>
             <div class="stuff-attachments">
                 <ng-container *ngFor="let item of attachments">
-<!--            <div style="height: 160px;" *ngIf="item.resourceType == 1">-->
-<!--              <img style="height: 160px;" [src]="url + item.path" alt="">-->
-<!--            </div>-->
                     <div *ngIf="item.resourceType == 3">
-              <video width="100%" height="100%"  [src]="url + item.path+ '#t=0.1' " controls="controls" preload="metadata">
-                您的浏览器不支持 html5。
-              </video>
+                        <videoi [inputValue]="url + item.path+ '#t=0.1'"></videoi>
                     </div>
                 </ng-container>
                 <ng-container *ngFor="let item of attachments">
@@ -40,7 +35,8 @@
                             <img src="{{picture+comment.picUrl}}" class="contact-img">
                         </ng-container>
                         <ng-container *ngIf="!comment?.picUrl || comment?.picUrl == ''">
-              <img src="./assets/imgs/man.png" class="contact-img" *ngIf="comment.userGender =='1'||comment.userGender==null">
+                            <img src="./assets/imgs/man.png" class="contact-img"
+                                 *ngIf="comment.userGender =='1'||comment.userGender==null">
                             <img src="./assets/imgs/woman.png" class="contact-img" *ngIf="comment.userGender =='0'">
                         </ng-container>
                     </ion-col>
@@ -54,7 +50,8 @@
                         <p class="comment-time">
                             {{comment.createTime | date:'yyyy-MM-dd'}} <span>·</span>
                             <span class="repear" (click)="openMask(comment)">回复</span>
-              <span *ngIf="comment.replyNum > 0" class="repear" (click)="commentSearch(comment)">查看回复({{comment.replyNum}})</span>
+                            <span *ngIf="comment.replyNum > 0" class="repear"
+                                  (click)="commentSearch(comment)">查看回复({{comment.replyNum}})</span>
                         </p>
                     </ion-col>
                 </ion-row>

src/pages/home-pages/stuff-detail/stuff-detail.module.ts

 import { NgModule } from '@angular/core';
 import { IonicPageModule } from 'ionic-angular';
 import { StuffDetailPage } from './stuff-detail';
+import {ComponentsModule} from "../../../components/components.module";
 
 @NgModule({
   declarations: [
@@ -8,6 +9,7 @@ import { StuffDetailPage } from './stuff-detail';
   ],
     imports: [
         IonicPageModule.forChild(StuffDetailPage),
+        ComponentsModule,
     ],
 })
 export class StuffDetailPageModule {}

src/pages/tabs/discover/discover.html

@@ -93,8 +93,8 @@
                 <div class="swiper-slide">
                     <ion-content>
                         <div class="search-content">
-                            <ng-container *ngFor="let item of new">
-                                <div *ngIf="obj.childrenName != '你问我答'" class="search-item" (click)="goToDetail(item)">
+                            <ng-container *ngFor="let item of new;">
+                                <div *ngIf="obj.childrenName != '你问我答'" class="search-item" (click)="goToDetail(item)" >
                                     <p class="item-info">
                                         <span class="item-source">{{item.source}}</span>
                                         <span>{{item.publishTime | date:'yyyy-MM-dd'}}</span>
@@ -132,8 +132,8 @@
                                                             <ion-icon *ngIf="new.topTime"
                                                                       class="icon-fire iconfont"></ion-icon>
                                                         </p>
-                                                        <div (click)="clickVideo($event)">
-                                                            <video width="100%" height="100%"
+                                                        <div>
+                                                            <video width="100%" height="100%" (play)="clickVideo($event)"
                                                                    controls="controls" preload="metadata" muted="muted">
                                                                 <source [src]="picture +item.path+ '#t=0.1' ">
                                                                 您的浏览器不支持 html5。

src/pages/tabs/discover/discover.ts

-import {Component, ElementRef, NgZone, Renderer2, ViewChild} from '@angular/core';
+import {Component, ElementRef, HostListener, NgZone, Renderer2, ViewChild} from '@angular/core';
 import {Content, InfiniteScrollContent, IonicPage, NavController, NavParams, Slide, Slides} from 'ionic-angular';
 import {SearchNewPage} from "../../home-pages/search-new/search-new";
 import {TabsService} from "../tabs.service";
@@ -516,7 +516,6 @@ export class DiscoverPage {
         )
     }
 
-
     //前往搜索页面
     goToSearch() {
         this.navCtrl.push(SearchNewPage);
@@ -558,7 +557,15 @@ export class DiscoverPage {
         this.navCtrl.push('SelectTypePage', {type: 'issue'});
     }
 
+    //列表视频不同时播放
     clickVideo(e) {
-        console.log(e);
+        const videoArr = document.querySelectorAll("video");
+        for (let i = 0; i < videoArr.length; i++) {
+            if (videoArr[i] != e.target) {
+                videoArr[i].pause();
+            }
+        }
     }
+
+
 }

src/pages/tabs/home/home.ts

@@ -3,18 +3,13 @@ import {NavController, IonicPage, Slides, Content, InfiniteScrollContent, FabLis
 import {Http, Response} from '@angular/http';
 import {AppService, AppGlobal} from '../../../service/http.service';
 import {Storage} from '@ionic/storage';
-import {NoticePage} from "../notice/notice";
 import {Badge} from '@ionic-native/badge';
 import {TabsService} from "../tabs.service";
 import {CommonService} from "../../../provide/common.service";
-import {SearchNewPage} from "../../home-pages/search-new/search-new";
 import {StuffDetailPage} from "../../home-pages/stuff-detail/stuff-detail";
 import {EmitService} from "../../../provide/emit.service";
 import {DatePipe} from "@angular/common";
-import {SlideListComponent} from "../../../components/slide-list/slide-list";
-import {interval} from "rxjs/observable/interval";
 import {SwiperComponent} from "../../../components/swiper/swiper";
-import {VideoPlayer} from "@ionic-native/video-player";
 
 declare let Swiper: any;
 
@@ -90,7 +85,6 @@ export class HomePage {
                 public commonSer: CommonService, public emitSer: EmitService,
                 public zone: NgZone, public tabSer: TabsService,
                 public renderer: Renderer2,
-                private swiper: SwiperComponent, private videoPlayer: VideoPlayer,
                 public appService: AppService, public http: Http, public storage: Storage,
                 public badge: Badge, public tabsSer: TabsService) {