typescript - Provocări legate de schimbările orientării ecranului în aplicația Ionic/Capacitor/Angular care folosește Video.js

Dezvolt o aplicație mobilă folosind Ionic 7, Capacitor 5, Angular 16 și Video.js 8. Aplicația mea include un player video (player standard Video.js, nu unul personalizat) cu funcționalități legate de orientarea ecranului. Cu toate acestea, întâmpin probleme specifice legate de detectarea schimbărilor de orientare atunci când dispozitivul este blocat într-o anumită orientare.

Iată ce încerc să implementez:

  1. Comutator ecran complet cu blocare orientare: Playerul Video.js are un comutator pentru ecran complet. Când este activat, aplicația ar trebui să se blocheze în modul peisaj. Dimpotrivă, dezactivarea acestuia ar trebui să readucă aplicația în modul portret.

  2. Problemă cu pluginul de orientare a ecranului al Capacitor: Am încercat să folosesc pluginul de orientare a ecranului al Capacitor, dar se pare că nu funcționează așa cum mă așteptam. Nu reușește să declanșeze evenimentele de schimbare a orientării atunci când dispozitivul este blocat pe o anumită orientare și apoi este rotit fizic.

  3. Detectarea orientării pe verticală atunci când este blocată pe modul peisaj: Provocarea principală este detectarea momentului în care dispozitivul se schimbă fizic în orientare pe verticală, chiar și atunci când este blocat pe modul peisaj. Metodele standard nu declanșează evenimentele necesare în aceste condiții.

  4. Menținerea controalelor personalizate Video.js în modul ecran complet: Trebuie să mă asigur că intrarea în modul ecran complet pe playerul video folosește controalele Video.js și nu controalele native ale playerului de pe iOS și Android.

Cod de exemplu pentru referință:

import videojs from 'video.js';

// Initialize video player
const player = videojs(document.querySelector('#my-video'));

// Function to toggle fullscreen and lock orientation
function toggleFullscreen() {
  // Need to figure out the code for here 
}

// Listener for fullscreen toggle
player.controlBar.fullscreenToggle.on('click', toggleFullscreen);

// Issue: Orientation change events are not firing when locked in landscape

Căutarea de sfaturi despre:

  • Metode sau pluginuri compatibile cu Ionic, Capacitor, Angular și Video.js pentru detectarea eficientă a schimbărilor de orientare a ecranului, chiar și atunci când acesta este blocat într-o singură orientare.
  • Asigurarea faptului că playerul Video.js rămâne cu controalele sale în modul fullscreen, fără a trece la controalele implicite pe iOS/Android.

Interogare suplimentară:

În lumina provocărilor întâmpinate cu window.screen.orientation și a pluginului Capacitor pentru orientarea ecranului, care nu funcționează așa cum era de așteptat (în special nu declanșează evenimente atunci când dispozitivul este blocat în modul landscape și apoi rotit la portrait), mă gândesc dacă ar trebui să încetez complet utilizarea window.screen.orientation. Mă gândesc să dezvolt propriul meu plugin personalizat Capacitor pentru a gestiona orientarea ecranului mai fiabil. Scopul meu este să mă asigur că detectarea orientării funcționează eficient chiar și atunci când ecranul este blocat într-un mod specific, precum landscape. Dacă cineva aici are experiență în acest domeniu, îndrumarea dvs. asupra faptului dacă renunțarea la window.screen.orientation este un pas rezonabil și cum să abordez cel mai bine dezvoltarea pluginului personalizat pentru iOS și Android ar fi extrem de valoroasă.

Apreciez orice informații, sugestii sau experiențe pe care le puteți împărtăși pentru a ajuta la abordarea acestor provocări specifice. Vă mulțumesc!