Πρόσφατα, μελετάμε τη χρήση βίντεο αντί για κινούμενα σχέδια και βίντεο αντί για sprite animation. Αυτό το είδος βίντεο ονομάζουμε διαδραστικό βίντεο.
Παραδοσιακά sprite animation: μεγάλος χώρος στο δίσκο, αργή λήψη, ειδικά η διαδικτυακή αναπαραγωγή, θα είναι πιο αργή
Πάρα πολλά αρχεία, πάρα πολλά αιτήματα http κατά την αναπαραγωγή στο διαδίκτυο, θα προκαλέσουν αργή απόκριση ή μη φυσιολογική συμπεριφορά. Επομένως, υπάρχει επείγουσα ανάγκη να αναπτυχθεί ένα σύνολο τεχνολογίας για την αντικατάσταση του sprite animation με βίντεο. Αυτό το είδος βίντεο ονομάζουμε διαδραστικό βίντεο
Προβλήματα με το παραδοσιακό βίντεο:
1. Μπορεί να παιχτεί μόνο σε περιοχή τετράγωνου σχήματος
2. Κάτω από το iPad, είναι ένα παράθυρο για αναπαραγωγή και κάτω από το iPhone, μπορεί να αναπαραχθεί μόνο σε πλήρη οθόνη.
3. Παίζοντας σίγουρα θα εμφανίζεται στο προσκήνιο
Το διαδραστικό βίντεο έχει τα ακόλουθα χαρακτηριστικά:
Κάτω από το iPhone, δεν απαιτείται αναπαραγωγή σε πλήρη οθόνη, μπορεί να αναπαραχθεί σε μία περιοχή
Το διαδραστικό βίντεο μπορεί να εμφανιστεί κάτω από τα συνηθισμένα γραφικά αντικείμενα
Το διαδραστικό βίντεο μπορεί να έχει μάσκα, ώστε να μπορεί να αφαιρεθεί το φόντο του βίντεο και να ενσωματωθούν το βίντεο και τα συνηθισμένα γραφικά αντικείμενα
Περίληψη: Για το βίντεο που χρησιμοποιείται για αναπαραγωγή, θα το ορίσουμε ως παραδοσιακό βίντεο. Για βίντεο που πρέπει να χρησιμοποιηθούν για συγκεκριμένους σκοπούς, τα ορίζουμε ως διαδραστικά βίντεο. Η έρευνα έδωσε προκαταρκτικά αποτελέσματα. Παρεμπιπτόντως, συνοψίζει τα πραγματικά προβλήματα που προέκυψαν στην ανάπτυξη ήχου και εικόνας του κινητού H5 τα επόμενα χρόνια και παρέχει τις δικές του λύσεις. Ρίξτε μια ματιά στο τελικό πραγματικό αποτέλεσμα: συμβατό με υπολογιστή (>IE9), iphone, ipad, Android 5.0
Λύστε τα προβλήματα χειροκίνητου, αυτόματου και παραθύρου στο iPhone και μπορεί βασικά να χρησιμοποιηθεί στην πραγματική παραγωγή. Στα δεξιά είναι το αρχικό αρχείο βίντεο mp4, το βίντεο στα αριστερά αντικαθιστά την κινούμενη εικόνα και στη συνέχεια υποστηρίζει το εφέ μάσκας φόντου, μπορεί να αποκαλύψει τον βασικό χάρτη και υποστηρίζει μια σειρά διαδραστικών λειτουργιών
Ήχος H5
Κάθε φορά που ένα ηχητικό αντικείμενο περνά από νέο ήχο, μπορεί να δει κανείς ένα νέο νήμα στο IOS.
Λύση: Ένα νέο αντικείμενο ήχου, αντικαθιστώντας διαφορετικές διευθύνσεις ήχου, επιτυγχάνει τον στόχο να μην ανοίξει περισσότερα νήματα.
Η υποστήριξη δεν είναι καλή στο Android
Λύση: Το πρόβλημα στην κατώτερη έκδοση του Android δεν έχει λυθεί. Γενικά, η μικτή ανάπτυξη μπορεί να αντιμετωπιστεί προσαρμόζοντας την υποκείμενη διεπαφή, όπως το phonegap
Δεν είναι δυνατή η αυτόματη αναπαραγωγή στο iPhone
Λύση: Η αυτόματη αναπαραγωγή στο iPhone είναι μια διαδικασία που γίνεται όταν σχεδιάστηκε το IOS. Φαίνεται να αποτρέπει την αυτόματη κλοπή της κυκλοφορίας.
Με απλά λόγια, πρέπει να ενεργοποιηθεί χειροκίνητα με προσομοίωση του χρήστη, επομένως πρέπει να καλέσουμε αυτό το κομμάτι κώδικα από την αρχή:
Αντιγράψτε τον κωδικό
//Επιλύστε το πρόβλημα ότι το πρόγραμμα περιήγησης ios δεν μπορεί να αναπαράγει αυτόματα ήχο. Δημιουργήστε νέο ήχο κατά τη φόρτωση και αντικαταστήστε το src όταν το χρησιμοποιείτε.
Xut.fix = Xut.fix||{};
if (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = ψευδής
var fixaudio = συνάρτηση() {
αν (!isAudio) {
isAudio = true;
Xut.fix.audio = νέος Ήχος();
document.removeEventListener('touchstart', fixaudio, false);
}
};
document.addEventListener('touchstart', fixaudio, false);
}
Αντιγράψτε τον παραπάνω κωδικό
Εάν συνδέσετε έναν τέτοιο κώδικα στο σώμα: δημιουργήστε ένα ηχητικό αντικείμενο ενεργοποιώντας το χειροκίνητα και, στη συνέχεια, αποθηκεύστε το στο καθολικό
Όταν χρησιμοποιείται ως εξής:
Αντιγράψτε τον κωδικό
//Εάν χρησιμοποιείτε το Xut.fix.audio για να καθορίσετε το src για το πρόγραμμα περιήγησης ios, ανατρέξτε στο app.js για προετοιμασία
if (Xut.fix.audio) {
ήχου
=
Xut.fix.audio;
audio.src = url;
} Else {
ήχος = νέος Ήχος(url);
}
audio.autoplay = true;
audio.play();
Απλώς αντικαταστήστε το ακουστικό αντικείμενο. Με απλά λόγια, πρέπει να είναι το αντικείμενο που δημιουργήθηκε από το έναυσμα χρήστη για αναπαραγωγή.
Ήχος βίντεο H5
Οι ετικέτες βίντεο μπορεί να χρησιμοποιούνται σπάνια στο τερματικό για κινητά, η υποστήριξη Android είναι πολύ κακή, οπτικά το 5.0 είναι καλύτερο. Το παλιό πρόβλημα στο iPhone δεν μπορεί να αναπαραχθεί αυτόματα (Αποθήκευση δεδομένων, αποθηκεύστε την αδερφή σας!!!) και η προεπιλογή είναι έλεγχος πλήρους οθόνης για αναπαραγωγή. Για πολύ καιρό, αγνόησα αυτήν την επεξεργασία βίντεο. Το Android χρησιμοποιεί το κάτω στρώμα, το iPhone χρησιμοποιεί απευθείας το VideoJS, το ενσωματωμένο φλας και τον διακόπτη h5, το flash έχει επίσης προβλήματα υποστήριξης. Πριν από λίγο είχε απαίτηση το αφεντικό. Εφαρμόσαμε πάρα πολλά κινούμενα σχέδια, όλα ήταν συνδυασμένα κινούμενα σχέδια sprite διαδρομών, που κυμαίνονταν από εκατοντάδες megabyte έως εκατοντάδες megabyte σε μία εφαρμογή, επομένως υπάρχει επείγουσα ανάγκη για μια λύση για τη συμπίεση εικόνων. Η τελική λύση είναι η χρήση βίντεο αντί για κινούμενα σχέδια, γιατί η τεχνολογία συμπίεσης βίντεο έχει αναπτυχθεί εδώ και πολλά χρόνια και είναι πολύ ώριμη. Τώρα η τεχνολογία συμπίεσης βίντεο μπορεί εύκολα να μετατρέψει 720P. Ταινίες υψηλής ευκρίνειας, συμπιεσμένες σε 10M/min ή 160K/sec. Το μέγεθος αρχείου της ακολουθίας εικόνων είναι τουλάχιστον αρκετές δεκάδες φορές μικρότερο. Ταυτόχρονα, οι περισσότερες συσκευές υποστηρίζουν την αποσυμπίεση του βίντεο από το υλικό, έτσι ώστε η κατανάλωση CPU της αναπαραγωγής βίντεο να είναι πολύ χαμηλή, η κατανάλωση μπαταρίας είναι επίσης πολύ χαμηλή και η ταχύτητα αναπαραγωγής είναι επίσης γρήγορη. Ακόμη και η αναπαραγωγή 25 καρέ σε πλήρη οθόνη μπορεί εύκολα να επιτευχθεί.
Το σχέδιο έχει οριστικοποιηθεί και αρκετά προβλήματα που πρέπει να λυθούν είναι εδώ.
Ολόκληρο το βίντεο, συμπεριλαμβανομένων ορισμένων αντικειμένων στο βίντεο, μπορεί να ανταποκρίνεται στα κλικ του χρήστη, στις διαφάνειες και σε άλλες λειτουργίες κάτω από το iPhone, μπορεί να αναπαραχθεί σε παράθυρο, να φιλτράρει το φόντο και μπορεί να χρησιμοποιηθεί σαν εικόνα PNG. Το βίντεο αντικαθιστά το κινούμενο σχέδιο και στη συνέχεια υποστηρίζει το εφέ μάσκας φόντου, το οποίο μπορεί να αποκαλύψει τη βασική εικόνα και επίσης λύνει το πρόβλημα της χειροκίνητης, αυτόματης και ημιτελούς οθόνης
windowing iphone
Λύση: Συνδυάστε την επεξεργασία μέσω ετικετών καμβά + βίντεο
Αρχή: Αποκτήστε το αρχικό πλαίσιο εικόνας του βίντεο και τραβήξτε το στη σελίδα μέσω καναβών
Εδώ επισυνάπτω απευθείας τον πηγαίο κώδικα, ο κώδικας είναι γραμμένος γενικά, αλλά επισημαίνει μερικά βασικά σημεία
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
Βίντεο αντί για κινούμενα σχέδια
Αυτό είναι λίγο δυσκίνητο. Πρέπει να είναι διαδραστικό και να σύρετε τον καμβά για να επιτύχετε τον σκοπό του ελέγχου της εικόνας. Δεν έχω τελειώσει ακόμα το γράψιμο όλων, και οι γενικές ανάγκες της εταιρείας δεν θα το έχουν αυτό. Ακολουθεί μια σύντομη περιγραφή, επεξεργάζεται επίσης με καμβά + βίντεο, αλλά απαιτείται ένα αποθηκευμένο δοχείο καμβά για να γίνει προεπεξεργασία. Μέσω της προεπεξεργασίας, λάβετε τα pixel κάθε εικόνας και αλλάζοντας την τιμή κάθε pixel RBG, μπορεί να φιλτράρει το φόντο, ώστε να μπορεί να χρησιμοποιηθεί σαν εικόνα PNG. Θα το γράψω αργότερα και θα το δημοσιεύσω~~
άλλο προϊόν μας:
