आईपैड के लिए जावास्क्रिप्ट आवेदन। सुझावों की जोड़ी

मुझे iPad के लिए फ्लैश ई-लर्निंग पाठ्यक्रम को अनुकूलित करने के लिए एक परियोजना मिली।
मैं कुछ बिंदुओं को साझा करना चाहता था।

मीडिया
परियोजना को वीडियो / ऑडियो फ़ाइलों को चलाने की अनुमति थी, और उपयोगकर्ता की ओर से अनावश्यक आंदोलनों के बिना।
IPad पर वीडियो केवल किसी उपयोगकर्ता को किसी चीज़ पर क्लिक करके खेला जा सकता है, अर्थात। मीडिया फ़ाइल को स्वचालित रूप से चलाएं, उदाहरण के लिए, जब पृष्ठ लोड होता है, तो यह काम नहीं करेगा, या यह नहीं होगा, लेकिन आईओएस के सभी संस्करणों में नहीं।
तो आपको पहली बार वीडियो / ऑडियो प्ले करना होगा एक क्लिक दूर। इसके अलावा, यदि src विशेषता को उसी टैग में बदल दिया जाता है, तो चालू घटना को पकड़ते हुए, प्लेबैक स्वचालित रूप से किया जा सकता है।
परियोजना के इस भाग के साथ कई समस्याएं थीं:
1. फ़ाइल अपलोड होने से पहले, वीडियो टैग पर क्विक लोगो प्रदर्शित किया गया था।
प्रदर्शन: कोई नहीं या दृश्यता: छिपा हुआ काम नहीं किया। मदद -webkit- ट्रांसफ़ॉर्म: ट्रांसलेशनएक्स (-2048px)।
2. वीडियो डाउनलोड होने और प्लेबैक के लिए तैयार होने से पहले ध्वनि की कुछ गड़बड़ हुई। वीडियो टैग की तैयार संपत्ति की जांच करके समस्या का समाधान किया गया था।
3. किसी कारण से, कभी-कभी, उपयोगकर्ता के क्लिक पर, इच्छित वीडियो फ़ाइल के बजाय, एक ऑडियो फ़ाइल चलायी जाती थी। मैंने पढ़ा कि iOS मीडिया में ऑब्जेक्ट को सिंगलटन के रूप में लागू किया जाता है, अर्थात। प्रति पृष्ठ केवल एक उदाहरण हो सकता है। सामान्य तौर पर, यह सब एक सिद्धांत है और इसने मुझे कोई आसान नहीं बनाया। मैंने src विशेषता को हटाने या इसे खाली करने का प्रयास किया - कोई प्रभाव नहीं। प्रयोगों के माध्यम से, src = ".." मदद की (src = "।" फिर भी मदद नहीं की)। शायद, कुछ और सुंदर के साथ आना संभव था, लेकिन क्योंकि मीडिया टैग को हटाना असंभव था और तब मैं इस गड़बड़ से बहुत थक गया था, फिर मैंने सब कुछ इस तरह छोड़ दिया।

तो, वीडियो फ़ाइल चला रहा है, यह करें:

$(video).css("-webkit-transform", "translateX(-2048px)"); // -

/* , */
video.play();
if(video.readyState !== 4){
setTimeout(function(){
video.pause();
}, 1);
}

/* , */
$(video).bind("canplaythrough", function(){
$(video).css("-webkit-transform", "translateX(0)");
video.play();
});

वीडियो के बारे में एक और बात - आप इस पर एक क्लिक नहीं पकड़ सकते हैं, आपको शीर्ष पर एक परत लगाने और पहले से ही इस पर घटना को ट्रैक करने की आवश्यकता है।

खिड़की की घटनाएँ
1. ononline, onoffline - उपयोगकर्ता को कुछ चेतावनी दिखाने के लिए इंटरनेट से कनेक्शन को ट्रैक करना आवश्यक था और यदि संभव हो तो, काम करना जारी रखें।
2. onpageshow - तब पूरा होता है जब उपयोगकर्ता ने विंडो बंद नहीं की है, डिवाइस पर "होम" बटन पर क्लिक किया और फिर वापस सफारी में लौट आया।
3. onorientationchange - चित्र और डिवाइस के लैंडस्केप मोड के बीच संक्रमण पर ही पूरा होता है। यहां आप मोड निर्धारित करने के लिए window.orientation value पकड़ सकते हैं।
4. onbeforeunload - यह, ऐसा लगता है, iPad पर एक मानक घटना काम नहीं करती है। मुझे पूरे आवेदन को एक बाहरी iframe में लोड करना पड़ा और इसे ऑनलोड लोड घटना को ट्रैक करना पड़ा।

एनीमेशन
1. बेहतर सीएसएस का उपयोग करके -webkit- संक्रमण के साथ किया। यह बहुत तेजी से काम करता है, और यह बहुत महत्वपूर्ण है, खासकर iPad1 के लिए।
2. शीर्ष और बाएं गुणों को एनिमेट करने के बजाय, ट्रांसलेशन 3 डी का उपयोग करें।
3. अच्छी तरह से एनिमेटेड स्केल, यह पोर्ट्रेट और लैंडस्केप मोड के बीच स्विच करते समय काम आ सकता है।
4. पूरी तरह से एनिमेटेड अस्पष्टता, चौड़ाई, ऊंचाई, खासकर अगर तत्व को -webkit- बॉक्स-छाया पर सेट किया गया है।

सीएसएस
यहां सब कुछ बहुत अच्छा है, एक ब्राउज़र और कई उपयोगी गुण।
1. जहाँ तक संभव हो, आपको चित्रों को डाउनलोड करने से बचना होगा। स्नातक, मंडलियां, त्रिकोण - सब कुछ शैलियों के साथ किया जा सकता है।
2. तत्वों को छुपाने का सबसे तेज़ तरीका ट्रांसलेशन 3 डी या ट्रांसलेक्स गुणों का उपयोग करना है।
3. अध्ययन-किट किट गुणों की आवश्यकता है, यह बहुत समय बचा सकता है। यहां आप http://css-infos.net/properties/webkit देख सकते हैं।

घटनाओं को स्पर्श करें
1. उपयोग किया गया jQuery मोबाइल, हालांकि मुझे इसे थोड़ा ऊपर उठाना था, अन्यथा उसने पृष्ठ पर अतिरिक्त टैग जोड़े। स्क्रॉलव्यू प्लगइन के साथ संयोजन में, एक शक्तिशाली स्कोरर प्राप्त किया जाता है। Http://cubiq.org/iscroll की भी कोशिश की
2. Drag'n'Drop के लिए मैंने इस प्लग-इन का उपयोग किया http://www.gotproject.com/blog/post2.html , हालांकि मुझे इसे खत्म करना पड़ा, क्योंकि उन्होंने तत्वों के पैमाने को ध्यान में नहीं रखा।
3. क्लिक के बजाय, जब भी संभव हो मैंने टचस्टार्ट का उपयोग किया - बहुत तेज।

उत्पादकता
1. iPad1 और iPad2 प्रदर्शन में बहुत अलग हैं, इसलिए iPad1 का उपयोग करके विकसित करना बेहतर है।
2. डोम तत्वों को जोड़ने / हटाने के साथ गंभीर जोड़तोड़ से बचने के लिए अच्छा होगा - iPad1 कभी-कभी बस झुकता है।
3. हेडर, डॉट कॉम, का उपयोग करके एप्लिकेशन हेडर में फ़ाइलों को कनेक्ट करना भी बेहतर है, जिसके बिना ब्राउज़र मुझे कभी-कभी बिना किसी चेतावनी के क्रैश कर देता है।

सामान्य तौर पर, काम की छाप मिश्रित थी - मुझे लगातार कुछ हैक की तलाश करनी थी, और इस वजह से मुझे अक्सर यह महसूस होता था कि सब कुछ वैसा नहीं हो रहा है जैसा कि होना चाहिए। परियोजना के अपने आकलन में, उन्हें इस तथ्य के कारण दो बार गलत किया गया था कि इससे पहले उन्होंने आईपैड उपकरणों के साथ बिल्कुल भी काम नहीं किया था।
लेकिन, जब काम के अंत में मैंने परिणाम को देखा, तो यह अच्छा था।