javascript - YouTube iFrame API Video Intermittently Playing on Mobile Devices -


i've spent way many hours on little success. have client site has youtube video popup when page loads. autoplays on desktop , shows youtube play button on mobile since autoplay not supported on mobile. using iframe js api instantiate video player (code examples below). setup working perfectly on desktop, on mobile devices (android or ios), between myself , coworkers, clicking youtube play button plays video 80% of time. rest of time video loading spinner spins , nothing happens. if close reload player using site controls play, not initially.

i know not issue majority of users viewing site know our client going go ape crazy if, out of 100 reloads on iphones, 10 of them result in behavior.

i instantiating player follows:

1) including "hard copy" of youtube iframe api js on site first.

2) have object controlling display of youtube "modal" window contains player target -- when function called following:

// write div element container _instance.videocontainer.innerhtml = '<div id="youtube-player"></div>'; // grab reference _instance.el = document.getelementbyid('youtube-player'); // call yt player api _instance.player = new yt.player('youtube-player', {      playervars: { // trying bunch of different params no success           playsinline : 1 ,            origin : window.location.origin ,            autoplay : 1 ,            wmode: "opaque" ,            iv_load_policy : 3       },      videoid: videoid , // passed function      events : {           onready : function(){                console.log('resolved player');                // function changes container visibility                _instance.play();           },           onstatechange : function( event ){              if( event.data == yt.playerstate.ended ){                 _instance.close();              }           }       } });

  1. at point, video either playing automatically in desktop 100% of time, or has shown youtube player video thumbnail , big red play button on mobile. trouble starts -- most of time plays fine, rest of time spins , spins , never plays. what's interesting is, on android, if blur window , reopen it, can click play button again , play.

  2. it shouldn't matter @ point, destroying div , player reference when modal closed.

i've tried pretty can think of...

  • the youtube video somehow being throttled , showing many times through iframe origin? added 'origin' property params thinking might case, didn't seem make of difference. seem have higher success rate coworkers loading video.
  • is there reason asynchronously load youtube iframe script in examples, rather loading copy site?

that's can think of @ point... there i'm missing? thanks.

there related thread stated autoplay function not allowed mobile devices.

from documentation:

due restriction, functions , parameters such autoplay, playvideo(), loadvideobyid() won't work in mobile environments.

a simple workaround have custom looks of "play" button:

have overlay element pointer-events: none;. pointer-events works on modern mobile browsers or have video container on button opacity: 0.

hope helps!


Comments

Post a Comment

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

i've set bento/ubuntu-16.04 vagrant box using php 5.6, , getting following error quite few times when try , run shell script: "uncaught reflection exception: class domdocument not exist". i've tried adding following top of script (not together), each no success: "sudo apt-get install php5.6-xml", "sudo apt-get install php5-xml", "sudo apt-get install php-dom" i've tried resetting server "sudo service apache2 restart". does have suggestions?
Read more

vue.js - Create hooks for automated testing -

Image
qa guys complained can't automate frontend testing. because our html looks same outside. lazy hack did this <template> <div :role="$options.name"> ... </div> </template> <script> export default { name: 'vmcomponentname' } </script> which takes name script , applies html. in browser get: <div role="vmcomponentname"> ... </div> line :role="$options.name" goes in every component. is there dry er solutions? please share. additional details i'll explain in details looking for. imagine have vmusercreate form creates user. test case can create user . to automatically test without role, have use following selector: .wrapper > .wrapper > .wrapper > .submit-button the test extremely brittle (will break lot). if use roles can use [role="vmusercreateform"] .submit-button selector. many folds less brittle. so basically, i'm ...
Read more

Add new key value to json node in java -

i have json file : { "id":1, "name":"abc", "addressdetails": { "city":"newyork" } } i wanted add 1 more key-value ("pincode" : "414141") node 'addressdetails'. i tried using : objectmapper mapper = new objectmapper(); jsonnode root = mapper.readtree(new file("d://test.json")); objectnode node = mapper.createobjectnode(); node.with("addressdetails").put("pincode", "414141"); but it's not getting added, there way can ? you can try you should modify file path objectmapper mapper = new objectmapper(); objectnode nodes = mapper.readvalue(new file("d:\\test.txt"), objectnode.class); nodes.with("addressdetails").put("pincode", "414141"); mapper.writer().writevalue(new file("d:\\test.txt"), nodes);
Read more