আইফোনটিতে এইচটিএমএল 5 ভিডিও অটোপ্লে


92

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

<video src="video/bg.mp4" style="z-index: -1;object-fit: cover;" poster="video/bg.jpg" autobuffer autoplay loop muted></video>

এটি বেশিরভাগ ব্রাউজারগুলিতে পুরোপুরি সূক্ষ্মভাবে কাজ করে (IE এই বস্তু-ফিট জিনিসটির সাথে লড়াই করে তবে আমি আপত্তি করি না) তবে আইফোনটিতে ভিডিওটি অটোপ্লে করে না তবে আইপ্যাডে তা করে। আমি ইতিমধ্যে আইওএসের জন্য নতুন নীতিগুলি পড়েছি এবং আমি মনে করি আমি প্রয়োজনীয়তাগুলি পূরণ করি (অন্যথায় আইপ্যাড স্বয়ংক্রিয়ভাবে চালিত হবে না)। আমি অন্য কিছু পরীক্ষা করেছি:

  • ওভারলেয়িং ডিভগুলি অপসারণ এটি ঠিক করবে না
  • জেড-সূচক মুছে ফেলা এটি ঠিক করবে না
  • ওয়াইফাই বা সেলুলার কোনও পার্থক্য করে না
  • ভিডিও ফাইলাইজও কোনও পার্থক্য করে না

আমি কি এটি ভুল করছি বা আইফোনটি কেবল ভিডিওগুলি অটোপ্লে করে না এবং সর্বদা ইন্টারঅ্যাকশন প্রয়োজন? আমি কেবল আইওএস 10 এর জন্য যত্ন নিই, আমি জানি যে আইওএস 9 এ প্রয়োজনীয়তাগুলি আলাদা ছিল


আপনি এখানে কিছু সহায়তা পেতে সক্ষম হতে পারেন: stackoverflow.com/questions/41360490/… ব্যক্তিগতভাবে, এই সমস্ত টিপস এবং অ্যাপল নীতি অনুসরণ করার পরেও আইফোনটিতে অটোপ্লে করতে আমার কাছে এখনও কোনও ভিডিও পাইনি।
চিহ্নিত করুন

আমার বুঝতে কয়েক ঘন্টা লাগল। প্রত্যেকের ঘন্টা বাঁচানোর চেষ্টা করার জন্য আমি একটি ব্লগে আমার অনুসন্ধানগুলি সংক্ষিপ্ত করে রেখেছি। আশা করি এটা সাহায্য করবে. medium.com/@BoltAssaults/...
BoltCoder

উত্তর:


227

করে playsinline অ্যাট্রিবিউট সাহায্য করেছিল?

আমার যা আছে তা এখানে:

<video autoplay loop muted playsinline class="video-background ">
  <source src="videos/intro-video3.mp4" type="video/mp4">
</video>

playsinlineএখানে মন্তব্য দেখুন : https://webkit.org/blog/6784/new-video-pol नीति-for-ios/


4
হাল্লুজা! এর জন্য আপনাকে ধন্যবাদ, প্রায় এক ডজন অন্যান্য সমাধানের কোনও ফল হয়নি।
টোলমার্ক

24
playsinlinemutedআইফোনে লো পাওয়ার মোডের কিরক মাথায় রেখে আমার জন্য কাজ করেছেন
কেন

4
এই উত্তর।
জ্যাক্রেন

4
playsinlineদিন বাঁচাল !!!! ধন্যবাদ মানুষ. বিটিডাব্লু, নতুন ব্রাউজার নীতিগুলির দাবি যে আপনি যদি কোনও ভিডিও অটোস্টার্ট করতে চান তবে এটি নিঃশব্দ করা শুরু করুন বা আপনি এটি করতে সক্ষম হবেন না। ক্রোমের জন্য উদাহরণস্বরূপ +1 ক্লিক করুন: [ ডেভেলপারস.ইউইউ / ওয়েব /
নুনো প্রতা

22
আপনি ব্যবহার করেন, তাহলে প্রতিক্রিয়া দেখায়, দয়া করে মনে রাখবেন অ্যাট্রিবিউট playsinlineক্যামেলকেস লেখা হবে: playsInline। অন্যথায় এটি কাজ করবে না।
কোয়ান্টিন ডি

64

আইওএস 10+ ভিডিও অটোপ্লে ইনলাইনে অনুমতি দেয়। তবে আপনাকে আপনার আইফোনে "লো পাওয়ার মোড" বন্ধ করতে হবে।


4
দুর্দান্ত টিপ তবে আমি জমা দিয়েছি এমন সম্পর্কে আমার একটি প্রশ্ন রয়েছে: stackoverflow.com/questions/50400902/…
ম্যাথিউ

8
আমি আমার ঘন্টা স্বয়ংক্রিয়ভাবে প্লে হচ্ছে না তা বোঝার চেষ্টা করে শেষ ঘন্টা বা তার চেয়ে বেশি সময় ব্যয় করেছি। এই জন্য আপনাকে ধন্যবাদ!
লিওর

4
এই জন্য আপনাকে ধন্যবাদ!
নিকিতা রোগাত্নেভ

4
এটি উল্লেখযোগ্য যে আমরা ব্যবহারকারীর ডিভাইস এবং লো পাওয়ার মোডের টার্নটি নিয়ন্ত্রণ করতে পারি না। কেবলমাত্র আমরা যা করতে পারি তা হল ব্যবহারকারীকে আরও ভাল অভিজ্ঞতা অর্জনের জন্য "লো পাওয়ার মোডটি বন্ধ করতে" অনুরোধ করা
মুহাম্মদ ওসামা

4
আমার সাথেও ঘটেছিল এবং আপনার পোস্টটি না পাওয়া পর্যন্ত আমাকে ক্রেজিও করে তোলে। আমি ইতিমধ্যে সাফারি 11 এবং 11.1 এর চশমাটি দেখছিলাম যদি তারা সম্ভবত সম্পূর্ণভাবে অটোপ্লে অক্ষম করে তবে এটি কেবলমাত্র কম শক্তি মোড ... একটি ডেভস জীবন কঠিন হতে পারে। :-)
হেকি

8

একটি ওয়েবসাইটে ভিডিও অটোপ্লে নিয়ে আপনার যে সকল লড়াই রয়েছে তা কাটিয়ে উঠতে এখানে ছোট্ট হ্যাক:

  1. ভিডিওটি চলছে বা না তা পরীক্ষা করুন।
  2. বডি ক্লিক বা স্পর্শের মতো ইভেন্টে ভিডিও প্লে ট্রিগার করুন।

দ্রষ্টব্য: কিছু ব্রাউজার ব্যবহারকারীদের ডিভাইসের সাথে ইন্টারঅ্যাক্ট না করা পর্যন্ত ভিডিওগুলিকে অটোপ্লে করতে দেয় না।

ভিডিওটি চলছে কিনা তা পরীক্ষা করতে স্ক্রিপ্টগুলি:

Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function () {
    return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}});

এবং তারপরে আপনি কেবল ইভেন্ট শ্রোতাদের শরীরে সংযুক্ত করে ভিডিওটি অটোপ্লে করতে পারেন:

$('body').on('click touchstart', function () {
        const videoElement = document.getElementById('home_video');
        if (videoElement.playing) {
            // video is already playing so do nothing
        }
        else {
            // video is not playing
            // so play video now
            videoElement.play();
        }
});

বিঃদ্রঃ: autoplay বৈশিষ্ট্যটি খুব মৌলিক যা এই স্ক্রিপ্টগুলি বাদে ইতিমধ্যে অন্য কোনও ভিডিও ট্যাগে যুক্ত করা দরকার।

কোডের সাথে কাজ করার উদাহরণটি আপনি এখানে এই লিঙ্কটিতে দেখতে পারেন:

ডিভাইসটি কম পাওয়ার মোডে / ডেটা সেভিং মোডে / সাফারি ব্রাউজার ইস্যুতে থাকা অবস্থায় কীভাবে ভিডিও অটোপ্লে করবেন


0

আমারও একই সমস্যা ছিল এবং আমি একাধিক সমাধান চেষ্টা করেছিলাম। আমি এটি 2 বিবেচনা বাস্তবায়ন সমাধান।

  1. কোড dangerouslySetInnerHtmlএম্বেড করতে ব্যবহার করা হচ্ছে <video>। উদাহরণ স্বরূপ:
<div dangerouslySetInnerHTML={{ __html: `
    <video class="video-js" playsinline autoplay loop muted>
        <source src="../video_path.mp4" type="video/mp4"/>
    </video>`}}
/>
  1. ভিডিওর ওজনকে পুনরায় আকার দিন। আমি লক্ষ্য করেছি যে আমার আইফোন 3 মেগাবাইটের বেশি ভিডিও অটোপ্লে করে না । সুতরাং আমি 4 এমবি থেকে 500 কেবি এরও কমতে যেতে একটি অনলাইন সংক্ষেপক সরঞ্জাম ( https://www.mp4compress.com/ ) ব্যবহার করেছি

এছাড়াও, তার গাইডের জন্য @ বল্টকোডারকে ধন্যবাদ : অটোপ্লে নিঃশব্দ এইচটিএমএল 5 ভিডিওটি মোবাইলে প্রতিক্রিয়া ব্যবহার করে (সাফারি / আইওএস 10+)

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