क्रॉस-ब्राउज़र संगत इनलाइन वीडियो समाधान

Question

मेरी कंपनी एक बड़ी संख्या में ऑनलाइन ट्यूटोरियल/प्रशिक्षण वीडियो की भूमिका निभाने शुरू कर रही है, जिसे वेबपृष्ठ पर इनलाइन प्रदर्शित किया जाना है। हमें एक साधारण क्रॉस-ब्राउज़र समाधान की आवश्यकता है जो उपयोगकर्ताओं को इनलाइन देखने के लिए बहुमत प्रदान कर सकती है।

एक समाधान जिसे मैंने पढ़ा है (जो बहुत आसान नहीं है) है, प्रत्येक वीडियो का फ्लैश, एमपी 4, और एवी संस्करण बनाना है, और एक जावास्क्रिप्ट प्लगइन निर्धारित करना है कि ब्राउज़र किसके साथ सबसे अच्छा काम करता है।

Answer 1

एक वाणिज्यिक समाधान के लिए http://www.sublimevideo.net/

की जाँच मुक्त के लिए बाहर की जाँच http://www.videojs.com/

Answer 2

आप किसी भी JQuery प्लगइन्स जाँच की है? वहाँ बहुत से लोग हैं, जो अच्छी तरह से क्रॉस ब्राउज़र काम करते हैं। आप http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

Answer 3

देख सकते हैं मैंने सभी ब्राउज़रों में वीडियो प्ले करने के साथ थोड़ा सा प्रयोग किया है। ऐसा करने का सबसे अच्छा तरीका फ्लैश फ़ॉलबैक के साथ एक HTML5 वीडियो टैग सेट करना है। यह वास्तव में काम करने के लिए किसी भी जावास्क्रिप्ट की आवश्यकता नहीं है। यह साइट: http://camendesign.com/code/video_for_everybody यह कैसे करें इस पर एक महान स्पष्टीकरण देता है।

तुम कुछ सेट अप करने के लिए है कि मूल रूप से इस तरह दिखता है चाहता हूँ के लिए जा रहे:

<video width="640" height="360" controls> 
    <!-- MP4 must be first for iPad! --> 
    <source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari/iOS video --> 
    <source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox/Opera/Chrome10 --> 
    <!-- fallback to Flash: --> 
    <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF"> 
     <!-- Firefox uses the `data` attribute above, IE/Safari uses the param below --> 
     <param name="movie" value="__FLASH__.SWF" /> 
     <param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" /> 
     <!-- fallback image. note the title field below, put the title of the video there --> 
     <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" 
      title="No video playback capabilities, please download the video below" /> 
    </object> 
</video> 

वीडियो टैग एक HTML5 टैग है कि आप आधुनिक ब्राउज़रों पर वीडियो फ़ाइलों को दिखाने के लिए उपयोग कर सकते हैं। हालांकि आपको इसे प्रत्येक में ठीक से प्रदर्शित करने के लिए कई अलग-अलग प्रारूपों की आवश्यकता होगी। उदाहरण के लिए, फ़ायरफ़ॉक्स केवल वेबम और ओजी प्रारूप लेता है जबकि सफारी केवल एच 264 और एमपी 4 प्रारूप लेता है। यहां इस पर एक शानदार लेख है: http://diveintohtml5.ep.io/video.html। इन सभी प्रारूपों में अपने वीडियो को कन्वर्ट करने के लिए आप एक साधारण कनवर्टर सॉफ्टवेयर डाउनलोड कर सकते हैं: http://www.mirovideoconverter.com/। अन्य ब्राउज़र्स (विशेष रूप से आईई) एचटीएमएल 5 वीडियो टैग नहीं लेते हैं, इसके बजाय आपको एक फ्लैश प्रारूप शामिल करना होगा, जो कि वीडियो टैग के साथ क्या करना है, यह स्वचालित रूप से वापस आ जाएगा।

अंत में आपको संगत मानकों की कमी के कारण ब्राउज़र और प्लेटफ़ॉर्म (आईओएस मोबाइल) पर काम करने के लिए अपनी एक वीडियो फ़ाइल के कम से कम 3-4 विभिन्न प्रारूप बनाना होगा। यह सुनिश्चित करना भी महत्वपूर्ण है कि आपका सर्वर इन प्रारूपों के लिए सही माइम-प्रकार का उपयोग कर रहा है। यह बेकार है लेकिन अभी के लिए यह एकमात्र तरीका है।

Answer 4

सबसे अच्छा समाधान अब तक:

http://www.videojs.com/

लागू करना सीखें:

सिर:

<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet"> 
<script src="http://vjs.zencdn.net/c/video.js"></script> 

शरीर:

<div class="vid"> 
    <video id="vid01" class="video-js vjs-default-skin" controls="controls" preload="none" width="640px" height="264px" 
     poster="../../Content/YourInitialPicture.jpg"> 
     <source src="../../Content/YourVideo.mp4" type='video/mp4'/> <!-- IE/Safari --> 
     <source src="../../Content/YourVideo.webm" type='video/webm'/> <!-- Mozilla FF --> 
     <source src="../../Content/YourVideo.ogg" type='video/ogg'/> <!-- Chrome/Opera --> 
     <track kind="captions" src="../../Content/YourVideoCaption.vtt" srclang="en" label="English" /> 
    </video> 
    <script> 
     var myPlayer = _V_("vid01"); 
    </script> 
</div> 

कॉपी/अपने <body></body> के कोड से ऊपर चिपकाएं और करने के लिए src="../../"

• .mp4 अपने वीडियो के पथ को जोड़ने
• .webm (मोज़िला vids के इस प्रकार के खेल सकते हैं)
(सफारी और IE vids के इस प्रकार के खेल सकते हैं)
• ।ओग (थियोरा वीडियो)

आप अपने वीडियो के लिए इन मुफ्त कन्वेंटर का उपयोग कर सकते हैं।

• Free Video Converter (यह conventer उपयोग करने के लिए आसान है .. मैं व्यक्तिगत रूप से इस पसंद करते हैं।)
• Free WebM Video Converter

इस रूप में

सरल!

Answer 5

मेरे लिए क्या काम किया है: मैंने यूट्यूब पर वीडियो अपलोड किया है, फिर इसे एमपी 4 के रूप में डाउनलोड किया है और ऐसा लगता है कि यह video टैग के साथ ब्राउज़र में काम करता है।

Answer 6

मैं इसे थोड़ी देर के लिए शोध कर रहा हूं और मैं वही काम करने की कोशिश कर रहा हूं, इसलिए उम्मीद है कि यह किसी और की मदद करेगा। मैं crossbrowsertesting.com का उपयोग कर रहा हूं और सचमुच मनुष्य के लिए जाने वाले लगभग हर ब्राउज़र में इसका परीक्षण कर रहा हूं। समाधान जो मैं वर्तमान में ओपेरा, क्रोम, फ़ायरफ़ॉक्स 3.5+, आईई 8 +, आईफोन 3 जीएस, आईफोन 4, आईफोन 4 एस, आईफोन 5, आईफोन 5 एस, आईपैड 1+, एंड्रॉइड 2.3+, विंडोज फोन 8.

में काम करता है गतिशील रूप से बदलती सूत्रों का कहना है

गतिशील रूप से बदल रहा है वीडियो बहुत मुश्किल है, और एक फ्लैश के साथ वापस आने आप डोम/पृष्ठ से वीडियो हटाने के लिए और फिर से जोड़ सकते हैं ताकि क्योंकि फ्लैश गतिशील नहीं पहचानेंगे फ्लैश अद्यतन करेगा होगा फ्लैश वर्र्स के लिए अद्यतन। यदि आप इसे गतिशील रूप से बदलने के लिए जावास्क्रिप्ट का उपयोग करने जा रहे हैं, तो मैं सभी <source> तत्वों को पूरी तरह से हटा दूंगा और पहले समर्थित वीडियो प्रकार के बाद src या या return सेट करने के लिए canPlayType का उपयोग करें और फ़्लैश को गतिशील रूप से अपडेट करना न भूलें var एमपी 4। साथ ही, कुछ ब्राउज़र पंजीकृत नहीं होंगे कि आपने स्रोत को तब तक बदल दिया जब तक कि आप video.load() पर कॉल न करें। मेरा मानना ​​है कि .load() के साथ समस्या का सामना करने वाले पहले को video.pause() पर कॉल करके तय किया जा सकता है। वीडियो तत्वों को हटाने और जोड़ने से ब्राउज़र धीमा हो सकता है क्योंकि यह हटाए गए वीडियो को बफर करना जारी रखता है, लेकिन there's a workaround।

क्रॉस-ब्राउज़र समर्थन

जहां तक ​​वास्तविक क्रॉस-ब्राउज़र भाग के रूप में, मैं Video For Everybody के साथ-साथ आ गया है। मैंने पहले से ही MediaelementJS वर्डप्रेस प्लगइन की कोशिश की है, जो इसे हल करने से बहुत अधिक मुद्दों का कारण बन गया है। मुझे संदेह है कि समस्याएं वर्डप्रेस प्लग-इन के कारण थीं और वास्तव में लाइब्रेरी नहीं थीं। मैं कुछ ऐसा खोजने की कोशिश कर रहा हूं जो जावास्क्रिप्ट के बिना काम करता है, यदि संभव हो तो।

<video width="300" height="150" controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" class="responsive"> 
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" /> 
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" /> 
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" /> 
<source src="http://alex-watson.net/wp-content/uploads/2014/07/big_buck_bunny.iphone.mp4" type="video/mp4" /> 
<source src="http://alex-watson.net/wp-content/uploads/2014/07/big_buck_bunny.iphone3g.mp4" type="video/mp4" /> 
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="561" height="297"> 
    <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /> 
    <param name="allowFullScreen" value="true" /> 
    <param name="wmode" value="transparent" /> 
    <param name="flashVars" value="config={'playlist':['http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg',{'url':'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4','autoPlay':false}]}" /> 
    <img alt="No Video" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="561" height="297" title="No video playback capabilities, please download the video below" /> 
</object> 
<strong>Download video:</strong> <a href="video.mp4">MP4 format</a> | <a href="video.ogv">Ogg format</a> | <a href="video.webm">WebM format</a> 
</video> 

महत्वपूर्ण नोट: अब तक, मैं क्या लेकर आए हैं इस सादे HTML है

• पहले <source> के रूप में ogg डाल क्योंकि मैक ओएस फ़ायरफ़ॉक्स चलाने का प्रयास कर इस्तीफा समाप्त वीडियो अगर यह MP4 को पहले <source> के रूप में सामना करता है।
• सही एमआईएम प्रकार महत्वपूर्ण हैं ।ogv फ़ाइलों video/ogg होना चाहिए, नहींvideo/ogv
• अगर आपके पास HD वीडियो, सबसे अच्छा ट्रांसकोडर मैं के लिए HD गुणवत्ता OGG फ़ाइलें पाया है Firefogg
• .iphone.mp4 फ़ाइल iPhone के लिए 4 जो होगा केवल है एच 264 बेसलाइन 3 वीडियो और एएसी ऑडियो के साथ एमपीईजी -4 वीडियो चलाएं। सबसे अच्छा ट्रांसकोडर मुझे लगता है कि प्रारूप के लिए मिला, Handbrake है iPhone & आइपॉड टच पूर्व निर्धारित का उपयोग कर iPhone 4+ पर काम करेंगे, लेकिन काम करने के लिए iPhone 3GS पाने के लिए आप आइपॉड पूर्व निर्धारित बहुत कम संकल्प है जो उपयोग करने की आवश्यकता है जो मुझे video.iphone3g.mp4 के रूप में जोड़ा गया।
• भविष्य में हम मीडिया प्रश्नों के साथ मोबाइल उपकरणों को लक्षित करने के लिए <source> तत्वों पर media विशेषता का उपयोग करने में सक्षम होंगे, लेकिन अभी पुराने ऐप्पल और एंड्रॉइड डिवाइस पर्याप्त रूप से इसका समर्थन नहीं करते हैं।