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

Question 1

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

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

স্নিপেট প্রসারিত করুন

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

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

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

Question 2

করে 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/

Question 3

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

Question 4

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

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

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

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

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 বৈশিষ্ট্যটি খুব মৌলিক যা এই স্ক্রিপ্টগুলি বাদে ইতিমধ্যে অন্য কোনও ভিডিও ট্যাগে যুক্ত করা দরকার।

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

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

Question 5

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

কোড dangerouslySetInnerHtmlএম্বেড করতে ব্যবহার করা হচ্ছে <video>। উদাহরণ স্বরূপ:

<div dangerouslySetInnerHTML={{ __html: `
    <video class="video-js" playsinline autoplay loop muted>
        <source src="../video_path.mp4" type="video/mp4"/>
    </video>`}}
/>

ভিডিওর ওজনকে পুনরায় আকার দিন। আমি লক্ষ্য করেছি যে আমার আইফোন 3 মেগাবাইটের বেশি ভিডিও অটোপ্লে করে না । সুতরাং আমি 4 এমবি থেকে 500 কেবি এরও কমতে যেতে একটি অনলাইন সংক্ষেপক সরঞ্জাম ( https://www.mp4compress.com/ ) ব্যবহার করেছি

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