jQuery और फैंक्सबॉक्स में वीडियो (यूट्यूब के बजाए स्थानीय वीडियो फ़ाइल एमपी 4)

मैं सफलतापूर्वक Jquery FencyBox में एक यूट्यूब वीडियो चला रहा हूं। लेकिन, मैं Jquery FencyBox में एक स्थानीय एमपी 4 वीडियो फ़ाइल चलाने में असमर्थ हूं (यह फ़ाइल किसी फ़ोल्डर में मौजूद है)jQuery और फैंक्सबॉक्स में वीडियो (यूट्यूब के बजाए स्थानीय वीडियो फ़ाइल एमपी 4)

कृपया मुझे बताएं कि मैं JQUERY FENCYBOX में एक स्थानीय वीडियो फ़ाइल कैसे चला सकता हूं (जैसा कि मैं एक यूट्यूब चला रहा हूं फेंसीबॉक्स में वीडियो)।

निम्नलिखित कोड है जिसका मैं उपयोग कर रहा हूं:

1)। मैं इन फ़ाइलों (प्लगइन्स) का उपयोग कर रहा:

jquery.fancybox-1.3.4.js और jquery.fancybox-1.3.4.css

2)। फैंसी बॉक्स में यूट्यूब से सफलतापूर्वक वीडियो चला रहा है:

<div class="main"> 
    <h1>VIDEO Playing From YOUTUBE</h1> 
    <p><a href="http://www.youtube.com/embed/WAZ5SmJd1To" class="youtube iframe">Watch this amazing YouTube video</a></p> 
</div>

3)। अब मैं फैंसी बॉक्स में स्थानीय वीडियो फ़ाइल एमपी 4 खेलने में असमर्थ हूं:

<div class="main"> 
    <h1>Local Video File Playing</h1> 
    <p><a href="example/video.mp4" class="youtube iframe" > My Local Video in Example Folder</a></p>   
</div>

कृपया सुझाव/मार्गदर्शिका/सहायता दें।

स्रोत

2013-10-02 Anwer Hussain

समस्या यह है कि अधिकांश मीडिया ऑब्जेक्ट्स को एमपी 4 वीडियो के लिए एक (स्वयं-होस्टेड) तृतीय पक्ष सॉफ़्टवेयर या ब्राउज़र की प्लगइन/एक्सटेंशन, आमतौर पर क्विकटाइम चलाने की आवश्यकता होती है।

यूट्यूब के मामले में, वे पहले से ही एक एम्बेडेड प्लेयर के साथ प्रदान करते हैं, इसलिए आपको इसके बारे में चिंता करने की ज़रूरत नहीं है, लेकिन आपके स्थानीय वीडियो के मामले में, आपको अभी भी एक बाहरी खिलाड़ी का उपयोग करने की आवश्यकता है, मान लें jwplayer (या आपकी कोई अन्य प्राथमिकता।) ध्यान दें कि fancybox में कोई भी वीडियो प्लेयर शामिल नहीं है।

तो मैं प्रत्येक वीडियो

<a class="fancybox" data-type="iframe" href="http://www.youtube.com/embed/WAZ5SmJd1To?autoplay=1" title="youtube">open youtube (embed mode)</a><br /> 
<a class="fancybox" data-type="swf" href="pathToPlayer/jwplayer.swf?file=pathToVideo/video.mp4&autostart=true" title="local video mp4">open local video</a>

सूचना है कि मैं एक (एचटीएमएल 5) data-type विशेषता इंगित करने के लिए content fancybox (v1.3.4) के type संभाल चाहिए जोड़ा लिंक करने के लिए निम्नलिखित एचटीएमएल का प्रयोग करेंगे। मैंने आपके स्थानीय वीडियो के लिए swf का उपयोग किया क्योंकि मैं swf प्लेयर (jwplayer.swf) का उपयोग कर रहा हूं, भले ही मैं एक एमपी 4 वीडियो चला रहा हूं।

jQuery(document).ready(function($){ 
    $(".fancybox").on("click", function(){ 
     $.fancybox({ 
      href: this.href, 
      type: $(this).data("type") 
     }); // fancybox 
     return false 
    }); // on 
}); // ready

आप एक डेमो यहाँ http://www.picssel.com/playground/jquery/localVideojwPlayer_02oct13.html

नोट देख सकते हैं::

तो आप उनमें से किसी के लिए इस स्क्रिप्ट का उपयोग कर सकता है .on() jQuery v1.7 की आवश्यकता है + लेकिन fancybox काम नहीं करता है jQuery v1.9 + के साथ, अधिक जानकारी के लिए this देखें। आप jQuery v1.8.3 का उपयोग कर सकते हैं या पैच को निर्दिष्ट पोस्ट में लागू कर सकते हैं।

LAST टिप्पणी: यह मोबाइल उपकरणों में काम नहीं कर सकता है। आप इसके बजाए क्रॉस-ब्राउजर/क्रॉस-प्लेटफार्म संगतता के लिए mediaelements जैसे किसी अन्य खिलाड़ी का उपयोग करना पसंद कर सकते हैं (या विरासत ब्राउज़र फ़ॉलबैक विकल्प के साथ jwplayer v6.x प्राप्त करें)

स्रोत

2013-10-02 18:48:48 JFK

यह कोड आपको स्थानीय वीडियो फ़ाइल चलाने में मदद करता है सुनिश्चित करें कि आपके पास हैआपके समाधान में एमपी 4 वीडियो फ़ाइल या अन्यथा आप यूट्यूब वीडियो को एंकर टैग से लिंक कर सकते हैं।

<head> 
 
<script src="/fancybox/jquery.fancybox.js" type="text/javascript"></script> 
 
<link href="/fancybox/jquery.fancybox.css" rel="stylesheet" type="text/css" /> 
 
    <script type="text/javascript"> 
 
     $(function() { 
 
      $('#video a').fancybox({ 
 
       width: 640, 
 
       height: 400, 
 
       type: 'iframe' 
 
      }); 
 
     }); 
 
    </script> 
 
</head> 
 

 
<body> 
 
<div id="video"> 
 
    <a href="new_video.mp4"><img src="/images/video_coverpage.jpg" alt="" /></a>  
 
</div> 
 
</body>

स्रोत

2016-04-19 13:53:44

इस कोड स्निपेट [स्पष्टीकरण सहित] सवाल है, (http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers का समाधान हो सकता है) वास्तव में आपकी पोस्ट की गुणवत्ता में सुधार करने में मदद करता है। याद रखें कि आप भविष्य में पाठकों के लिए प्रश्न का उत्तर दे रहे हैं, और वे लोग आपके कोड सुझाव के कारणों को नहीं जानते हैं। –

उदाहरण काम कर के साथ

Jinal जवाब।

<head> 
 
<script src="/fancybox/jquery.fancybox.js" type="text/javascript"></script> 
 
<link href="/fancybox/jquery.fancybox.css" rel="stylesheet" type="text/css" /> 
 
    <script type="text/javascript"> 
 
     $(function() { 
 
      $('#video a').fancybox({ 
 
       width: 640, 
 
       height: 400, 
 
       type: 'iframe' 
 
      }); 
 
     }); 
 
    </script> 
 
</head> 
 

 
<body> 
 
<div id="video"> 
 
    <a href="http://media.gettyimages.com/videos/giant-manta-rays-video-id618487251">Click Here</a>  
 
</div> 
 
</body>

स्रोत

2017-03-16 07:13:39

jQuery और फैंक्सबॉक्स में वीडियो (यूट्यूब के बजाए स्थानीय वीडियो फ़ाइल एमपी 4)

उत्तर

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