HTML5 ভিডিও ট্যাগ সাফারি, আইফোন এবং আইপ্যাডে কাজ করছে না


94

আমি একটি এইচটিএমএল 5 ওয়েব পৃষ্ঠা তৈরি করার চেষ্টা করছি যাতে 13 টির মতো একটি ছোট ভিডিও রয়েছে, আমি এই ভিডিওটির ফ্ল্যাশ সংস্করণটিকে 3 ফর্ম্যাটে রূপান্তর করেছি: .ogv ফায়ারফগ ব্যবহার করে, ওয়েবেএম ফায়ারফগ ব্যবহার করে এবং .mp4 হ্যান্ডব্রেক অ্যাপ্লিকেশনটি এইচটিএমএল স্ক্রিপ্ট ব্যবহার করে আমি আমার পৃষ্ঠায় ব্যবহার করেছি:

<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>

ভিডিওটি ক্রোম এবং ফায়ারফক্সে দুর্দান্ত কাজ করছে তবে ডেস্কটপে সাফারি বা আইফোন বা আইপ্যাডে মোটেই কাজ করছে না, আউটপুট কেবল একটি ফাঁকা পৃষ্ঠা যা ভিডিও ট্যাগটির নিয়ন্ত্রণগুলি দেখায় তবে কিছুই লোড হয় না is

নোট করুন যে আমার কাছে থাকা সাফারি সংস্করণটি এইচটিএমএল 5 ভিডিও সমর্থন করে


দৃশ্যত তার একটি MimeType ইস্যু এই চেক করুন লিংক আরও তথ্যের জন্য আমি দেখেছি এটা এখানে একটি সুন্দর দিন :) আছে
জেমস Dayeh

4
নোট করা ভাল, autoplay
আইওএসে

4
আপনি playsinlineভিডিও ট্যাগে বৈশিষ্ট্যটি ব্যবহার করে দেখেছেন ?
হুমায়ুন কবির

উত্তর:


92

আইফোন এবং আইপ্যাডের মতো অ্যাপল ডিভাইসগুলির সাথে আমার একই সমস্যা ছিল, আমি লো পাওয়ার মোডটি বন্ধ করে দিয়েছি এবং এটি কাজ করে এবং আপনার playsinlineভিডিওর ট্যাগটিতেও এর মতো বৈশিষ্ট্য অন্তর্ভুক্ত করা উচিত :

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

এটি কেবল যখন অন্তর্ভুক্ত তখন কাজ করেছিল playsinline


4
ভিডিও কন্ট্রোলগুলি এটি আমাদের জন্য আইফোনগুলিতে কাজ করা সত্ত্বেও আমরা দেখতে চাইনি, তবে "প্লেসাইনলাইন" যুক্ত করে নিখুঁতভাবে কাজ করেছে এবং নিয়ন্ত্রণগুলি না দেখিয়ে এটি আইফোনগুলির পাশাপাশি অন্য সমস্ত ডিভাইসে কাজ করেছে। নিখুঁত উত্তর!
এরিকা সামার

12
প্রতিক্রিয়া ব্যবহারকারী প্রত্যেকের জন্য দ্রষ্টব্য: আপনাকে playsInlineউটকেসে ব্যবহার করতে হবে ।
এথান রায়ান

6
এটি আসলে এখানে সেরা উত্তর।
রুবিফ্যান্যাটিক

এটি 100% কাজ করে! আমি লক্ষ্য করেছি যে সমস্যাটি কেবলমাত্র আইফোনের চেয়ে ব্রাউজারেরই নয় কারণ আমার ভিডিওটি আইফোনগুলিতে অন্য ব্রাউজারগুলিতেও খেলছিল না
noel293

48

আপনার ভবিষ্যতের সন্ধানকারীদের জন্য আর একটি সম্ভাব্য সমাধান: (যদি আপনার সমস্যাটি মাইমটাইপ সমস্যা না হয়))

কোনও কারণে ভিডিওগুলি আইপ্যাডে প্লে হবে না যতক্ষণ না আমি নিয়ন্ত্রণগুলি "" সত্য "পতাকা সেট করি।

উদাহরণ: এটি আইফোনে আমার জন্য কাজ করেছে তবে আইপ্যাড নয়।

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

এবং এটি এখন আইপ্যাড এবং আইফোন উভয় ক্ষেত্রেই কাজ করে:

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

এটি আমার জন্যও সমস্যা ছিল ... ভিডিও ট্যাগটিতে কন্ট্রোলস অ্যাট্রিবিউট যোগ না করা পর্যন্ত কিছুই কাজ করেনি।
বিশবুল

এটি আমার জন্য পুরোপুরি কাজ করেন। ভবিষ্যতের পাঠকদের জন্য, আমি উপরে নীঙ্কনক পোস্ট করা ভিডিও ট্যাগটি ব্যবহার করে একটি এমপি 4 এম্বেড করছি। ধন্যবাদ!
জন

4
আমার জন্য, autoplayবিকল্পটি যুক্ত করে কাজ করা হয়েছে। controls="false"আমার কোডে আছে
হোজেফা

4
@ হোজেফা controls="false"অপ্রয়োজনীয়; controlsনিজেই একটি বুলিয়ান যা উপস্থিত যখন নিয়ন্ত্রণগুলি চালু করে এবং যখন উপস্থিত হয় না তখন কোনও নিয়ন্ত্রণ থাকে না।
ডাব্লু

4
এছাড়াও, যেহেতু controlsবুলিয়ান বৈশিষ্ট্য তাই একমাত্র বৈধ মানগুলি কোনও নয়, একটি খালি স্ট্রিং বা এর নিজস্ব নাম। সত্য এবং মিথ্যা মানগুলি ভুল।
ইয়ান ডেভলিন

33

আপনার ওয়েব সার্ভারটি HTTP বাইট-রেঞ্জের অনুরোধগুলিকে সমর্থন করবে না। আমি যে ওয়েব সার্ভারটি ব্যবহার করছি তাতে এটি ঘটেছে এবং ফলাফলটি হ'ল ভিডিও উইজেট লোড হয় এবং প্লে বোতাম প্রদর্শিত হয়, তবে বোতামটি ক্লিক করার কোনও প্রভাব নেই। - ভিডিওটি এফএফ এবং ক্রোমে কাজ করে তবে আইফোন বা আইপ্যাড নয়।

পরিশিষ্ট এ - তে বাইট-রেঞ্জের অনুরোধগুলি সম্পর্কে মোবিফোর্জ ডটকম এ আরও পড়ুন : অ্যাপল আইফোনটির জন্য স্ট্রিমিং :

প্রথমত, সাফারি ওয়েব ব্রাউজার সামগ্রীটির জন্য অনুরোধ করে এবং যদি এটি কোনও অডিও বা ভিডিও ফাইল হয় তবে এটি এটি মিডিয়া প্লেয়ার খুলবে। মিডিয়া প্লেয়ারটি তখন ওয়েবসাইভার বাইট-রেঞ্জের অনুরোধ সমর্থন করে তা নিশ্চিত করার জন্য সামগ্রীটির প্রথম 2 বাইট অনুরোধ করে। তারপরে, যদি এটি তাদের সমর্থন করে তবে আইফোনটির মিডিয়া প্লেয়ারটি বাইট-রেঞ্জগুলির মাধ্যমে বাকী সামগ্রীটি অনুরোধ করে এবং এটি চালায়।

আপনি "আইফোন এমপি 4 বাইট-রেঞ্জ" এর জন্য ওয়েবে অনুসন্ধান করতে চাইতে পারেন।



এটা আমার সমস্যা ছিল। আমি 'সেন্ড_ফায়াল' এবং 'সেন্ড_ফর্ম_ডাইরেক্টরি' কল সহ ফ্লাস্ক ব্যবহার করছি। এই কলগুলিতে আমাকে 'শর্তসাপেক্ষ = সত্য' যুক্তি যুক্ত করতে হয়েছিল।
জুস্ট

এই উত্তরটি আমার জন্য প্রযোজ্য এবং আমার প্লে ফ্রেমওয়ার্ক বাস্তবায়নে কাজ করেছে (২.7) ব্যবহার করুন RangeResult.ofPath(finalPath, range, Some(mime))এবং ২.7 এবং তারপরের দিকে কাজ করা উচিত।
মানাবু টোকুনাগা

পিএস: কীভাবে ব্যাপ্তি পেতে তা যুক্ত করতে ভুলে গেছেন। এই কল। এটি "রেঞ্জ" হিসাবে এসেছে `ভাল পরিসর = অনুরোধ.হেডার্স.জেট (" রেঞ্জ ")`
মানাবু টোকুনাগা

17

আপনার ভিডিওগুলি কোনও সেশন-ভিত্তিক লগইন সিস্টেম দ্বারা সুরক্ষিত থাকলে, সাফারি সেগুলি লোড করতে ব্যর্থ হবে। কারণ সাফারি ভিডিওটির জন্য প্রাথমিক অনুরোধ জানায়, তারপরে এই কাজটি কুইকটাইমকে হস্তান্তর করে, যা অন্য একটি অনুরোধ করে। যেহেতু সাফারি সেশনের তথ্য ধারণ করে, এটি প্রমাণীকরণটি পাস করবে, তবে কুইকটাইম তা করবে না।

আপনি যদি নিজের সার্ভার অ্যাক্সেস লগটি দেখে থাকেন তবে আপনি এটি দেখতে পাবেন ... প্রথমে সাফারি থেকে অনুরোধ করুন, তারপরে কুইকটাইম থেকে অনুরোধ করুন। অন্যান্য ব্রাউজারগুলি কেবল ব্রাউজার থেকেই একটি একক অনুরোধ করে।

যদি এটি আপনার সমস্যা হয় তবে আপনাকে অস্থায়ী টোকেন ব্যবহার করতে ভিডিওর অ্যাক্সেস বা মূল অনুরোধ থেকে একটি সীমিত সময় অ্যাক্সেস পুনরায় কাজ করতে হতে পারে। যদি আমি আরও সরাসরি সমাধান খুঁজে পাই তবে আমি এই উত্তরটি আপডেট করব।


13

ভবিষ্যতের অনুসন্ধানগুলিকে জন্য ভাল হিসাবে, আমি একটি MP4 যে ফাইলটি আমি ব্যবহার handbrake সঙ্গে লাগে ছিল handbrake-gtkথেকে apt-get, যেমন sudo apt-get install handbrake-gtk। উবুন্টু 14.04-এ, handbrakeসংগ্রহস্থলের বাক্সের বাইরে এমপি 4 এর জন্য সমর্থন অন্তর্ভুক্ত নয়। আমি ডিফল্ট সেটিংস ছেড়ে গিয়েছি, অডিও ট্র্যাকটি কেটে ফেলেছি এবং এটি * .M4V ফাইল উত্পন্ন করে। যারা ভাবছেন তাদের জন্য, তারা একই ধারক তবে এম 4 ভি আইটিউনে প্রাথমিকভাবে আইটিউনে খোলার জন্য ব্যবহৃত হয়।

এটি সাফারি বাদে সমস্ত ব্রাউজারে কাজ করেছে:

<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আবারও গুণাবলী যুক্ত করে পরীক্ষা করেছি , কোনও প্রভাব নেই।

এটি মাভারিক্সের সাফারি 7 এবং ইয়োসেমাইটে সাফারি 8 সহ পরীক্ষিত সমস্ত ব্রাউজারে কাজ করেছে। আমি কেবল একই এম 4 ভি ফাইলটির (প্রকৃত ফাইল, কেবলমাত্র এইচটিএমএল নয়) এমপিথনে নামকরণ করেছি এবং আমাদের সিডিএনটিতে পুনরায় আপলোড করেছি:

<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>

আমার মনে হয় সাফারি পুরোপুরি একটি আসল নামযুক্ত এমপি 4 আশা করে। ফাইল এবং মাইম-টাইপের কোনও সংমিশ্রণ আমার পক্ষে কাজ করে নি। আমি মনে করি অন্যান্য ব্রাউজারগুলি প্রথমে WEBM ফাইলের জন্য বিশেষত ক্রোম বেছে নেয়, যদিও আমি নিশ্চিত যে উত্স তালিকাটি প্রযুক্তিগতভাবে সমর্থিত প্রথম উত্সটি নির্বাচন করবে।

এটি আইওএস ডিভাইসে ভিডিও ইস্যুটি স্থির করেনি (আইপ্যাড 3 "নতুন আইপ্যাড" এবং আইফোন 6 পরীক্ষা করেছে)।


9

কেবল একটি mutedবৈশিষ্ট্য যুক্ত করুন এবং সবকিছু ঠিকঠাক কাজ করবে।

এই উত্তরের উত্স এখানে: https://webkit.org/blog/6784/new-video-polferences-for-ios/

ডিফল্টরূপে, ওয়েবকিটের নিম্নলিখিত নীতিগুলি থাকবে:

<video autoplay> উপাদানগুলি নীচের শর্তগুলি পূরণ করে এমন উপাদানগুলির জন্য এখন অটোপ্লে গুণকে সম্মান করবে:

  • <video> যদি তাদের উত্স মিডিয়াতে অডিও ট্র্যাক না থাকে তবে উপাদানগুলি কোনও ব্যবহারকারী অঙ্গভঙ্গি ছাড়াই অটোপ্লে করার অনুমতি পাবে।
  • <video muted> ব্যবহারকারীর অঙ্গভঙ্গি ছাড়াই উপাদানগুলিকে অটোপ্লে করার অনুমতি দেওয়া হবে।
  • যদি কোনও <video>উপাদান কোনও অডিও ট্র্যাক লাভ করে বা ব্যবহারকারীর অঙ্গভঙ্গি ছাড়াই নিঃশব্দ হয়ে যায়, প্লেব্যাক বিরতি দেবে।
  • <video autoplay> উপাদানগুলি কেবল তখনই প্লে করা শুরু হবে যখন অন স্ক্রিনে দৃশ্যমান হয় যখন এগুলি যখন ভিউপোর্টে স্ক্রোল করা হয়, সিএসএসের মাধ্যমে দৃশ্যমান করা হয় এবং ডওমে প্রবেশ করা হয়।
  • <video autoplay> উপাদানগুলি অ-দৃশ্যমান হয়ে ওঠে, যেমন ভিউপোর্টের বাইরে স্ক্রোল করে p

<video> উপাদানগুলি এখন নীচের শর্ত পূরণ করে এমন উপাদানগুলির জন্য, খেলার () পদ্ধতিটিকে সম্মান করবে:

  • <video> যদি তাদের উত্স মিডিয়ায় কোনও অডিও ট্র্যাক না থাকে বা তাদের নিঃশব্দ সম্পত্তিটিকে সত্য হিসাবে সেট করা থাকে তবে উপাদানগুলি কোনও ব্যবহারকারী অঙ্গভঙ্গি ছাড়াই () খেলতে দেওয়া হবে।
  • যদি কোনও <video>উপাদান কোনও অডিও ট্র্যাক লাভ করে বা ব্যবহারকারীর অঙ্গভঙ্গি ছাড়াই নিঃশব্দ হয়ে যায়, প্লেব্যাক বিরতি দেবে।
  • <video> অন-স্ক্রিনে দৃশ্যমান না হলে বা ভিউপোর্টের বাইরে গেলে উপাদানগুলিকে () খেলতে দেওয়া হবে।
  • video.play () একটি প্রতিশ্রুতি ফিরিয়ে দেবে, যা এই শর্তগুলির কোনওটি মানা না হলে তা প্রত্যাখ্যান করা হবে।

আইফোনে, <video playsinline>উপাদানগুলিকে এখন ইনলাইন খেলতে দেওয়া হবে এবং প্লেব্যাক শুরু হওয়ার পরে স্বয়ংক্রিয়ভাবে পূর্ণস্ক্রিন মোডে প্রবেশ করবে না। <video>প্লেসাইনলাইন বৈশিষ্ট্যযুক্ত উপাদানগুলি আইফোনে প্লেব্যাকের জন্য ফুলস্ক্রিন মোডের প্রয়োজন চালিয়ে যাবে। একটি চিম্টি <video>ইশারায় পূর্ণস্ক্রিন থেকে বেরিয়ে আসার সময়, প্লেসাইনলাইন ছাড়া উপাদানগুলি ইনলাইন খেলতে থাকবে।


4

আমি দেখতে পেয়েছি যে সাফারি যদিও HTML5 ভিডিও সমর্থন করে তবে কুইকটাইম প্লেয়ারটি এটি কাজ করার জন্য ইনস্টল করতে হবে। আমি যে সাইটটি এইচটিএমএল 5 ভিডিও ব্যবহার করি সেগুলিতে, সাফারি ব্যবহার করার সময় ব্যবহারকারীকে সতর্ক করা হয়, তাদের অবশ্যই কুইকটাইম ইনস্টল করা থাকতে হবে, অন্যথায় তারা কেবল ভিডিও ট্রান্সক্রিপ্টগুলি দেখতে পাবে। আশাকরি এটা সাহায্য করবে.


এই উত্তর আর আপ টু ডেট নেই।
জোর

4

আমি অবিশ্বস্ত 'বিকাশ' এসএসএল শংসাপত্রগুলির সাথে অদ্ভুত সমস্যাগুলি দেখেছি যেখানে মোবাইল সাফারি বেশ সুখে আপনার পৃষ্ঠাটি পরিবেশন করবে তবে আপনি শংসাপত্রটি গ্রহণ করলেও কোনও 'জাল' এসএসএল শংসাপত্রের জন্য একটি ভিডিও পরিবেশন করতে অস্বীকার করেছেন।

পরীক্ষা করতে আপনি ভিডিওটি অন্য কোথাও স্থাপন করতে পারেন - বা HTTP- এ স্যুইচ করুন (পুরো পৃষ্ঠার জন্য) এবং এটি প্লে করা উচিত।


4

'প্লেসাইনলাইন' যুক্ত করা আইফোন এবং আইপ্যাতে আমার জন্য কাজ করে যদি আপনি আপনার ভিডিওটি নিঃশব্দ করা মনে করেন না।

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

আপনি যদি নিজের ভিডিওটি নিঃশব্দ করা না চান তবে এখনও অটোপ্লে চান তবে সম্ভবত জেএস সহ নিঃশব্দের বৈশিষ্ট্যটি সরিয়ে ফেলার চেষ্টা করুন: নিঃশব্দ প্রোপ সহ কীভাবে এইচটিএমএল 5 ভিডিওটি সশব্দ করতে হবে


3

আইওএস 6.1 হিসাবে, এখন আর আইপ্যাডে ভিডিওগুলি অটো প্লে করা সম্ভব নয়। অ্যাপল ডকুমেন্টেশন অনুসারে অটোপ্লে বৈশিষ্ট্যটি আইপ্যাড সহ সমস্ত আইওএস ডিভাইসে সাফারিটিতে কাজ করছে না:

"অ্যাপল আইপিএস ডিভাইসগুলিতে স্ক্রিপ্ট এবং বৈশিষ্ট্য প্রয়োগ উভয়ের মাধ্যমে স্বয়ংক্রিয়ভাবে ভিডিও চালানো অক্ষম করার সিদ্ধান্ত নিয়েছে।

সাফারিতে, আইওএসে (আইপ্যাড সহ সমস্ত ডিভাইসের জন্য), যেখানে ব্যবহারকারী সেলুলার নেটওয়ার্কে থাকতে পারে এবং ডেটা ইউনিট অনুযায়ী চার্জ করা যায়, প্রিললোড এবং অটো-প্লে অক্ষম থাকে। ব্যবহারকারী এটি শুরু না করা পর্যন্ত কোনও ডেটা লোড হয় না। "

আপনি এই অ্যাপল ডকুমেন্টেশনে এটি আরও পড়তে পারেন


4
এটি কোনওভাবেই প্রশ্নের উত্তর দেওয়ার চেষ্টা করে না এবং এটি একটি মন্তব্য হিসাবে কার্যকর হতে পারে। প্রশ্নটি ভিডিওগুলি মোটেও প্লে হচ্ছে না সে সম্পর্কে ছিল এবং এর অটোপ্লে বৈশিষ্ট্যের সাথে কোনও সম্পর্ক নেই।
zzzzBov

3

একটি এমপি 4 এর জন্য এই কাজগুলি (সাফারি মোবাইল এবং ডেস্কটপ):

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

controls=”true”একটি উপরে পোস্টে উল্লেখ আমার কোন ধারণা হিসাবে অ্যাপল তার নিজের উপর শুধু ব্যবহার নিয়ন্ত্রণ বলেছেন।

রেফারেন্স: "এইচটিএমএল 5 অডিও বা ভিডিও ব্যবহার করতে, কোনও উপাদান বা উপাদান তৈরি করে মিডিয়াটির জন্য উত্স URL নির্দিষ্ট করে এবং নিয়ন্ত্রণ বৈশিষ্ট্য সহ শুরু করুন। <video src="http://example.com/path/mymovie.mp4" controls></video>

উত্স: https://developer.apple.com/library/content/docamentation/AudioVideo/ কনসেপ্টুয়াল / ইউজিং_HTML5_ অডিও_ভিডিও / পরিচয় / পরিচয় html

আমার লেনদেনে (একটি ছোট ডিগ্রেশন) : আমি দেখতে পেয়েছি যে আইফোন থেকে ভিডিও আপলোড করা এটি .উইকটাইম হিসাবে সার্ভারে প্রেরণ করে। পরিহাসের বিষয় হচ্ছে, যখন সাফারিতে সার্ভার থেকে ভিডিওটি প্লে করার চেষ্টা করা হচ্ছে তখন এই সমস্যা। (মোবাইল এবং ডেস্কটপ)।

সুতরাং (যদি আমার মতো) আপনি সাফারিতে একটি .উইকটাইম (বা। এমপি 4 ব্যতীত অন্য কোনও সমস্যা) ভোগ করছেন তবে এখানে অ্যাপল সরবরাহ করা একটি কাজ। দ্রষ্টব্য, আমি এটি নিজেই পরীক্ষা করতে পারছি এবং আমি এক নজরে এগুলি নিয়ে খুশি নই, কেবল আরও তথ্য সরবরাহ করছি।

রেফারেন্স: "কুইকটাইম প্লাগ-ইন-এ ফিরে যান কুইকটাইম প্লাগ-ইনে ফিরে আসার একটি সহজ উপায় যা প্রায় সমস্ত ব্রাউজারের জন্য কাজ করে Apple এইচটিএমএল ভিডিও উদাহরণ থেকে অ্যাপল, ac_quicktime.js, সরবরাহিত প্রি-বিল্ট জাভাস্ক্রিপ্ট ফাইল ডাউনলোড করুন এবং আপনার HTML পৃষ্ঠায় নিম্নলিখিত কোডের লাইনটি প্রবেশ করে এটি আপনার ওয়েবপৃষ্ঠায় অন্তর্ভুক্ত করুন: <script src="ac_quicktime.js" type="text/javascript"></script>"

সূত্র: https://developer.apple.com/library/content/docamentation/AudioVideo/ কনসেপ্টুয়াল / ইউজিং_HTML5_ অডিও_ভিডিও / অডিওঅ্যান্ডভিডিওও ট্যাগব্যাসিকস / অডিও এবং ভিডিওটি ট্যাগব্যাসিকস html# // apple_ref/ doc/ uid/ TP40009523-

আপডেট:.mov সার্ভারে পূর্বে আপলোড করার জন্য .কিকটাইম নামকরণের জন্য (বেস 64 ফাইল টাইপের "ডেটা: ভিডিও / মুভি;"), ac_quicktime.js এড়িয়ে যান। । । তারপরে এইচটিএমএল ভিডিও ট্যাগে কাজ করবে; হ্যাকারডি হ্যাক


2

এই কোডটি ব্যবহার করে ভিডিও সাফারিতে সমস্ত ব্রাউজারে আইওএস ডিভাইসগুলির সাথে খেলবে ... এর জন্য সবার জন্য যান (আমি এটি ব্যবহার করেছি এবং ভাল কাজ করেছি)

`

<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>

`


লুপ, অটোপ্লে এবং নিয়ন্ত্রণ ছাড়াই পটভূমি ভিডিও পাওয়ার চেষ্টা করার জন্য এটিই আমার জন্য কাজ করেছিল। ধন্যবাদ অরবিন্দ!
স্টুয়ার্ট পিনফোল্ড

2

আমার একটি অনুরূপ সমস্যা ছিল যেখানে একটি <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>

এটি নির্দিষ্ট ব্রাউজারগুলির কিছু ভিডিওতে পাতলা কালো ফ্রেম / সীমান্তের সমস্যা সমাধানে সহায়তা করে যেখানে সেগুলি ভুলভাবে রেন্ডার করা হয়।


1

সাফারি তে। এমপি 4 প্লেব্যাক কাজ করে না এমন জায়গায় আমার এই সমস্যাটি ছিল তবে অন্যান্য ব্রাউজারগুলিতে এটি ঠিক ছিল। কনসোলে আমি যে ত্রুটিটি দেখছিলাম তা হ'ল: ত্রুটি মিডিয়া src সমর্থিত নয়। আমার ক্ষেত্রে এটি একটি মাইম টাইম সমস্যা হিসাবে প্রমাণিত হয়েছিল, তবে এটি আইআইএসে মাইম টাইপ হিসাবে ঘোষিত হয়নি বলে নয়, বরং এটি দুবার ঘোষিত হয়েছিল (একবার আইআইএসে এবং ওয়েবকনফাইগ ফাইলেও)। সার্ভারে এমপি 4 ফাইলটি স্থানীয়ভাবে ডাউনলোড করার চেষ্টা করে আমি এটি খুঁজে পেয়েছি। আমি যে কনটেন্টটি খেলতে চাইছিলাম তার অবস্থান থেকে কনফিগারেশন ফাইলটি সরিয়েছি এবং এটি সমস্যার সমাধান করেছে। আমি কেবল ওয়েবকনফিগ ফাইল থেকে মাইম টাইপটি মুছতে পারতাম, তবে এই ক্ষেত্রে ওয়েবকনফিগ ফাইলটির প্রয়োজন ছিল না।


1

আইওএসের জন্য, দয়া করে কেবল এমপি 4 উত্স ফাইলটি ব্যবহার করুন। আমি সর্বশেষ সাফারি ব্রাউজারে একটি সমস্যা পর্যবেক্ষণ করেছি যে সাফারি ব্রাউজার সোর্স ফাইলটি সঠিকভাবে সনাক্ত করতে পারে না এবং এর কারণে ভিডিও অটোপ্লে কাজ করে না।

নীচে উদাহরণে চেক করতে দেয় -

     <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>

আমি উত্স ফাইলগুলিতে এমপি 4, ওয়েবম ব্যবহার করেছি। সাফারি ডিওসেন্ট ওয়েবম সমর্থন করে তবে সর্বশেষ সাফারি সংস্করণে এটি ওয়েবম নির্বাচন করবে এবং এটি ভিডিও অটোপ্লে ব্যর্থ করে।

তাই সমর্থিত ব্রাউজার জুড়ে অটোপ্লে কাজ করার জন্য, আমি প্রথমে ব্রাউজারটি চেক করার পরামর্শ দেব এবং এর ভিত্তিতে আপনাকে আপনার এইচটিএমএল তৈরি করা উচিত।

সুতরাং সাফারিটির জন্য, নীচে এইচটিএমএল ব্যবহার করুন।

     <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>

1

আমার একই সমস্যা ছিল - ভিডিও সম্পত্তির url নিরাপদ ডোমেন থেকে আসছে তা নিশ্চিত করুন। উত্পাদন সুরক্ষিত থাকাকালীন আমাদের দেব পরিবেশটি http http ভিডিওটিকে আপেক্ষিক পথে রেফারেন্স দেওয়ার কারণে, এটি বিকাশে কাজ করছে না। এমন একটি বিষয় মনে হচ্ছে যে অ্যাপলটিকে ভিডিও সুরক্ষিত করার জন্য প্রয়োজন ...


1

কাজ করছে তবে ম্যাকওরা সম্প্রতি ব্যবহারকারীর জন্য অটোপ্লে নীতি করেছে: https://webkit.org/blog/7734/auto-play-policy-changes- for-macos/ , আমি একই সমস্যাটি শব্দটি সক্ষম করতে একটি বোতাম ব্যবহার করে সমাধান করেছি:

ইজম:

<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>


0

আমি একই সমস্যার মুখোমুখি হয়েছি। কারণ আমার ভিডিও ফ্রেমের আকার খুব বড়। ie.2248 পিক্সেল আপেল এইচ 264 বেসলাইন প্রোফাইল স্তর স্তর 3.0 ভিডিও সমর্থন করে 30 এফপিএসে 640 এক্স 480 অবধি। নোট করুন যে বেস ফ্রেমগুলিতে বি ফ্রেমগুলি সমর্থিত নয়। আরও তথ্যের জন্য এটি পরীক্ষা করুন


0

আমার ক্ষেত্রে যা সহায়তা করেছিল তা ছিল অডিও ট্র্যাকটি নামা। এটি আগে নীরব ছিল, তবে এটি পুরোপুরি চলে যেতে হয়েছিল।

উবুন্টুতে:

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

এবং সাফারি / ডেস্কটপ থেকে ভিডিওটি খেলতে শুরু করুন


0

আমার ব্যবহারের ক্ষেত্রে দুটি জিনিস ছিল :

  1. আমি নতুন বৈশিষ্ট্য / ওয়েবকিটের নীতি ব্যবহার করছিলাম না playsinline;
  2. আমার ভিডিও / মাইম-টাইপ বা কী কী সঠিকভাবে এনকোড করা হয়নি, তাই আমি এই সাইটটি আমার প্রয়োজনীয় সমস্ত ফর্ম্যাটে রূপান্তর করতে ব্যবহার করেছি: https://pt.converterPoint.com/

ও /


0

আমার ঠিক একই সমস্যা ছিল, আমার এইচটিএমএল ভিডিও ট্যাগটি ক্রোম এবং মজিলা, সাফারি-তে ভাল অভিনয় করেছে - নিয়ন্ত্রণগুলি উপস্থিত হয়েছিল তবে ভিডিও ফাঁকা ছিল। আমি উপরের সমস্ত বৈশিষ্ট্যগুলির সাথে খেলতে চেষ্টা করেছি, নিঃশব্দ, প্লেইনলাইন ইত্যাদি সরিয়ে / যুক্ত করতে চেষ্টা করেছি এবং কিছুই কার্যকর হয়নি। এখানে বর্ণিত হিসাবে সার্ভারগুলির সাথে সমস্যা ছিল। আমার এটি ছিল - কাজ করিনি:

<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>

0

ভিডিওটি 30 মিম্বরের কম হওয়া সংকুচিত করা ছাড়া আমার পক্ষে আর কিছুই হয়নি। এটি কৌশলটি করেছে তবে খুব খারাপ সংকোচনের সাথে।


0

কারও যদি একই সমস্যা হয় তবে আমি আমার সার্ভারে বাইট-রেঞ্জ সমর্থন সক্ষম করে এটি সমাধান করেছি। দেখা যাচ্ছে যে সাফারিটির বাইট রেঞ্জের অনুরোধগুলি দরকার। আমার ক্ষেত্রে আমি এনজিআইএনএক্স ব্যবহার করি এবং proxy_force_ranges on;আমার কনফিগারেশন ফাইলটিতে আমাকে যুক্ত করতে হয়েছিল। এই উত্তর ধন্যবাদ !


0

আপনি যদি REACT এ ব্যবহার playsInlineকরেন এটি সমস্ত আইওএস ডিভাইসে কাজ করছে

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.