How to embed Youtube video in Cordova Android app

问题:

I am new to Cordova App development.

I have a Youtube URL and I want to embed the video in Cordova app. I have tried making it with YouTube Api(JS Library) and with iframe also. What do I have to do to make the video load on the Android app?

回答1:

Using iframe is the preferred and suggested way to embed youtube videos, so this is how you need to proceed. The getting started code from the YoutTube iframe API reference loads and works in both iOS (tested on iOS 7) and Android (tested on Android 4.3).

回答2:

For me, the solution was editing config.xml file adding the following lines:

<preference name="AllowInlineMediaPlayback" value="true" />
<preference name="MediaPlaybackRequiresUserAction" value="false" />   
<allow-navigation href="*youtube*" />
<allow-navigation href="*ytimg*" />
<allow-navigation href="*youtube-nocookie*" />

回答3:

Unless you are using <access origin="*" /> (not recommended) you will need to allow the following domains with your config.xml to embed youtube videos in an cordova android app:

<access origin="https://*.youtube-nocookie.com" />
<access origin="https://*.youtube.com" />
<access origin="https://*.ytimg.com" />
<access origin="https://*.gstatic.com" />
<access origin="https://*.googlevideo.com" />
<access origin="https://*.google.com" />

This is for use with the privacy-enhanced embed mode. The youtube-nocookie domain presumably is not needed for a standard embed.

If you use a content security meta tag you will also need to allow those domains in your csp.

回答4:

Adding the parameter feature=player_embedded to the iframe url worked fine for me:

<iframe width="640" height="360" src="http://www.youtube.com/embed/*********?feature=player_embedded" frameborder="0" allowfullscreen></iframe>