एचटीएमएल 5 वीडियो टैग सफारी, आईफोन और आईपैड में काम नहीं कर रहा है

Question 1

मैं एक html5 वेब पेज बनाने की कोशिश कर रहा हूं जिसमें एक छोटा सा वीडियो है जैसे 13s, मैंने इस वीडियो के फ्लैश संस्करण को 3 प्रारूप में परिवर्तित कर दिया है: .vv का उपयोग कर फायरफॉग, .webm का उपयोग फायरफॉग का भी करें और हैंडब्रेक एप्लिकेशन को HTML स्क्रिप्ट के साथ .p4 करें। मैंने अपने पृष्ठ में उपयोग किया:

<video  width="800" height="640" loop preload="false" autoplay  controls tabindex="0">
  <source src="xmasvideo/video.mp4" type="video/mp4" />
  <source src="xmasvideo/M&P-Xmas 2.ogv" type="video/ogv" />
  <source type="video/webm" src="xmasvideo/M&P-Xmas.webm" />
</video>

Chrome और FireFox में वीडियो ठीक काम कर रहा है, लेकिन डेस्कटॉप या आईफ़ोन या आईपैड पर सफारी में न तो काम कर रहा है, न ही उत्पादन केवल एक खाली पृष्ठ है, जो वीडियो टैग के नियंत्रण को दिखाता है, लेकिन कुछ भी लोड नहीं होता है

ध्यान दें कि मेरे पास सफारी संस्करण जो एचटीएमएल 5 वीडियो का समर्थन करता है

Question 2

मैं iPhone और iPad जैसे सेब उपकरणों के साथ एक ही मुद्दा था, मैं कम बिजली मोड बंद कर दिया और यह काम किया और आप `playsinline`इस के साथ वीडियो टैग में विशेषता भी शामिल करना चाहिए :

<video class="video-background" autoplay loop muted playsinline>

यह केवल जब शामिल काम किया playsinline।

Question 3

आपके लिए भविष्य के खोजकर्ताओं का एक और संभावित समाधान: (यदि आपकी समस्या एक समस्या नहीं है।)

जब तक मैं नियंत्रण = "सही" ध्वज सेट नहीं करता, कुछ कारणों से वीडियो iPad पर नहीं चलेगा।

उदाहरण: यह मेरे लिए iPhone पर काम करता है लेकिन iPad पर नहीं।

<video loop autoplay width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>

और यह अब iPad और iPhone दोनों पर काम करता है:

<video loop autoplay controls="true" width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>

Question 4

आपका वेब सर्वर HTTP बाइट-रेंज अनुरोधों का समर्थन नहीं कर सकता है। मेरे द्वारा उपयोग किए जा रहे वेब सर्वर के मामले में यह है, और इसका परिणाम यह है कि वीडियो विजेट लोड होता है और एक प्ले बटन दिखाई देता है, लेकिन बटन पर क्लिक करने से कोई प्रभाव नहीं पड़ता है। - वीडियो एफएफ और क्रोम में काम करता है, लेकिन आईफोन या आईपैड में नहीं।

परिशिष्ट A में बाइट-रेंज अनुरोधों के बारे में mobiforge.com पर यहां पढ़ें : Apple iPhone के लिए स्ट्रीमिंग :

सबसे पहले, सफारी वेब ब्राउज़र सामग्री का अनुरोध करता है, और यदि यह एक ऑडियो या वीडियो फ़ाइल है तो यह मीडिया प्लेयर को खोलता है। मीडिया प्लेयर तब सामग्री के पहले 2 बाइट्स का अनुरोध करता है, यह सुनिश्चित करने के लिए कि वेबसर्वर बाइट-रेंज अनुरोधों का समर्थन करता है। फिर, अगर यह उनका समर्थन करता है, तो iPhone का मीडिया प्लेयर बाइट-रेंज द्वारा बाकी सामग्री का अनुरोध करता है और इसे खेलता है।

आप "iphone mp4 बाइट-रेंज" के लिए वेब खोजना चाहते हैं।

Question 5

यदि आपके वीडियो सत्र-आधारित लॉगिन प्रणाली द्वारा सुरक्षित हैं, तो सफारी उन्हें लोड करने में विफल हो जाएगी। ऐसा इसलिए है क्योंकि सफारी वीडियो के लिए एक प्रारंभिक अनुरोध करता है, फिर कार्य को क्विकटाइम पर सौंप देता है, जो एक और अनुरोध करता है। चूंकि सफारी सत्र की जानकारी रखती है, इसलिए यह प्रमाणीकरण पारित कर देगी, लेकिन QuickTime नहीं होगा।

आप इसे देख सकते हैं यदि आप अपने सर्वर एक्सेस लॉग को देखते हैं ... पहले सफारी से अनुरोध, फिर QuickTime से अनुरोध। अन्य ब्राउज़र केवल ब्राउज़र से एक ही अनुरोध करते हैं।

यदि यह आपकी समस्या है, तो आपको अस्थायी अनुरोधों या मूल अनुरोध से सीमित समय का उपयोग करने के लिए वीडियो एक्सेस को फिर से काम करना पड़ सकता है। यदि मुझे अधिक प्रत्यक्ष समाधान मिल जाए तो मैं इस उत्तर को अपडेट करूंगा।

Question 6

साथ ही भविष्य की खोजों के लिए, मेरे पास एक mp4 फ़ाइल थी जिसे मैंने हैंडब्रेक से डाउनस्लेक handbrake-gtkकिया apt-get, जैसे sudo apt-get install handbrake-gtk। 14.04 Ubuntu में, handbrakeरिपॉजिटरी में MP4 को बॉक्स से बाहर करने के लिए समर्थन शामिल नहीं है। मैंने डिफ़ॉल्ट सेटिंग्स को छोड़ दिया, ऑडियो ट्रैक को बाहर निकाल दिया, और यह एक * .M4V फ़ाइल उत्पन्न करता है। सोच रहे लोगों के लिए, वे एक ही कंटेनर हैं लेकिन M4V मुख्य रूप से आईओएस पर आईट्यून्स में खोलने के लिए उपयोग किया जाता है।

यह सफारी को छोड़कर सभी ब्राउज़रों में काम करता है:

<video preload="yes" autoplay loop width="100%" height="auto" poster="http://cdn.foo.com/bar.png">
            <source src="//cdn.foo.com/bar-video.m4v" type="video/mp4">
            <source src="//cdn.foo.com/bar-video.webm" type="video/webm">
</video>

मैं के बीच माइम-प्रकार बदल video/mp4और video/m4vकोई प्रभाव के साथ। मैंने भी परीक्षण कियाcontrol विशेषता फिर से , कोई प्रभाव नहीं।

यह Mavericks पर Safari 7 और Yosemite पर Safari 8 सहित सभी ब्राउज़रों में काम किया। मैंने केवल mp4 में उसी m4v फ़ाइल (वास्तविक फ़ाइल, न केवल HTML) का नाम बदला और हमारे CDI पर पुनः लोड किया:

<video preload="yes" autoplay loop width="100%" height="auto" poster="http://cdn.foo.com/bar.png">
            <source src="//cdn.foo.com/bar-video.mp4" type="video/mp4">
            <source src="//cdn.foo.com/bar-video.webm" type="video/webm">
</video>

मुझे लगता है कि सफारी वास्तव में नामित MP4 की पूरी तरह से उम्मीद कर रही है। फ़ाइल और माइम-प्रकार के किसी अन्य संयोजन ने मेरे लिए काम नहीं किया। मुझे लगता है कि अन्य ब्राउज़र सबसे पहले WEBM फ़ाइल चुनते हैं, खासकर क्रोम, हालांकि मुझे पूरा यकीन है कि स्रोत सूची को पहले स्रोत का चयन करना चाहिए जो तकनीकी रूप से समर्थित है।

हालांकि, इसने iOS डिवाइस (iPad 3 "नया iPad" और iPhone 6 का परीक्षण किया गया) में वीडियो समस्या को ठीक नहीं किया है।

Question 7

बस एक mutedविशेषता जोड़ें और सब कुछ ठीक काम करेगा।

इस उत्तर का स्रोत यहां है: https://webkit.org/blog/6784/new-video-policies-pro-ic//

डिफ़ॉल्ट रूप से, WebKit में निम्नलिखित नीतियां होंगी:

<video autoplay> तत्व अब ऑटोप्ले विशेषता का सम्मान करेंगे, उन तत्वों के लिए जो निम्नलिखित शर्तों को पूरा करते हैं:

<video> तत्वों को उपयोगकर्ता के इशारे के बिना ऑटोप्ले करने की अनुमति होगी यदि उनके स्रोत मीडिया में कोई ऑडियो ट्रैक नहीं है।

<video muted> तत्वों को एक उपयोगकर्ता के इशारे के बिना ऑटोप्ले करने की भी अनुमति होगी।

यदि कोई <video>तत्व एक ऑडियो ट्रैक प्राप्त करता है या उपयोगकर्ता के इशारे के बिना अन-म्यूट हो जाता है, तो प्लेबैक रुक जाएगा।

<video autoplay> तत्व केवल तब ऑन-स्क्रीन दिखाई देने लगेंगे जब वे व्यूपोर्ट में स्क्रॉल किए जाते हैं, सीएसएस के माध्यम से दिखाई देते हैं, और DOM में डाले जाते हैं।

<video autoplay> अगर वे व्यूपोर्ट से बाहर स्क्रॉल किए जा रहे हैं, तो वे गैर-दृश्यमान हो जाएंगे, जैसे कि वे दृश्यमान नहीं होंगे।

<video> तत्व अब खेल का सम्मान करेंगे () विधि, निम्नलिखित तत्वों को पूरा करने वाले तत्वों के लिए:

<video> तत्वों को उपयोगकर्ता के इशारे के बिना () खेलने की अनुमति दी जाएगी यदि उनके स्रोत मीडिया में कोई ऑडियो ट्रैक नहीं है, या यदि उनकी म्यूट संपत्ति सत्य पर सेट है।

यदि एक <video>तत्व एक ऑडियो ट्रैक प्राप्त करता है या उपयोगकर्ता के इशारे के बिना अन-म्यूट हो जाता है, तो प्लेबैक रुक जाएगा।

<video> तत्वों को खेलने के लिए अनुमति दी जाएगी () जब ऑन-स्क्रीन दिखाई न दे या जब व्यूपोर्ट से बाहर हो।

video.play () एक वादा लौटाएगा, जिसे अस्वीकार कर दिया जाएगा यदि इनमें से कोई भी शर्त पूरी नहीं होती है।

IPhone पर, <video playsinline>तत्वों को अब इनलाइन खेलने की अनुमति होगी, और प्लेबैक शुरू होने पर स्वचालित रूप से फुलस्क्रीन मोड में प्रवेश नहीं करेगा। <video>iPhone पर प्लेबैक के लिए playinline विशेषताओं के बिना तत्वों को फुलस्क्रीन मोड की आवश्यकता होती रहेगी। जब एक चुटकी इशारे के साथ फुलस्क्रीन से बाहर निकलते हैं, तो <video>बिना playinline के तत्व इनलाइन खेलना जारी रखेंगे।

Question 8

मैंने पाया है कि यद्यपि सफारी एचटीएमएल 5 वीडियो का समर्थन करता है, लेकिन इसके लिए काम करने के लिए क्विकटाइम प्लेयर स्थापित करना होगा। एक साइट पर जो मैंने एचटीएमएल 5 वीडियो का उपयोग करते हुए बनाया था, उपयोगकर्ता को सफारी का उपयोग करते समय सतर्क किया जाता है, यह बताते हुए कि उन्हें क्विकटाइम स्थापित करना होगा, अन्यथा वे केवल वीडियो टेप देख पाएंगे। उम्मीद है की यह मदद करेगा।

Question 9

मैंने एक गैर-विश्वसनीय 'विकास' एसएसएल प्रमाणपत्रों के साथ अजीब मुद्दों को देखा है, जहां मोबाइल सफारी आपके पृष्ठ की खुशी से सेवा करेगा, लेकिन प्रमाणपत्र स्वीकार करने के बावजूद भी वीडियो को 'नकली' एसएसएल प्रमाणपत्र की सेवा देने से इनकार करता है।

परीक्षण के लिए आप वीडियो को कहीं और तैनात कर सकते हैं - या http (पूरे पृष्ठ के लिए) पर स्विच कर सकते हैं और इसे खेलना चाहिए।

Question 10

यदि आप अपने वीडियो को म्यूट नहीं करते हैं तो Iphone और Ipa पर 'playinline' जोड़ना मेरे लिए काम करता है।

<video muted playsinline>
  <source src="..." type="video/mp4">
</video>

यदि आप अपने वीडियो को म्यूट नहीं करना चाहते हैं, लेकिन फिर भी ऑटोप्ले चाहते हैं, तो शायद js के साथ म्यूट किए गए विशेषता को हटाने का प्रयास करें : HTML5 वीडियो को म्यूट प्रोप के साथ कैसे अनम्यूट करें

Question 11

IOS 6.1 के रूप में, यह अब iPad पर ऑटो-प्ले वीडियो के लिए संभव नहीं है। Apple प्रलेखन के अनुसार ऑटोप्ले सुविधा आईपैड सहित सभी आईओएस उपकरणों में सफारी पर काम नहीं कर रही है:

"Apple ने स्क्रिप्ट और विशेषता कार्यान्वयन दोनों के माध्यम से iOS उपकरणों पर वीडियो के स्वचालित खेलने को अक्षम करने का निर्णय लिया है।

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

आप इस Apple प्रलेखन में इसे और अधिक पढ़ सकते हैं

Question 12

.Mp4 के लिए यह काम करता है (सफारी मोबाइल और डेस्कटॉप):

<video height="250" width="250" controls>
    <source src="video.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>

controls=”true”एक ऊपर पोस्ट में उल्लेख किया मेरे लिए कोई भावना बनाने के रूप में एप्पल अपने दम पर सिर्फ उपयोग नियंत्रण कहते हैं।

संदर्भ: “HTML5 ऑडियो या वीडियो का उपयोग करने के लिए, एक या तत्व बनाकर शुरू करें, मीडिया के लिए एक स्रोत URL निर्दिष्ट करें, और नियंत्रण विशेषता सहित। <video src="http://example.com/path/mymovie.mp4" controls></video>"

स्रोत: https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/Introduction.html

मेरे व्यवहार में (एक छोटा सा विषयांतर) : मैंने पाया है कि iPhone से वीडियो अपलोड करना इसे .quicktime के रूप में सर्वर पर भेजता है। विडंबना यह है कि सफारी पर सर्वर से वीडियो को वापस खेलने की कोशिश करते समय यह समस्या है। (मोबाइल और डेस्कटॉप)।

तो अगर (मेरी तरह) आप सफारी में एक .quicktime (या .mp4 के अलावा कुछ भी) समस्या का सामना कर रहे हैं , तो यहां सेब द्वारा प्रदान किया गया एक काम है। ध्यान दें, मैं अभी तक इसे स्वयं परीक्षण कर रहा हूं और मैं यह सब एक नज़र में खुश नहीं हूं, बस अधिक जानकारी प्रदान कर रहा हूं।

संदर्भ: "क्विक प्लग-इन पर वापस लौटें। क्विक प्लग-इन में वापस गिरने का एक सरल तरीका है कि लगभग सभी ब्राउज़रों के लिए काम करता है- Apple, ac_quicktime.js द्वारा प्रदान की गई प्रीबिल्ट जावास्क्रिप्ट फ़ाइल डाउनलोड करें, HTML वीडियो उदाहरण से। अपने HTML हेड में कोड की निम्न पंक्ति सम्मिलित करके इसे अपने वेबपेज में शामिल करें: <script src="ac_quicktime.js" type="text/javascript"></script>”

स्रोत: https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics-AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP5000523232323

अपडेट:.mov सर्वर पर पूर्व अपलोड करने के लिए .quicktime का नाम बदलने के लिए (बेस 64 फ़िलाटाइप में "डेटा: वीडियो / Mov?"), Ac_quicktime.js छोड़ें। । । तब html वीडियो टैग में काम करेगा; हैकरडी हैक।

Question 13

इस कोड का उपयोग करके वीडियो सफारी के साथ-साथ ios उपकरणों के साथ सभी ब्राउज़र में चलेगा ... इसे सभी के लिए जाएं (मैंने इसका उपयोग किया है और काम कर रहा है)

`

<video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
    	<source src="video/video.mp4" type="video/mp4"></source>
		<source src="video/video.webm" type="video/webm"></source>
		<source src="video/video.mov" type="video/mov"></source>
</video>

स्निपेट का विस्तार करें

`

Question 14

मेरे पास एक समान मुद्दा था जहां <video>केवल टैग में वीडियो क्रोम और फ़ायरफ़ॉक्स पर खेला जाता है, लेकिन सफारी नहीं। यहाँ मैं इसे ठीक करने के लिए क्या किया है ...

एक अजीब चाल मैंने पाया कि आपके वीडियो के दो अलग-अलग संदर्भ थे, एक <video>क्रोम और फ़ायरफ़ॉक्स के <img>लिए एक टैग में और दूसरा सफारी के लिए एक टैग में। मजेदार तथ्य, वीडियो वास्तव में <img>सफारी पर एक टैग में खेलते हैं । इसके बाद, एक निश्चित ब्राउज़र उपयोग में होने पर एक या दूसरे को छिपाने के लिए एक सरल स्क्रिप्ट लिखें। उदाहरण के लिए:

<video id="video-tag" autoplay muted loop playsinline> 
    <source src="video.mp4" type="video/mp4" />  
</video>
<img id="img-tag" src="video.mp4">

<script type="text/javascript">
    function BrowserDetection() {

    //Check if browser is Safari, if it is, hide the <video> tag, otherwise hide the <img> tag
    if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {
        document.getElementById('video-tag').style.display= "none";
    } else {
        document.getElementById('img-tag').style.display= "none";
    }               

    //And run the script. Note that the script tag needs to be run after HTML so where you place it is important. 
    BrowserDetection();
</script>

यह कुछ ब्राउज़रों पर कुछ वीडियो पर एक पतली ब्लैक फ्रेम / बॉर्डर की समस्या को हल करने में भी मदद करता है जहां उन्हें गलत तरीके से प्रस्तुत किया जाता है।

Question 15

मुझे यह समस्या थी जहां .mp4 प्लेबैक सफारी में काम नहीं किया था, लेकिन अन्य ब्राउज़रों में यह ठीक था। कंसोल में मुझे जो त्रुटि दिखाई दे रही थी, वह थी: त्रुटि मीडिया src समर्थित नहीं। मेरे मामले में यह MIME प्रकार का मुद्दा निकला, लेकिन इसलिए नहीं कि इसे IIS में MIME प्रकार घोषित नहीं किया गया था, बल्कि यह कि इसे दो बार (IIS में और एक web.config फ़ाइल में भी) घोषित किया गया था। मुझे सर्वर पर स्थानीय रूप से .mp4 फ़ाइल डाउनलोड करने का प्रयास करके यह पता चला। मैंने जिस कन्टैंट को चलाने की कोशिश कर रहा था, उसके स्थान से कॉन्फिगर फाइल को हटा दिया और इसने समस्या को ठीक कर दिया। मैं सिर्फ web.config फ़ाइल से MIME प्रकार हटा सकता था, लेकिन इस मामले में web.config फ़ाइल की आवश्यकता नहीं थी।

Question 16

IOS के लिए, कृपया केवल mp4 स्रोत फ़ाइल का उपयोग करें। मैंने नवीनतम सफारी ब्राउज़र में एक समस्या देखी है कि सफारी ब्राउज़र स्रोत फ़ाइल का सही तरीके से पता लगाने में सक्षम नहीं है और इस वजह से, वीडियो ऑटोप्ले काम नहीं करता है।

नीचे दिए गए उदाहरण की जाँच करें -

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.mp4" type="video/mp4"></source>
        <source src="video/video.webm" type="video/webm"></source>
     </video>

जैसा कि मैंने mp4, webm को सोर्स फाइल्स में इस्तेमाल किया है। Safari deosnt webm का समर्थन करता है लेकिन अभी भी नवीनतम सफारी संस्करण में, यह webm का चयन करेगा और यह वीडियो ऑटोप्ले को विफल करता है।

इसलिए समर्थित ब्राउज़र में ऑटोप्ले काम करने के लिए, मैं पहले ब्राउज़र की जाँच करने का सुझाव दूंगा और उसके आधार पर आपको अपना HTML तैयार करना चाहिए।

तो सफारी के लिए, नीचे HTML का उपयोग करें।

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.mp4" type="video/mp4"></source>
     </video>

सफारी के अलावा,

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.webm" type="video/webm"></source>
        <source src="video/video.mp4" type="video/mp4"></source>
     </video>

Question 17

मुझे एक ही समस्या थी - सुनिश्चित करें कि वीडियो संपत्ति के लिए यूआरएल सुरक्षित डोमेन से आ रहा है। हमारे देव पर्यावरण http है जबकि उत्पादन सुरक्षित है। वीडियो को संबंधित पथ के माध्यम से संदर्भित होने के कारण, यह विकास पर काम नहीं कर रहा था। ऐसा प्रतीत होता है कि सेब को सुरक्षित करने के लिए वीडियो की आवश्यकता है ...

Question 18

काम कर रहा है, लेकिन MacOs ने हाल ही में उपयोगकर्ता के लिए ऑटोप्ले नीति बनाई है: https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/ , मैंने ध्वनि सक्षम करने के लिए एक बटन का उपयोग करके एक ही समस्या हल की है:

ejm:

<video autoplay loop muted id="myVideo">
  <source src="amazon.mp4" type="video/mp4">
  Sorry, your browser doesn't support embedded videos...
</video>

<button class="pausee" onclick="disableMute()" type="button">Enable sound</button>

<script>
var vid = document.getElementById("myVideo");
function disableMute() { 
  vid.muted = false;
}
</script>

स्निपेट का विस्तार करें

Question 19

मैंने उसी मुद्दे का सामना किया है। क्योंकि मेरे वीडियो फ्रेम का आकार बहुत बड़ा था। ie.2248 px Apple सपोर्ट H.264 बेसलाइन प्रोफाइल लेवल 3.0 वीडियो, 640 एफ 480 तक 30 एफपीएस। ध्यान दें कि बेसलाइन प्रोफाइल में बी फ्रेम समर्थित नहीं हैं। अधिक जानकारी के लिए इसे देखें

Question 20

क्या मेरे मामले में मदद ऑडियो ट्रैक गिर रहा था। यह पहले चुप था, लेकिन इसे पूरी तरह से जाना था।

Ubuntu पर:

ffmpeg -i input.mp4 -vcodec copy -an output.mp4

और सफारी / डेस्कटॉप वीडियो चलाने के लिए शुरू करते हैं

Question 21

मेरे उपयोग के मामले में दो चीजें थीं :

मैं नई विशेषता / वेबकिट की नीति का उपयोग नहीं कर रहा था playsinline;
मेरा वीडियो / माइम-प्रकार या व्हाटशेल ठीक से एन्कोड नहीं किया गया था, इसलिए मैंने इस साइट का उपयोग इसे उन सभी प्रारूपों में बदलने के लिए किया जिनकी मुझे आवश्यकता थी: https://pt.converterpoint.com/

ओ /

Question 22

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

<video 
  muted
  playsInline
  controls
  style={{ width: `100%` }}>
  <source src={MfMfVideo} type="video/mp4" />
  <source src={MfMfVideoWebM} type="video/webm" />
</video>

और मैंने अपने वीडियो को बाहरी लाइब्रेरी में स्थानांतरित कर दिया और मैं सफारी पर अब ठीक हूं, यह अच्छी तरह से काम करता है:

<video 
  muted
  playsInline
  controls 
  style={{ width: `100%` }}>
  <source src={"https://blabla.com/video/dixneuf-video_r8xuvc.mp4"} type="video/mp4" />
  <source src={"https://blabla.com/videodixneuf-video_gyquuu.webm"} type="video/webm" />
  Sorry, your browser doesn't support embedded videos.
</video>

Question 23

30mb से कम के वीडियो को कंप्रेस करने के अलावा मेरे लिए कुछ भी काम नहीं आया। यह चाल चली लेकिन बहुत खराब संपीड़न के साथ।

Question 24

अगर किसी को वही समस्या हो रही है तो मैंने इसे अपने सर्वर पर बाइट-रेंज सपोर्ट को सक्षम करके हल किया है। ऐसा प्रतीत होता है कि सफारी को बाइट रेंज अनुरोधों की आवश्यकता है। मेरे मामले में मैं NGINX का उपयोग करता हूं और मुझे proxy_force_ranges on;अपनी कॉन्फ़िग फ़ाइल में जोड़ना था । इस उत्तर के लिए धन्यवाद !