I embed a youtube video in ionic2 app:
Page2.ts:
import {SafeResourceUrl, DomSanitizer} from '#angular/platform-browser';
export class Page2 {
url: SafeResourceUrl;
constructor(public navCtrl: NavController,
public navParams: NavParams,
sanitizer: DomSanitizer) {
this.url = sanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/embed/XHCVWWsQmUs');
}
}
Page2.html:
<iframe height="190" onload="this.width=screen.width" [src]="url" frameborder="0" ></iframe>
And add some preferences for configurations:
config.xml:
<allow-navigation href="*://*.youtube.com/*" />
<allow-navigation href="*youtube*" />
<allow-navigation href="*ytimg*" />
<preference name="AllowInlineMediaPlayback" value="true" />
<preference name="MediaPlaybackRequiresUserAction" value="false" />
It works fine on android device but no sound in iOS. I am getting this error in XCode console:
2016-11-08 10:06:10.648528 app[1066:438304] ERROR Internal navigation
rejected - not set for url='about:blank'
Not sure if it is the issue affect the sound.
How can I resolve this? Could it be the bug from Ionic or Cordova?
I see that this is an older post but thought I'd try to revive it to see if anyone else might have a viable solution.
I have a similar issue with embedded YouTube video in an ionic v1 project. Note that I am using the AngularJS module to embed Youtube videos ng-youtube-embed found here:
https://github.com/ArunMichaelDsouza/ng-youtube-embed
Everything works as expected except for the audio on iOS. If the device is toggled to silent mode (with the hardware silent toggle button) the audio is muted. When the ringer is switched back on (hardware toggle) the audio plays back as expected. In researching this issue I keep coming across the that it is a problem with Cordova. That the audio is treated as a UI sound/sound effect and will not playback when the silent switch is on (the ringer off).
The only solution I have come across is half baked at best and have read some posts noting that their app was rejected by Apple because of the hackish solution (a plugin that forces a background audio sound). Otherwise it may be "That's just the way it is". :(
Related
I am creating a video tutorials app using ionic 3. The videos are rendered in iframes from vimeo. There can be 10-12 iframes on a course page which are all loaded at once after the view is loaded.
There is a strange issue of some videos not loading sometimes when I go to the course page. Issue is only with iphones when tested on emulator and actual device using test flight. Issue does not seem to happen when tested with ionic view app in iphone.
photo of how it looks with some videos not loaded
I have already added
<allow-navigation href="https://*/*" />
<allow-navigation href="http://*/*" />
to the config.xml so that all urls are supported by the iframes in ios.
Any help is appreciated, thanks in advance.
I'm developing an hybrid app with cordova. For testing I use the Phonegap Developer App on mobile. This works great in most cases, but now I have a problem.
It seems that all iframes with external content stays empty within the the Phonegap Developer App on iOS. When I build the app to my iPhone the iframe with its content is displayed.
Is this an issue of the Phonegap Developer App which needs to fixed in order to make the iframe work within the Phonegap Developer app, or can I do something to make it work?
I want to use the iframe for youtube embeds for example.
Cordova version: 6.2.0
Following lines are in my config.xml
<access origin="*" />
<allow-navigation href="*" />
<allow-intent href="*" />
Great! your question is answer of my question that i have been trying to solve for 3 days after work. I have the same problem. I can not display embedded youtube videos on IOS using Iphone developer App. I thought there is a problem with my code or configuration but looks like it was all about app!
My suggestion is don't waste your time. I did it for you :) and couldn't find any solution. let us know if you find solution.
How can I get a YouTube video to play inline in an Ionic/Cordova/PhoneGap app on iPhone? I've tried all the top results on here and Google to no avail. Whether I embed with an iframe, an object, or via the YouTube iframe api, the video always opens in full screen.
There are lots of iOS apps which achieve this. How are they achieving this? And can this somehow be hijacked and implemented into a Cordova app? Via a Cordova plugin, for example?
I finally got this working.
First, insert the YouTube video like so:
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/XL9528Gohe0?autohide=1&playsinline=1&showinfo=0" frameborder="0" allowfullscreen=""></iframe>
Next, close down Xcode and edit config.xml (usually in the root of your project).
Add this line under the other preferences:
<preference name="AllowInlineMediaPlayback" value="true" />
Save it, rebuild the project, open in Xcode and run again. Your YouTube video should now be playing inline. Tested on latest iOS (9.1) on iPhone 6.
As #Zhou Hao added in a comment, you also need
<allow-navigation href="*://*.youtube.com/*" />
Without it, it was working fine in Android, but nothing was displayed in iOS (the content of the iframe was <html><body></body></html>).
After adding it, it worked fine on iOS also.
This is with Cordova iOS 4.2.0.
Use should useplaysinline as player parameter according to the documentation. youtube API
I have a cordova app that was using media plugin for audio playback, but then it got broken with iOS8, because of this bug. I thought I will just use HTML5 audio (concretely audio5.js) as a workaround. Everything works nice in the simulator but when tested on the iPad, there is no sound. There is also no error reported it just looks as the sound is turned off.
For the testing I made cordova app with just plain example from the audio5.js github repository and I also tried with examples from two similar libraries audio.js and sound.js.
The result is the same, examples work in simulator and also from the web on mobile Safari on the device, but on the device inside cordova there is no sound.
I also included this two lines in the config.xml file
<preference name="AllowInlineMediaPlayback" value="true"/>
<preference name="MediaPlaybackRequiresUserAction" value="false"/>
without success.
I'm using cordova cli version: 3.6.3-0.2.13
EDIT:
It seems that iOS update 8.1.2 resolved original problem bug, so I recomend using Media plugin for audio on iOS .
I managed to get sound on the device with WKWebView which is at the moment not yet available in core cordova because there are some bugs. A workaround is a WKWebView plugin that is described by DevGirl here.
Using WKWebView created a problem for audio5.js when playing multiple sounds one after another where next sound is triggered by play "ended" of previous sound. I couldn't fix the issue, so I decided to try soundmanager2.js which worked with out the problem.
I still have a problem with playing sounds which are not inside www directory (sounds are downloaded to the device and are not included with the app), but this is I think another issue not related to the this question.
I’m working on the iOS version of my phonegap-based navigation app. My app tracks the user’s location around a walk route using GPS and alerts the user using audio (navigator.notification.beep) and tactile (navigator.notification.vibrate) feedback when they reach a location at which there’s new instructions for them to follow.
When my app is running in the foreground, both the audible beep and the vibration fire on reaching the geographic location but when the app is paused in the background, either by pressing the power button to turn the screen off or pressing the home button to return to the springboard, only the vibration works - the beep is not audible. I’ve added debug so I can see in the log file that the app is calling navigator.notification.beep() while in the background but the beep sound isn't made. I’ve tested my app on an iPhone 4S running iOS 6.3.1 and iPad 2 running iOS 5.1.1. Obviously the iPad doesn’t vibrate but the beep works while the app is in the foreground but not when in the background.
My app is using Phonegap 2.5.0
I’m using latest Xcode v4.6.2 with latest SDK for iOS 6.3.1
I’m using a beep.wav in the /www root
My app’s .plist sets “UIBackgroundModes” of “location” and “audio”
My config.xml contains the settings:
<plugin name="Notification" value="CDVNotification" />
<plugin name="Media" value="CDVSound" />
<preference name="MediaPlaybackRequiresUserAction" value="false" />
<preference name="AllowInlineMediaPlayback" value="true" />
Any suggestions how to fix this would be most appreciated :-)
In case anyone else in interested, here’s how I solved this:
I updated the Local Notifications phonegap plugin for use with Cordova 2.x. I used the plugin to provide the background beep and phonegap for the foreground beep by placing the same sound for phonegap in www/ as beep.wav as for the local notification in the iOS project Resources as beep.caf.
function doBeep(){
cordova.require('cordova/plugin/localnotification').add(
function(){
console.log("Successfully added local notification");
},
function(){
console.error("Error adding local notification");
},{
date: new Date(new Date().getTime()),
repeat:'',
message: '', // No message so just beep
hasAction: true,
badge: 0,
id: '1',
background:'background',
foreground:'running',
sound: 'beep.caf'
}
);
}
function running(){
console.log("Running in the foreground so use a phonegap notification");
navigator.notification.beep();
}
function background(){
console.log("Running in the background so an iOS local notification will be used");
}