0

I'm encountering issues with both Android and IPhone playing an embedded youtube video using an iFrame.

"Warning: To prevent unsolicited downloads over cellular networks at the user’s expense, embedded media cannot be played automatically in Safari on iOS — the user always initiates playback."

But on my samsung galaxy s6 edge I can sorta get it to play. In the code below. If I call mute() first then it will play. Problem of course is that there is no volume. So I tried placing unMute() after the playVideo() call but the video no longer plays. Is this a bug in the API? Is there really no solution to play the video without having to manually touch the play button?

<iframe id="cvVideoPlayer"  seamless="seamless" style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding-top: 10px; border: none;"></iframe>

var parameters = '&enablejsapi=1';
var url = 'https://www.youtube.com/embed/' + entrys.VideoID + '?start=' + 0 + '&autoplay=1' + parameters;
var iframe = $('#cvVideoPlayer');
if (iframe.length) {
    iframe.attr('src', url);

    self.ytVidePlayer = new YT.Player('cvVideoPlayer', {
        events: {
            'onReady': this.onPlayerReady,
            'onStateChange': this.onPlayerStateChange
        }
    });
}

onPlayerReady: function (evt) {
    evt.target.mute();
    evt.target.playVideo();
}
adviner
  • 3,295
  • 10
  • 35
  • 64

2 Answers2

1

If you're talking about a normal webpage, I don't think it will work because Google and Apple forbid it explicitly (for the reasons you state). By the way many users will hate your webpage if you find a workaround to autoplay the video.

If you are talking about a native app with a WebView, you can have limited success:

However, about Android, If possible, I'd suggest to use the Native (non-html) API that not only supports Autoplay flawlessly, but the performance is much better and you can scale the window, change size, etc... without artifacts.

rupps
  • 9,712
  • 4
  • 55
  • 95
0

I have built a Library to play IFrame, this solution is based on Webview and RelativeLayout in Android.

The procedure is simple, add xml like this:

<dev.nurujjamanpollob.iframeplayer.NJPollobIframePlayer 
    android:id="@+id/iframe_player" 
    android:layout_width="match_parent"
    android:layout_height="250dp" />

Then in your Java Code:

NJPollobIframePlayer iframe = findViewById(R.id.iframe_player);
  DataHolder dataholder = new DataHolder();
  dataholder.includeIframe("<iframe width=\"100%\" height=\"200\" src=\"https://www.youtube.com/embed/nCgQDjiotG0\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"true\"></iframe>");
  iframe.loadIFrameByIFrameUtility( new NJPollobIFrameUtility(dataholder)..buildIFrame());

For me, it is perfect

anyway if you went to see this project then visit here:

https://github.com/nurujjmanpollob/IFramePlayerAndroidAPI

Taslim Oseni
  • 6,086
  • 10
  • 44
  • 69
njpollob
  • 11
  • 1
  • 5