How can I autoplay youtube video in the app?

ionic-v1
#4

I’m doing this on iOS. I have set following preferences in config.xml:


all to no avail. When i click on a button that takes me to the page which has the iframe, the page opens up but youtube video is just there, no auto playing.

then i have to click on the video to get it started. I want it automatically started so that to watch a video, user doesn’t have to click twice on a video.

#5

Why not use the Youtube Player IFrame API instead:

This way you can control events when player is loaded and changes state (playing, pause, stopped, …).

Here is the example I’ve tried that works on Android Phone:

Note: To test on real device, I’ve created a blank ionic 1.0 project with:

ionic start youtubeTest blank
ionic platform add android
ionic plugin add cordova-plugin-whitelist (this is needed to enable network calls)

pasted the code from pen and then:

ionic run android

#6

thanks bokboki2002 but i’ve already tried that. nothing happened. the page loads but nothing comes up on the page.

#7

The example works for sure. It must be something in your configuration. Are you sure you added the cordova-plugin-whitelist to the project?
Also, have you checked if the Chrome console displays errors when you do the remote debug.
Instructions on how to setup remote debugging:

#8

yes i have checked the console. there’s no error. the weird thing is that the same page works when i run it in chrome browser. but when i run it in the app (cordova ios project) the video doesn’t auto play.

here’s what i’m doing:

  1. i click on a button ‘show video’
  2. the link opens a modal view page that contains the iframe view
  3. the page opens up and the video thumbnail is shown (but it doesn’t auto play)
  4. i click on the video thumbnail which then expands and plays a video.

if everything works fine, on step 3 the video should play right? but it doesn’t in my case.

also, when i said that nothing happened, i was talking about my app not your example. your example surely works. and that’s exactly i myself had set it up while trying to make this work with iframe api. you also probably have taken the example from the same place i took: first example on the google iframe api reference. it worked on simple webpage, but didn’t in my ios project.

#9

Again - UIWebView on iPhone does not allow auto play on HTML5 video. Playback can only be initiated through user interaction.

#10

I don’t have an iPhone with me to try this, but on iPhone 6 Simulator example is working. The video player is presented in fullscreen (like explained in iOS-Specific Considerations -> Optimization for Small Screens), but auto start is working.

#11

Unless something has changed in a recent version of Cordova or iOS, autoplay and inline playback is possible with HTML5 videos in iOS.

config.xml configuration options that may be useful to you:

<preference name="MediaPlaybackRequiresUserAction" value="true"/>

MediaPlaybackRequiresUserAction (boolean, defaults to false): Set to true to prevent HTML5 videos or audios from playing automatically with the autoplay attribute or via JavaScript.

<preference name="AllowInlineMediaPlayback" value="true"/>

AllowInlineMediaPlayback (boolean, defaults to false): Set to true to allow HTML5 media playback to appear inline within the screen layout, using browser-supplied controls rather than native controls. For this to work, add the webkit-playsinline attribute to any <video> elements.

From the Official Cordova Docs: The config.xml File > iOS Configuration

App rejected by google, do not turn on YouTube background videos
#12

Hello there,

I have same issue on android device, So, can someone tell me how to solved this issue?

Thanks in advance

#13

Hello,
I autoplay youtube video with this great directive :

All you need is listen to the ready event and play the video object !

$scope.$on('youtube.player.ready', function($event, player) { player.playVideo(); });

#14

@aboudard

I need the reverse. Somehow, the iframe autoplays even though I didn’t enable autoplay.

I’m using same brandly directive

#15

Hello ! In my experience with the angular-youtube-embed directive, it doesn’t play until I click on the player or run the playVideo() method.

#16

Yeah, that’s what’s expected. In any case, I added a player.stopVideo() on player loaded event. This makes sure the player is stopped

#17

I have a strange problem on my application.
I’ve created a youtube app by following this tutorial: http://bit.ly/2dXWVAL
Then uploaded it to Google Play. But it’s rejected, because it continues to play in the background when screen locked. But it pauses when I press home button.

I tried to fix it with cordova pause event on scope and ionicplatform ready. But it’s not successful.

Anyone can help me ? I couldn’t fix it.

Thanks.

#18

I’m quite surprised it didn’t work out well for you. Mine pauses on lock and on minimize

I had a brute way to make sure all iframes stopped playing on pause. Here’s a sample directive I created and used. All my youtube iframes have the ‘yt-frames’ class.

// PAUSE any player when app minimized
  function onMinimize() {

    var frames = document.querySelectorAll('iframe.yt-frames');
      if (!frames || !frames.length)  return;
      for (var i = 0 ; i < frames.length; i++) {
        frames[i].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
      }
  }

// 'pause' event called when app is minimized
document.addEventListener("pause", onMinimize, false);


  $scope.$on("$destroy", function () {
    document.removeEventListener("pause", onMinimize, false);
  });
#19

I have tried many code snippets, but playing videos pause 40-60 seconds soon after I’ve locked the screen

$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}

document.addEventListener("pause", onPause, false);
function onPause() {
player.stopVideo();
}
});
#20

Are you getting any errors? And are you testing on device or emulator?

#21

I’m testing on emulator (Samsung Galaxy S6, S5, S4) and on a real device (Samsung Galaxy S4)

#22

I am still having an issue where the youtube video will not play programmatically after the playerReady event.
I am running the example code you provided on an iPhone running iOS 9.3.3

If I don’t use the playVideo() command, but instead tap the video, it plays fine.

When looking at the logs, the playVideo command initiates, and the video status changes from UNSTARTED to BUFFERING. However it never leaves the buffering state, and is compeletely unresponsive to user interaction on the phone. However, during buffering it changes from a mere loading symbol to a frame showing the start of the video.

Does iOS 9 not allow the programmatic start of videos even in a UIWebView? (Is that not what Ionic is housed in?) I have set the config option AllowInlineMediaPlayback to true as well as MediaPlaybackRequiresUserAction explicitly to false.

Does anyone have any experience with this?

#23

Found a solution:
We can’t detect a click in Iframe you better place a image or a button in iframe,In that button or image you can enable autoplay by playmethod & pausemethod.You can hide the button after a click is made by hide(). Hope it helps you!

toggle(){
    this.slides.stopAutoplay();
    if(this.hideButton)
    {
      this.hideButton = false;
    let listaFrames = document.getElementsByTagName("iframe");  
    for(var i=0;i<listaFrames.length;i++)
    {
      let iframe=listaFrames[i].contentWindow
      iframe.postMessage('{"event":"command","func":"'+ 'playVideo'+ '","args":""}', '*');
    }
}