How can I autoplay youtube video in the app?

ionic-v1
1

I have created app that uses iframe to load youtube video. The video shows up but it’s not autoplaying despite the autoplay=1 parameter being present in the iframe.

<iframe id="player" 
  		  type="text/html" 
  		  width="640" height="390"
  		  src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&autoplay=1&origin=http://example.com"
  		  frameborder="0">
  </iframe>

Can anybody tell me how to autoplay the video?

2

Your iframe is properly set for autoplay => “[…]&autoplay=1[…]”.
Works in a sandboxed html page.

Are you on Android? Your application needs to request Internet permissions.

extract from the android manifest:

<uses-permission android:name="android.permission.INTERNET" />

if it’s for iOS, you should also check if your app has the proper permissions to use the phone’s network / wifi.

Hope it helps.

3

Autoplay on HTML5 video is generally disabled on mobile devices to prevent video from eating up the user’s data plan.

Source (iOS, but in my experience Android works the same way): https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

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

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?