Angular Nativescript 6.3.3 | Video is not displaying

danouche93 commented 3 years ago

Hi, I tried to use your plugin for my android/ios app. I'm currently trying to make it work on android and didn't try it on iOS. I did everything in the installation to make it work without success, there's just nothing and no errors.

my package.json

{
  "nativescript": {
    "id": {
      "android": "org.nativescript.TinaApp",
      "ios": "org.nativescript.TinaAppIos"
    },
    "tns-android": {
      "version": "6.3.1"
    },
    "tns-ios": {
      "version": "6.5.2"
    }
  },
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "repository": "<fill-your-repository-here>",
  "scripts": {
    "lint": "tslint \"src/**/*.ts\""
  },
  "dependencies": {
    "@angular/animations": "~8.2.0",
    "@angular/common": "~8.2.0",
    "@angular/compiler": "~8.2.0",
    "@angular/core": "~8.2.0",
    "@angular/forms": "~8.2.0",
    "@angular/platform-browser": "~8.2.0",
    "@angular/platform-browser-dynamic": "~8.2.0",
    "@angular/router": "~8.2.0",
    "@nstudio/nativescript-checkbox": "^1.0.0",
    "@nstudio/nativescript-loading-indicator": "^4.0.0",
    "@nstudio/nativescript-pulltorefresh": "^2.0.0",
    "nativescript-angular": "~8.20.3",
    "nativescript-datetimepicker": "^1.2.3",
    "nativescript-geolocation": "^5.1.0",
    "nativescript-iqkeyboardmanager": "^1.5.1",
    "nativescript-plugin-firebase": "^10.5.2",
    "nativescript-sound-kak": "^1.2.0",
    "nativescript-theme-core": "^1.0.6",
    "nativescript-ui-sidedrawer": "^8.0.1",
    "nativescript-videoplayer": "^4.2.1",
    "platform": "^1.3.6",
    "reflect-metadata": "~0.1.12",
    "rxjs": "^6.4.0",
    "tns-core-modules": "^6.3.2",
    "tns-platform-declarations": "^6.5.15",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~8.2.0",
    "@nativescript/schematics": "^0.5.2",
    "@ngtools/webpack": "~8.2.0",
    "codelyzer": "~4.5.0",
    "nativescript-dev-webpack": "~1.4.0",
    "node-sass": "^4.7.1",
    "tslint": "~5.19.0",
    "typescript": "~3.5.3"
  },
  "gitHead": "fa98f785df3fba482e5e2a0c76f4be1fa6dc7a14",
  "readme": "NativeScript Application"
}

HTML

<VideoPlayer src="~/assets/videos/other.mp4" height="300" width="300" autoplay="true" controls="true">
</VideoPlayer>

Typescript

import { registerElement } from "nativescript-angular/element-registry";
registerElement("VideoPlayer", () => require("nativescript-videoplayer").Video);

I tried with different videos to see if this is the problem but it's not. Thanks.

bradmartin commented 3 years ago

Looks like you're using a local video, first guess would be the mp4 is not being copied into the bundle correctly. So you might want to check your webpack.config and be sure in the CopyPlugin portion it includes the assets dir or you add a glob pattern for mp4 files. This process has been simplified on NS8, but since you're on an older major version, that is where I would start.

This line worked for NS6 and NS7 - https://github.com/nstudio/nativescript-videoplayer/blob/master/demo/webpack.config.js#L282 to include all the mp4 in the app directory.

danouche93 commented 3 years ago

Ok that was it, I added { from: { glob: "**/*.mp4" } } in the CopyWebpackPlugin of webpack.config and it worked. Thanks a lot !!

nstudio / nativescript-videoplayer

Angular Nativescript 6.3.3 | Video is not displaying #189