2010-09-27 11 views
9

मैं अपने आईपैड वेब ऐप के अंदर कुछ घटनाओं को एक HTML5 वीडियो तत्व में संलग्न करने की कोशिश कर रहा हूं लेकिन वे फायरिंग नहीं लग रहे हैं? मैंने डिवाइस और सिम्युलेटर दोनों पर इसका परीक्षण किया है और एक ही परिणाम प्राप्त कर लिया है। हालांकि घटनाएं (कम से कम ऑनक्लिक के लिए) डेस्कटॉप सफारी में ठीक काम करती हैं। मैंने एक div के लिए वीडियो तत्व को स्वैप करने का प्रयास किया है और घटनाएं ठीक हैं? क्या कोई और इस पर आ गया है और उसके आसपास काम करने का विचार है?आईपैड पर एचटीएमएल 5 वीडियो तत्व ऑनक्लिक या टचस्टार्ट घटनाओं को आग नहीं लगाता है?

<html> 
     <head> 
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
       <title>Test video swipe</title> 
     </head> 
     <body> 

       <video src='somevid.mp4' id='currentlyPlaying' width='984' height='628' style='background-color:#000;' controls='controls'></video> 

       <script> 
         var theVid = document.getElementById("currentlyPlaying"); 

           theVid.addEventListener('touchstart', function(e){ 
             e.preventDefault(); 
             console.log("touchstart"); 
           }, false); 

           theVid.addEventListener('click', function(e){ 
             e.preventDefault(); 
             console.log("click"); 
           }, false); 

           theVid.addEventListener('touchmove', function(e){ 
             console.log("touchmove"); 
           }, false); 

           theVid.addEventListener('touchend', function(e){ 
             console.log("touchend"); 
           }, false); 

           theVid.addEventListener('touchcancel', function(e){ 
             console.log("touchcancel"); 
           }, false); 



       </script> 
     </body> 
</html> 

उत्तर

15

आईपैड पर वीडियो तत्व, यदि आप नियंत्रण विशेषता का उपयोग करते हैं तो ईवेंट तत्व निगल जाएगा। यदि आप तत्व को स्पर्श घटनाओं का जवाब देना चाहते हैं तो आपको अपने नियंत्रण प्रदान करना होगा।

+0

शानदार! वह काम किया! मैं मोबाइल सफारी और डेस्कटॉप सफारी के साथ कुछ असुविधाओं में आया हूं। उनमें से कुछ वीडियो पर ऑटोप्ले को अक्षम करने की तरह सेब साइट पर दस्तावेज किए गए हैं लेकिन लगता है कि वहां अनियंत्रित क्विर्क का भार है या मैं बग कहता हूं! क्या आप इन मतभेदों को सूचीबद्ध करने वाले किसी भी संसाधन के बारे में जानते हैं? –

+0

मैं इसे काम नहीं कर सका :(। आप वीडियो तत्व को वास्तव में कैसे बना रहे हैं? मेरा दिखता है और जेएस में मैं दस्तावेज़ कर रहा हूं .getElementById (" vid ")। addEventListener ('क्लिक करें', फ़ंक्शन (ई) {e.preventDefault(); चेतावनी (" क्लिक किया गया ");}) ; यह डेस्कटॉप सफारी पर ठीक काम करता है लेकिन आईपैड/आईफोन पर नहीं। कृपया कुछ कामकाज का सुझाव दें। – bhups

+0

@bhups - यदि आपके कोई प्रश्न है, तो * प्रश्न पूछें *, किसी अन्य समस्या के किसी अन्य व्यक्ति के उत्तर पर टिप्पणी न करें। – Quentin

7

पिछले कुछ हफ्तों में अपने स्वयं के दर्दनाक अनुभवों से मैं ऐसी सूची शुरू कर सकता हूं (कम से कम आईपैड 3.2 के लिए)। इनमें से कुछ "विशेषताओं" को दस्तावेज किया जा सकता है, लेकिन प्रासंगिक वाक्य को अक्सर ढूंढना मुश्किल होता है।

  • volume संपत्ति नजरअंदाज कर दिया है (यदि आप इसे स्थापित कर सकते हैं, और इसे बदलने के लिए दिखाई देगा, लेकिन डिवाइस पर वास्तविक मात्रा प्रभावित नहीं होगा)।
  • currentTime संपत्ति केवल पढ़ने के लिए है। इसके लिए मेरा कामकाज load() पर कॉल करना है, जो कम से कम मुझे क्लिप की शुरुआत में रीसेट करने की अनुमति देता है।
  • onended ईवेंट विश्वसनीय रूप से तब तक पोस्ट नहीं करेगा जब तक कि नियंत्रण दिखाई न दे। इस के लिए मेरे वैकल्पिक हल timeupdate घटना पर नजर रखने और के रूप में आप कहते हैं, autobuffer और autoplay अक्षम हैं duration
  • को currentTime तुलना करने के लिए है।
  • वीडियो एप्लिकेशन कैश सेटिंग्स के बावजूद स्थानीय रूप से कैश नहीं करेगा।
  • <video> टैग पर लागू होने पर कई सीएसएस नियम अपेक्षित कार्य नहीं करते हैं - उदाहरण के लिए। opacity और z-index दोनों अप्रभावी प्रतीत होते हैं, जिसका अर्थ है कि आप वीडियो को मंद या छुपा नहीं सकते हैं। आप display:none सेट कर सकते हैं, लेकिन यह बहुत ही अचानक है।

जैसा कि मैंने कहा, यह शायद एक संपूर्ण सूची नहीं है, और मैं जोड़ों या सुधारों का स्वागत करता हूं।

(इसके अलावा, के बाद ज्यादा Googling, मैं एक सूची है कि मोबाइल सफारी पर समर्थित हैं क्यूटी प्लगइन तरीकों और संपत्तियों की अल्प उप-समूह की here पाया जाता है)।

+1

महान उत्तर मैंने उपर्युक्त सभी को भी अनुभव किया है और इसे कठिन तरीके से सीखने के लिए आवश्यक है। उम्मीद है कि विकास की शुरुआत से पहले कोई इसे पढ़ेगा! – Develoger

+0

वही है, ऐसे उपकरणों पर वीडियो एक महान दर्द हो सकता है। मेरे पिछले 2 सप्ताह काफी डरावने हैं और इस उत्कृष्ट उत्तर के समान निष्कर्षों के साथ आए हैं। – Nobita

संबंधित मुद्दे