5
votes

I have used Youtube API to play automatically a video but i have found out that it only works fine on PCs but NOT mobile devices. I did a bit of google-ing and discovered that autoplay feature is disabled on mobile devices.

No the questions is, can i detect if autoplay is disabled ??. Or at least force the video to show youtoube play button if vidio is on state -1.

i.e.

if(event.data == -1) {
    // show play button
}
2
Please vote for autoplay detection: issuetracker.google.com/u/0/issues/79307168pablo

2 Answers

0
votes

It appears that there is no way of getting this information without testing with you video and checking whether the video's current time has advanced after it has loaded.

It was asked for as a feature in modernizr but as you can see from this comment from Paul Irish, you have to have a video to check. It looks like they are trying to add this into v3 of modernizr.

So essentially it is doable and his pseudocode should get you started. Basically the first four points are done already. You would just need to implement the last two.

create a video element
set video element src to something
add autoplay attribute to it
add element to the dom
bind to that event (something metadata soemthing) that fires when its buffered some
setTimeout after it fires and see if currentTime is > 0
0
votes

A sample to autoplay without using arg autoplay. I only test this solution on PCs not mobile but you can try this code :

LIVE EXAMPLE

HTML

<div id="player"></div>

JS

var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


    var tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";
          var firstScriptTag = document.getElementsByTagName('script')[0];
          firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


    var player;
          function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', {
              height: '390',
              width: '640',
              videoId: 'M7lc1UVf-VE',
              events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
              }
            });
          }


          function onPlayerReady(event) {
            event.target.playVideo();
          }

          function onPlayerStateChange(event) {
            if (event.data == YT.PlayerState.PLAYING) {

            } else {

            }
          }
    function stopVideo() {
            player.stopVideo();
          }