2011-08-30 7 views
16

मैं आईपैड के लिए छवियों और वीडियो की एक स्लाइडर गैलरी बनाने के लिए Jquery bxSlider प्लगइन का उपयोग कर रहा हूं। मैं वीडियो कार्यान्वयन के लिए HTML5 वीडियो टैग का उपयोग कर रहा:एचटीएमएल 5 वीडियो आईपैड पर jquery bxSlider प्लगइन के साथ काम नहीं करेगा

<video width="400" height="260" controls> 
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> 
</video> 

वीडियो स्रोत कोड iPad पर ठीक काम करता है जब अपने आप ही, लेकिन जब स्लाइडर मार्कअप के साथ विलय कर दिया, वीडियो नहीं चला है।

टेस्ट लिंक:http://www.ekimmedia.com/totem/TIC/MG/

अगर मैं यह स्क्रिप्ट निकालना: स्रोत कोड से

<script src="js/jquery.bxSlider.js" type="text/javascript"></script> 

, वीडियो तो iPad पर काम करता है।

bxSlider स्क्रिप्ट के साथ

टेस्ट लिंक हटा दिया:http://www.ekimmedia.com/totem/TIC/MG/index10.html

सुनिश्चित नहीं हैं कि संघर्ष खड़ी कर रहा है।

धन्यवाद,

+0

टेस्ट लिंक टूटा हुआ है: / –

उत्तर

0

फ़ायरबग या सफारी डेवलपर उपकरण की तरह एक डिबगिंग उपकरण के साथ वीडियो तत्व देखने का प्रयास करें। ऐसा करने के लिए आपको एक पीसी/मैक ब्राउज़र का उपयोग करना पड़ सकता है। देखें कि क्या वीडियो तत्व किसी भी विशेषता को खो देता है, या आपकी jquery स्क्रिप्ट चलाने के बाद अतिरिक्त चीजें जोड़ती हैं या नहीं। वीडियो सहित कुछ मोबाइल विकास करने के बाद मैं आपको बता सकता हूं कि यह बहुत स्पर्शपूर्ण है, खासकर जब से लगभग 82 बिलियन विभिन्न ब्राउज़र और ओएस संस्करण मोबाइल उपकरणों पर तैर रहे हैं। यदि आप देखते हैं कि वीडियो तत्व बदल गया है, तो आपको एक स्क्रिप्ट जोड़ने की आवश्यकता होगी जो इसे आपके आईपैड पर देखने योग्य कुछ पर ले जाए।

आप यह भी सुनिश्चित कर सकते हैं कि आपके वीडियो सही तरीके से लपेटे गए हैं। ऐसा लगता है कि इस स्लाइडर स्क्रिप्ट निम्न स्वरूप की आवश्यकता है:

<div id="slideshowcontainer"> 
<div>slide1 content</div> 
<div>slide2 content</div> 
<div>etc...</div> 
</div> 

OR 

<ul id="slideshowcontainer"> 
<li>slide1 content</li> 
<li>slide2 content</li> 
<li>etc...</li> 
</ul> 
3

एक ही रास्ता मैं काम करने के लिए इस स्लाइडर bxSlider आधिकारिक वेबसाइट से स्थानीय स्तर पर इसे डाउनलोड करने के लिए था कि कैसे मिलता है। और उत्तरदायी वीडियो स्लाइडर बनाने के तरीके पर उनके tutorial का पालन करने का प्रयास करें। वे इन तीर छवियों के बारे में कहीं भी उल्लेख नहीं करते क्योंकि वे सीएसएस में नहीं आते हैं। तो, डाउनलोड किए गए bxslider ज़िप से एक छवि फ़ोल्डर को पकड़ना याद रखें और इसे अपने प्रोजेक्ट के जेएस फ़ोल्डर में पेस्ट करें। jquery-2.2.2.min.js, jquery.bxslider.css, jquery.bxslider.js और jquery.fitvids.js:

मेरा अंतिम सेटअप में मैं js फ़ोल्डर में 4 स्थानीय फ़ाइलों पड़ा है। जेएस फ़ोल्डर में images उपफोल्डर भी शामिल था जहां controls.png और bx_loader.gif थे।

यह सब तो HTML फ़ाइल में संदर्भित किया गया था इस प्रकार है:

<head> 
    <link rel="stylesheet" href="js/jquery.bxslider.css"> 
    <script src="js/jquery-2.2.2.min.js"></script> 
    <script src="js/jquery.fitvids.js"></script> 
    <script src="js/jquery.bxslider.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
    $('.bxslider').bxSlider({ 
     video: true, 
     useCSS: false 
    }); 
    }); 
    </script> 
</head> 
<body> 
    <ul class="bxslider"> 
     <li> 
      <iframe src="YOUR_LINK_TO_VIDEO" width="400" height="260" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
     </li> 
     <li> 
      <iframe src="YOUR_LINK_TO_VIDEO" width="400" height="260" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
     </li> 
    </ul> 
</body> 

मैं IOS डिवाइस और सब कुछ पर मेरे समाधान का परीक्षण किया है ठीक से काम करने लगता है। इस समस्या के लिए कुछ हद तक समान solution है, आप इसे भी देख सकते हैं।

`<script src="js/jquery.bxSlider.js" type="text/javascript"></script>` 

की स्थिति बदलने के लिए

2

कोशिश होनी चाहिए यह पुस्तकालयों के टकराव की वजह से है, सभी स्क्रिप्ट या निचले हिस्से पर या कहीं भी elc के बीच में कहते हैं, मुझे यकीन है कि यह gona काम कर रहा हूँ।

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