如何解决修复了Plyr视频播放器与离子角度节点的集成播放器未显示
我正在尝试将Plyr与Ionic集成在一起，但无法加载。 离子信息： 离子CLI：5.4.16 离子框架：离子角3.9.5 @ ionic / app-scripts：3.2.4 科尔多瓦：
Cordova CLI：10.0.0 Cordova平台：Android 8.1.0 Cordova插件：cordova-plugin-ionic-keyboard 2.2.0，cordova-plugin-ionic-webview 4.2.1（和其他18个插件） npm：6.14.6 操作系统：Windows 10
Package.json
"scripts": {
"start": "ionic-app-scripts serve","clean": "ionic-app-scripts clean","build": "ionic-app-scripts build","lint": "ionic-app-scripts lint"
},"dependencies": {
"@angular/animations": "^6.1.10","@angular/cli": "^6.1.10","@angular/common": "^6.1.10","@angular/compiler": "^6.1.10","@angular/compiler-cli": "6.1.10","@angular/core": "^6.1.10","@angular/forms": "^6.1.10","@angular/http": "^6.1.10","@angular/platform-browser": "^6.1.10","@angular/platform-browser-dynamic": "^6.1.10","@angular/platform-server": "^6.1.10","@angular/router": "^6.1.10","@chrisben/imgcache.js": "^2.1.1","@ionic-native/barcode-scanner": "^4.20.0","@ionic-native/camera": "^4.20.0","@ionic-native/core": "~4.20.0","@ionic-native/device": "^4.20.0","@ionic-native/facebook": "^4.20.0","@ionic-native/file": "^4.20.0","@ionic-native/file-transfer": "^4.20.0","@ionic-native/google-plus": "^4.20.0","@ionic-native/http": "^4.20.0","@ionic-native/in-app-browser": "^4.20.0","@ionic-native/in-app-purchase": "^4.20.0","@ionic-native/push": "^4.20.0","@ionic-native/splash-screen": "~4.20.0","@ionic-native/status-bar": "~4.20.0","@ionic/storage": "2.2.0","@ngx-translate/core": "8.0.0","@ngx-translate/http-loader": "^2.0.0","@types/core-js": "2.5.0","@types/dragula": "^2.1.34","chart.js": "^2.8.0","cordova-android": "^8.1.0","cordova-plugin-camera": "^2.4.1","cordova-plugin-compat": "^1.2.0","cordova-plugin-console": "^1.0.5","cordova-plugin-device": "^1.1.7","cordova-plugin-facebook4": "^1.7.4","cordova-plugin-file": "^4.3.3","cordova-plugin-file-transfer": "^1.6.3","cordova-plugin-googleplus": "^8.5.1","cordova-plugin-inappbrowser": "^3.1.0","cordova-plugin-inapppurchase": "^1.1.0","cordova-plugin-privacyscreen": "^0.4.0","cordova-plugin-splashscreen": "^4.1.0","cordova-plugin-statusbar": "^2.4.2","cordova-plugin-whitelist": "^1.3.3","cordova-sqlite-storage": "^2.0.4","cordova-support-google-services": "^1.3.2","core-js": "^2.6.0","dragula": "^3.7.2","firebase": "^6.2.4","hls.js": "0.12.2","imgcache.js": "^1.1.1","ionic-angular": "3.9.5","ionic-emoji-picker": "^0.1.8","ionic-plugin-keyboard": "^2.2.1","ionicons": "3.0.0","ng2-dragula": "^1.5.0","ngx-plyr": "^1.2.2","phonegap-plugin-barcodescanner": "^8.1.0","phonegap-plugin-multidex": "^1.0.0","phonegap-plugin-push": "^2.3.0","plyr": "^3.4.7","rxjs": "^6.4.0","rxjs-compat": "^6.4.0","sw-toolBox": "3.6.0","videogular2": "^6.1.1","zone.js": "0.8.29"
},"devDependencies": {
"@ionic/app-scripts": "3.2.4","cordova-plugin-ionic-keyboard": "^2.0.5","cordova-plugin-ionic-webview": "^4.1.0","typescript": "~2.8.2"
},"config": {
"ionic_copy": "./config/copy.config.js"
},tsconfig.json
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,"declaration": false,"emitDecoratorMetadata": true,"experimentalDecorators": true,"lib": [
"dom","es2015"
],"module": "es2015","moduleResolution": "node","sourceMap": true,"target": "es5"
},"include": [
"src/**/*.ts"
],"exclude": [
"node_modules","src/**/*.spec.ts","src/**/__tests__/*.ts"
],"compileOnSave": false,"atom": {
"rewriteTsconfig": false
}
}
status.html
<div *ngIf="item.type == 'unit' && item.Meta.video">
<video controls playsinline data-poster="assets/images/rising_video.jpg" id="playerID" >
<source [src]="item.Meta.video" type="video/mp4" size="360">
</video>
</div>
status.ts
....
....
import Plyr from 'plyr';
@Component({
selector: 'status',templateUrl: 'status.html',})
export class CourseStatusPage implements OnInit{
....
constructor(...){}
ngOnInit(){
const player = new Plyr('#playerID',{ captions: { active: true } });
}
Index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<Meta charset="UTF-8">
<title>Player</title>
<Meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<Meta name="format-detection" content="telephone=no">
<Meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<Meta name="theme-color" content="#4e8ef7">
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error',err));
}
</script>-->
<link href="build/main.css" rel="stylesheet">
<link rel="stylesheet" href="build/plyr.css">
</head>
<body>
<!-- Ionic's root component and where the app will load -->
<script src="build/plyr.js"></script>
<ion-app></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<script src="build/vendor.js"></script>
<!-- The bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
</html>
module.exports = {
copyAssets: {
src: ['{{SRC}}/assets/**/*'],dest: '{{WWW}}/assets'
},copyIndexContent: {
src: ['{{SRC}}/index.html','{{SRC}}/manifest.json','{{SRC}}/service-worker.js'],dest: '{{WWW}}'
},copyFonts: {
src: ['{{ROOT}}/node_modules/ionicons/dist/fonts/**/*','{{ROOT}}/node_modules/ionic-angular/fonts/**/*'],dest: '{{WWW}}/assets/fonts'
},copypolyfills: {
src: ['{{ROOT}}/node_modules/ionic-angular/polyfills/polyfills.js'],dest: '{{BUILD}}'
},copySwToolBox: {
src: ['{{ROOT}}/node_modules/sw-toolBox/sw-toolBox.js'],copyPlyrCss: {
src: ['{{ROOT}}/node_modules/plyr/dist/plyr.css','{{ROOT}}/node_modules/plyr/dist/plyr.js','{{ROOT}}/node_modules/plyr/dist/plyr.js.map'],dest: '{{BUILD}}'
}
}
其他一切正常。加载时没有错误。在ionic serve命令之后，其加载默认的HTML播放器而不是plyr。
视频播放器的皮肤没有显示。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
