मोबाइल सफारी: लिंक (<a>) वीडियो तत्व पर तत्व

पर काम नहीं करता है मेरी वर्तमान प्रोजेक्ट एक HTML वेबसाइट है जिसमें एक ड्रॉपडाउन मेनू (जावास्क्रिप्ट/jquery) और एक HTML5 वीडियोप्लेयर (केवल वीडियो टैग) शामिल है।मोबाइल सफारी: लिंक (<a>) वीडियो तत्व पर तत्व

मेनू प्रविष्टि पर क्लिक करते समय, ड्रॉपडाउन सबमेनू वीडियोप्लेयर कंटेनर को ओवरले करता है (ड्रॉपडाउन का जेड-इंडेक्स वीडियोप्लेयर से अधिक है)। सफारी और क्रोम में उपमेनू प्रविष्टियों के लिंक क्लिक पर ठीक से काम करते हैं, लेकिन आईपैड पर मोबाइल सफारी में वे प्रतिक्रिया नहीं करते हैं। समस्या को कम करने के लिए, मेरे न्यूनतम उदाहरण में एक लिंक तत्व शामिल है जो वीडियो तत्व को ओवरले करता है।

<head> 
<style> 
a { 
    position: absolute; 
    display: block; 
    z-index: 1; 
} 
video { 
    position: absolute; 
    z-index: 0; 
} 
</style>  
</head> 

<body > 
<a href="http://www.google.de">click me</a> 
<video src="" width="640" height="360" preload="none" controls="controls"></video> 
</body>

आईपैड पर लिंक तत्व को स्पर्श करना काम नहीं करता है। किसी भी सलाह ने आईपैड पर लिंक को क्लिक करने के तरीके की सराहना की!

स्रोत

2011-03-10 jiriki

स्पष्टीकरण: एचटीएमएल 5 वीडियो प्लेयर नियंत्रण सक्षम होने पर टच इवेंट को अवशोषित करता है।

पृष्ठभूमि: मेनू ड्रॉप डाउन होने पर वीडियो कंटेनर को ओवरले किया गया, लेकिन मेनू आइटम लिंक क्लिक करने योग्य नहीं थे।

समाधान: एक वर्कअराउंड के रूप में, जब मेनू ड्रॉप हो जाता है तो जावास्क्रिप्ट के साथ एचटीएमएल वीडियो विशेषता "नियंत्रण" को हटाकर नियंत्रण को अस्थायी रूप से अक्षम कर देता है, और मेनू को फिर से गिराए जाने पर "नियंत्रण" विशेषता दोबारा जोड़ता है।

स्रोत

2011-06-08 13:13:01 jiriki

आईपैड के लिए यह समाधान काम करता है। लेकिन नियंत्रण विशेषता को हटाकर आईफोन सफारी पर वीडियो ऑब्जेक्ट के व्यवहार को बदल नहीं रहा है। यह अभी भी घटनाओं को पकड़ता है। – emrahgunduz

मैं फोनगैप में वीडियो टैग का उपयोग कर रहा हूं, मुझे कोई 'नियंत्रण' विशेषता नहीं मिली है लेकिन मुझे अभी भी पंजीकरण करने के लिए टैप नहीं मिलते हैं। क्या कोई अलग कामकाज है? –

विशेषता बदलना हमेशा काम नहीं करता है। अगर आप इससे दूर हो सकते हैं, तो मुझे वीडियो की अस्पष्टता 0 कार्यों में बदल गई है।

स्रोत

2012-03-02 14:37:42 Brent

आप दृश्यता का भी उपयोग कर सकते हैं: छुपा – killebytes

आपकी व्याख्या & समाधान सही है। मेनू ड्रॉपडाउन पर नियंत्रण अक्षम करने के लिए कुछ कोड में रुचि रखने वाले किसी के लिए:

$('#menu-dropdown').click(function() { 
    if ($("video:visible")) { 
    if ($("video").prop("controls")) { 
     $("video").prop("controls", false); 
    } else { 
     $("video").prop("controls", true) 
    } 
    } 
})

आशा है कि इससे मदद मिलती है!

स्रोत

2013-03-19 17:57:21 Devneck

मैंने नियंत्रण को हटाने की कोशिश की और फिर उन्हें फिर से जोड़ा, लेकिन केवल आईपैड पर काम करता है, आईफोन पर भी वही बात थी। इस कोड है कि

$("#overlay_open").click(function(){ 
    $("video").prop("controls", false); 
    $("video").css("opacity", 0); 
}); 

$("#overlay_close").click(function(){ 
    $("video").prop("controls", true); 
    $("video").css("opacity", 1); 
});

स्रोत

2014-04-24 10:33:33 Alex

काम हैलो मैं एक यूट्यूब वीडियो एम्बेड कि iframe विधि का उपयोग कर रहा है यह सुधार लागू करने के लिए के साथ इस को हल करने की कोशिश कर रहा हूँ।

हालांकि मैं मूल HTML5 वीडियो तत्व पर नियंत्रण गुण नहीं बदल सकता क्योंकि यह YouTube पर iFrame में है।

मैंने आईफ्रेम में वीडियो तत्व को लक्षित करने का भी प्रयास किया, लेकिन मुझे अनुमति नहीं है कि मुझे 'उसी डोमेन' नीति के कारण पता चला है जो मुझे iFrame में वीडियो की सामग्री में हेरफेर करने से रोकता है।

$(document).on('click', 'span.close', function(){ 
var button = $(this); 
var video = button.parent('.videowrap'); 

var iframe  = video.find("iframe"); 
var iframeVideo = iframe.contents().find("video"); 

console.log('iframe', iframe); 
console.log('iframeVideo', iframeVideo); 
console.log('iframeVideo prop controls', iframeVideo.prop("controls")); 

//http://stackoverflow.com/questions/5261079/mobile-safari-link-a-element-over-video-element-does-not-work-on-click 
if (iframeVideo.prop("controls")) { 
    iframeVideo.prop("controls", false); 
    iframeVideo.css("opacity", 0); 
} 


video.remove(); 
});

स्रोत

2014-08-29 11:50:10

मोबाइल सफारी: लिंक (<a>) वीडियो तत्व पर तत्व

उत्तर

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