ভিডিও অটো প্লে সাফারি এবং ক্রোম ডেস্কটপ ব্রাউজারে কাজ করছে না

Question

এখানে ভিডিও কেন এম্বেড করা হয়েছে তা বোঝার চেষ্টা করার জন্য আমি অনেক সময় ব্যয় করেছি:

<video height="256" loop autoplay muted controls id="vid">
         <source type="video/mp4" src="video_file.mp4"></source>
         <source type="video/ogg" src="video_file.ogg"></source>
</video>

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

Comments

এটা মাঝে মাঝে কাজ করছে? বা মোটেও কাজ করছে না ... এখানে আমি উদাহরণস্বরূপ w3schools.com/tags/tryit.asp?filename=tryhtml5_video_autoplay যা আমি ক্রোম দিয়ে পরীক্ষা করে দেখি এবং এটি কার্যকর।

— তানয়দিন

কিছু পৃষ্ঠায় এটি মোটেও কাজ করছে না

— অ্যাডাম বুবেলা

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

— পেরে

ক্রোমে আমার পক্ষে কাজ করছেন না।

— বব দ্য বিল্ডার

Answer 1

আমি যে সেরা ফিক্সটি পেতে পারি তা হ'ল এই কোডটি যুক্ত করা </video>

<script>
    document.getElementById('vid').play();
</script>

... সুন্দর না তবে কোনওভাবে কাজ করে।

আপডেট করুন সাম্প্রতিক অনেক ব্রাউজার কেবল সাউন্ড অফ করেই ভিডিওগুলি অটোপ্লে করতে পারে, তাই আপনাকে mutedভিডিও ট্যাগটিতেও বৈশিষ্ট্য যুক্ত করতে হবে

<video autoplay muted>
...
</video>

Comments

অথবা আপনি jQuery $("videoID").get(0).play(); স্ট্যাকওভারফ্লো.com

— পেঙ্গুইন

বা এর মতো:$("video[autoplay]").each(function(){ this.play(); });

— মার্টিন

এখনও নিঃশব্দ না হলে সমস্যা developers.google.com/web/updates/2017/09/...

— dovid

এটি আফ্রিক

— ওয়েবকিটের

এই স্ট্যাকওভারফ্লো.com

— লেয়ানড্রো এইচ অ্যাগোস্টিনহো

Answer 2

play()অন্যান্য উত্তরগুলির পরামর্শ অনুসারে jQuery বা DOM ম্যানিপুলেশন ব্যবহার করার পরে , এটি ক্রোয়েডের অ্যান্ড্রয়েড (সংস্করণ 56.0) এ এখনও কাজ করা হয়নি (ভিডিও অটোপ্লেয়িং ছিল না)।

এই অনুযায়ী পোস্টে মধ্যে developers.google.com , ক্রোম 53 থেকে অটোপ্লে বিকল্প ব্রাউজার দ্বারা, বিবেচনা করা হয় যদি ভিডিও নিঃশব্দ হয়েছে ।

সুতরাং autoplay mutedভিডিও ট্যাগে বৈশিষ্ট্যগুলি ব্যবহার করে ভিডিওটি ক্রোম ব্রাউজারগুলিতে 53 সংস্করণ থেকে স্বয়ংক্রিয় প্লে করতে সক্ষম করে।

উপরের লিঙ্ক থেকে অংশ:

ভিডিওর জন্য নিঃশব্দ অটোপ্লে সংস্করণ 53. হিসাবে Android এর জন্য Chrome দ্বারা সমর্থিত প্লেব্যাক কে কোনো ভিডিও উপাদানে জন্য স্বয়ংক্রিয়ভাবে শুরু হবে একবার এটি ভিউতে আসে উভয় autoplayএবং mutedনির্ধারণ করা হয় [...]

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

• নিঃশব্দ অটোপ্লে আইওএস 10 এবং তারপরে সাফারি দ্বারা সমর্থিত।
• অটোপ্লে, নিঃশব্দ থাকুক বা না, ফায়ারফক্স এবং ইউসি ব্রাউজার দ্বারা ইতিমধ্যে অ্যান্ড্রয়েডে সমর্থিত: তারা কোনও ধরণের অটোপ্লে ব্লক করে না।

Comments

আমার সাফারি ১১-এ এই সমস্যাটি ছিল যেখানে একটি পটভূমি ভিডিও (অডিও নেই) স্বয়ংক্রিয়ভাবে খেলবে না। যুক্ত mutedএবং autoplayকৌশলটি। ধন্যবাদ!

— dmbaughman

তাহলে কেন অটোপ্লে, ইউটিউবের সাথে কাজ করে? সাইটটি শুরুর পর থেকে এটি সেভাবে কাজ করেছে।

— জেভিয়ার

Answer 3

এমনটি ঘটে যে ডেস্কটপে সাফারি এবং ক্রোম ভিডিও ট্যাগের চারপাশে ডিওএম ম্যানিপুলেশন পছন্দ করে না। প্রাথমিক পৃষ্ঠার লোডের পরে ভিডিও ট্যাগের চারপাশে ডিওএম পরিবর্তিত হয়ে গেলে ক্যানপ্লেথ্রু ইভেন্টটি চালিত হয়ে গেলেও অটোপ্লে বৈশিষ্ট্য সেট করা থাকলে তারা প্লে অর্ডারটি চালিত করবে না। মূলত আমার একই সমস্যা ছিল যতক্ষণ না আমি ভিডিও ট্যাগের চারপাশে একটি .wrap () jQuery মুছি এবং তারপরে এটি প্রত্যাশার সাথে অটোপ্লে হয়।

Comments

ভাল কল যে এটি .wrap () এর সাথে কাজ করে না। তবে যতদূর আমি বলতে পারি, কোডটির কাজ করার জন্য .get (0) প্রয়োজন: $ ("# ভিড") get (0) .প্লে ();

— ম্যাটসওয়েভ

@ ম্যাটসওয়েভ .get(0)বা ঠিক$('#vid')[0].play()

— সন্ধ্যা rot

অক্টোবর 2017, ট্যাগটিতে গুণমান সত্ত্বেও ভিডিও অটোপ্লেল না হওয়া এখনও সাফারিতে একটি সমস্যা। ম্যাটসওয়েভ / পিএমরোটুলের পরামর্শ অনুসারে [0] .প্লে () ব্যবহার করে সমস্যার সমাধান হয়েছে।

— ডন কুলেন

Answer 4

গুগল কেবল অটোপ্লে ভিডিওগুলির জন্য তাদের নীতি পরিবর্তন করেছে, এটি হওয়া দরকার muted

আপনি এখানে চেক করতে পারেন

সুতরাং কেবল নিঃশব্দ যুক্ত করুন

<video height="256" loop="true" autoplay="autoplay" controls="controls" id="vid" muted>
         <source type="video/mp4" src="video_file.mp4"></source>
         <source type="video/ogg" src="video_file.ogg"></source>
</video>

Comments

নতুন পলিসি সম্পর্কে জন প্যালেটের মন্তব্য । তিনি Google Chrome এর প্রডাক্ট ম্যানেজার এবং মিডিয়া MUTER ।

— ডুমজুনকি

Answer 5

আমার জন্য বিষয়টি হ'ল ট্যাগটির mutedমধ্যে বৈশিষ্ট্যটি যুক্ত করা দরকার video। অর্থাৎ,

<video width="1920" height="1980" src="video/Night.mp4"
type="video/mp4" frameborder="0" allowfullscreen autoplay loop
muted></video>`

Comments

— উইন্ডোজ

ক্রোমে অন থাকলে আমি নিঃশব্দ অক্ষম শব্দ যুক্ত করি। আমি এটি চাই না

— lisarko8077

Answer 6

ক্রোম শোনার সাথে ভিডিওটি অটো চালানোর অনুমতি দেয় না, তাই ট্যাগটির মতো এই mutedবৈশিষ্ট্যে যুক্ত করার বিষয়টি নিশ্চিত করুনvideo

<video width="320" height="240"  autoplay muted>
  <source src="video.mp4" type="video/mp4">
</video>

Comments

এটি নতুন কিছু যুক্ত করে না। গৃহীত উত্তর ইতিমধ্যেই এই উল্লেখ করা হয়। এছাড়াও দ্বিতীয় উত্তরটি বিশদে যায়।

— স্যামুয়েল ফিলিপ

Answer 7

আমি এখন আমার ভিডিওতে একই সমস্যা পেয়েছি

<video preload="none" autoplay="autoplay" loop="loop">
  <source src="Home_Teaser.mp4" type="video/mp4">
  <source src="Home_Teaser" type="video/webm">
  <source src="Home_Teaser.ogv" type="video/ogg">
</video>

অনুসন্ধানের পরে, আমি একটি সমাধান পেয়েছি:

যদি আমি "প্রিললোড" বৈশিষ্ট্যগুলি "সত্য" এর কাছে সেট করি তবে ভিডিওটি সাধারণত শুরু হয়

Comments

অটোপ্লে উপস্থিত থাকলে প্রিলোড লোড বৈশিষ্ট্যটি ব্রাউজার দ্বারা উপেক্ষা করা হয়।

— সেদাত বাহার

Answer 8

পৃষ্ঠার নীচে নীচের কোডটি যুক্ত করা আমার পক্ষে কাজ করেছিল। আমি জানি না কেন এটি কাজ করে :(

 setTimeout(function(){
     document.getElementById('vid').play();
 },1000);

Comments

কারণ আপনি যখন বাফারের মধ্যে ভিডিওটি লোড হওয়ার জন্য অপেক্ষা করছেন তখন আপনি এটি প্লে করেন।

— জোসেফ ব্রিগেস

Answer 9

এটা চেষ্টা কর:

  <video width="320" height="240"  autoplay muted>
            <source src="video.mp4" type="video/mp4">
  </video>

Answer 10

var video = document.querySelector('video'); video.muted = true; video.play()

শুধুমাত্র এই সমাধানটি আমাকে সহায়তা করেছিল, <video autoplay muted ...>...</video>কাজ করে নি ...

Answer 11

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

function startVideoIfNotStarted () {
    $(".id_of_video_tag").ready(function () {
        window.setTimeout(function(){
            videojs("id_of_video_tag").play()
        }, 1000);
    });
}
$(startVideoIfNotStarted);

Comments

ক্রোমে কোনও কিছুই আমার পক্ষে কাজ করেনি। উপরের। প্লে () ফিক্স (হ্যাক) দিয়ে আমি একটি "আনকচড (প্রতিশ্রুতিতে) ডোমেক্সেক্সেপশন পেয়েছিলাম: নাটক () অনুরোধটি বিরতি দেওয়ার জন্য একটি কল দিয়ে বাধা দেওয়া হয়েছিল ()"। কনসোলে পৃষ্ঠায় আরও কয়েকটি jQuery ফাংশন ছিল, তাই ভেবেছিলেন যে কোনও টাইমার ক্রোমকে নিজেকে সাজানোর জন্য পর্যাপ্ত সময় দেবে। এটা কাজ করেছে. আমি 0.5 (দস্তাবেজ) এ একটি 0.5 দ্বিতীয় টাইমার সেট করেছি

— ready প্রস্তুতি

Answer 12

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

আমরা কোডটিতে তৃতীয় "প্লেসাইনলাইন" বৈশিষ্ট্য যুক্ত করেছি এবং এটি আইওএস ব্যবহারকারীদের জন্য সমস্যাটি স্থির করেছে।

এই ফিক্সটি অনলাইনে প্লে হওয়া ভিডিওগুলির সাথে নির্দিষ্ট। Https://webkit.org/blog/6784/new-video-polferences-for-ios/ থেকে :

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

Answer 13

গুগল অটোপ্লে নীতি আপডেট করেছে। অটোপ্লে কেবল নিঃশব্দ মোডে কাজ করে। লিঙ্কটি https://developers.google.com/web/updates/2017/09/autoplay-policy-changes দেখুন

Comments

ভিডিওটি নিঃশব্দ করা হয়েছে, প্রশ্নটি দেখুন

— অ্যালেক্স অ্যাঞ্জেলিকো

Answer 14

এটা চেষ্টা কর:

    <video height="256" loop autoplay controls id="vid">
     <source type="video/mp4" src="video_file.mp4"></source>
     <source type="video/ogg" src="video_file.ogg"></source>

আমি সাধারণত এটি এটি করি। লুপ, নিয়ন্ত্রণ এবং অটোপ্লেতে বুলিয়ান বৈশিষ্ট্যগুলির একটি মান প্রয়োজন হয় না।

Answer 15

এটি কারণ এখন ক্রোম এইচটিএমএল 5 ভিডিওতে অটো প্লে বাধা দিচ্ছে, তাই ডিফল্টরূপে তারা অটো খেলতে দেয় না। তাই আমরা ক্রোম ফ্ল্যাগ সেটিংস ব্যবহার করে এই সেটিংস পরিবর্তন করতে পারি। এটি সাধারণ ক্ষেত্রে সম্ভব নয় তাই আমি অন্য একটি সমাধান খুঁজে পেয়েছি। এটি নিখুঁতভাবে কাজ করছে ... (প্রিলোড = "অটো" যুক্ত করুন)

<video autoplay preload="auto" loop="loop" muted="muted" id="videoBanner" class="videoBanner">
<source src="banner-video.webm" type="video/webm">
<source src="banner-video.mp4" type="video/mp4">
<source src="banner-video.ogg" type="video/ogg">

var herovide = document.getElementById('videoBanner');
       herovide.autoplay=true;
       herovide.load();  

Answer 16

উপরে উল্লিখিত সমস্ত সমাধান চেষ্টা করে দুই ঘন্টা ব্যয় করলেন।

শেষ পর্যন্ত আমার পক্ষে এটিই কাজ করেছিল:

var vid = document.getElementById("myVideo");
vid.muted = true;

Answer 17

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

আমি কাজ করে দেখতে পেয়েছি যে ভিডিও ব্যবহারের সূত্রপাত করার জন্য ব্যবহারকারীর অঙ্গভঙ্গি ইভেন্টটি হ'ল :

document.body.addEventListener("touchstart", function () {
    var allVideos = document.querySelectorAll('video');
    for (var i = 0; i < allVideos.length; i++) {
        allVideos[i].play();
    }
},{ once: true });

আপনি ওয়েবকিট সাইটে আইওএসের জন্য ব্যবহারকারীর অঙ্গভঙ্গি এবং ভিডিও নীতিগুলি সম্পর্কে আরও পড়তে পারেন:

https://webkit.org/blog/6784/new-video-policies-for-ios/

Answer 18

আমার একটি কেস হয়েছে যেখানে এটির বিভিন্ন ফাইল টাইপের ক্রমের সাথে কিছু যুক্ত ছিল। এটি পরিবর্তন করার চেষ্টা করুন এবং দেখুন যে এটি সাহায্য করে কিনা।

Answer 19

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

//slowLooper(playAllVisibleVideos);
slowLooper(playVideoClosestToCenter);

function isVideoPlaying(elem) {
    if (elem.paused || elem.ended || elem.readyState < 2) {
        return false;
    } else {
        return true;
    }
}
function isScrolledIntoView(el) {
    var elementTop = el.getBoundingClientRect().top;
    var elementBottom = el.getBoundingClientRect().bottom;
    var isVisible = elementTop < window.innerHeight && elementBottom >= 0;
    return isVisible;
}
function playVideoClosestToCenter() {
    var vids = document.querySelectorAll('video');
    var smallestDistance = null;
    var smallestDistanceI = null;
    for (var i = 0; i < vids.length; i++) {
        var el = vids[i];
        var elementTop = el.getBoundingClientRect().top;
        var elementBottom = el.getBoundingClientRect().bottom;
        var elementCenter = (elementBottom + elementTop) / 2.0;
        var windowCenter = window.innerHeight / 2.0;
        var distance = Math.abs(windowCenter - elementCenter);
        if (smallestDistance === null || distance < smallestDistance) {
            smallestDistance = distance;
            smallestDistanceI = i;
        }
    }
    if (smallestDistanceI !== null) {
        vids[smallestDistanceI].play();
        for (var i = 0; i < vids.length; i++) {
            if (i !== smallestDistanceI) {
                vids[i].pause();
            }
        }
    }
}
function playAllVisibleVideos(timestamp) {
    // This fixes autoplay for safari
    var vids = document.querySelectorAll('video');
    for (var i = 0; i < vids.length; i++) {
        if (isVideoPlaying(vids[i]) && !isScrolledIntoView(vids[i])) {
            vids[i].pause();
        }
        if (!isVideoPlaying(vids[i]) && isScrolledIntoView(vids[i])) {
            vids[i].play();
        }
    }
}
function slowLooper(cb) {
    // Throttling requestAnimationFrame to a few fps so we don't waste cpu on this
    // We could have listened to scroll+resize+load events which move elements
    // but that would have been more complicated.
    function repeats() {
        cb();
        setTimeout(function() {
            window.requestAnimationFrame(repeats);
        }, 200);
    }
    repeats();
}

Answer 20

আমি একই সমস্যাটি সমাধান করেছি,

$(window).on('pageshow',function(){
    var vids = document.querySelectorAll('video');
    for (var i = 0; i < vids.length;){
        vids[i].play();
    }
})

পৃষ্ঠাটি দেখানোর পরে আপনাকে ভিডিওগুলি চালু করতে হবে।

Answer 21

এর autoPlayজন্য অদলবদল করার চেষ্টা করুন autoplay।

এটি অনেক সময় কেস সংবেদনশীল বলে মনে হয়। খুব উদ্ভট কারণ এটি autoplayআমার পক্ষে কাজ করেছে, তবে কেবল আমি অন্তর্ভুক্ত থাকলেcontrols