I am trying to build an HTML5 soundboard with Phonegap; I want users to tap on an image and hear a short audio clip. I have it working in the browser (Chrome and Safari), but it's not working in Xcode.
Here is a link to a working example:
http://jsfiddle.net/lamike/qHGqh/
Screencast:
http://screencast.com/t/TbXCilji
Thanks for any input!
Have you made sure that any external URLs in your app are listed in the WhiteList? I tried a quick cut and paste project with the code from the JSFiddle and I was able to click Obama and hear the beginning of the podcast.
See the PhoneGap for iOS FAQ: http://wiki.phonegap.com/w/page/41631150/PhoneGap%20for%20iOS%20FAQ
Q. Links to and imported files from external hosts don't load?
A. The latest code has the new white-list feature. If you are referencing external hosts, you will have to add the host in PhoneGap.plist under the "ExternalHosts" key. Wildcards are ok. So if you are connecting to "http://phonegap.com", you have to add "phonegap.com" to the list (or use the wildcard "*.phonegap.com" which will match subdomains as well).
Related
I am a noob with everything related to coding, except for some knowledge of the linux command line. Anyway, I have this idea for a project. I need a website with an image that updates every few hours or so. I have a folder in google drive, and every few hours a new image is uploaded. These times are not regular, but as long as the website gets the new photo within an hour-2hours, it will be fine. I was thinking of making an alias folder that links to the latest image in a folder (like how apple does it with time machine backups) if that makes sense. Then I would copy the link on google drive (of the alias folder) and put that into wordpress. It would pull that link, which would go to the latest image in a folder. I have a feeling that this would not work out, however. Basically, I just want an automated updater to pull the latest image from a google drive folder and publish it to the website. If it needs to be local, I could use the backup and sync for drive and the google drive folder would be synced to my local machine.
Another thing I was thinking of was a automatic slideshow maker. I would use some kind of script in google to delete all files in a folder except for the latest one. Then I would use the automatic slideshow maker to make a slideshow based on data in the particular google drive folder, which would be the latest photo.
Again, these are just some ideas that I have had, and they are both likely not going to work.
I have a self hosted web server (docker) and could put a wordpress instance on that, or I could use an online website builder like weebly or wix or even google sites. It needs to be free because this is for a community service project and I do not want to have to constantly fundraise. However, if my only option requires payment, I am open to that.
Does anybody have a solution for this?
Thanks!
There are several ways to achieve what you desire.
One approach:
I would suggest naming the image that you put in drive with the same filename. (renaming the old ones, as each new image is uploaded)
Google Apps script makes it easy (and free) to deploy a Web App, and using it gives you the benefit of using it's Drive Service among others.
Use a time-driven trigger to execute a function that renames your images so that the most recently uploaded one has the name of the image your website is requesting.
Alright, I have found an awesome solution! First, I setup a google account and made a folder in google drive. Then, I downloaded an app called DriveSync. I used the app Automate (by llamalab) to take photos (you can program it however you want it to trigger the photo). The trigger happens, then it deletes a file called latest.jpg in the Automate Image folder (on the android phone). Then it takes a photo with an image name of latest.jpg. And all of this is synced to the remote Google Drive Folder thanks to DriveSync. So now we have a synced google drive folder. Then, I setup a Wordpress Instance. Get the Add-On called Image and video gallery from Google Drive here https://wordpress.org/plugins/skaut-google-drive-gallery/. Now, follow the steps to link up your google drive folder to it, and configure your website to display this addon on your page of choice. It will pull the only image in the folder we configured earlier, and it will display it on the website! Plus it auto updates. Also, you can configure the image size which is helpful as this was probably meant to display more than one photo, but with only one photo there is a lot of empty space.
Hope you found this helpful!
So I've read other posts and the supposed fixes for IE8 but none have seemed to work. The main player on the MediaElementjs.com site doesn't even work in IE8.
Can anyone point me to a site that they know uses mediaelement.js successfully in IE8?
The plan being to view source and repeat what they've done.
Thanks!
My site seems to work in IE8, here is a page with a video: http://www.theguitarlesson.com/guitar-lessons/white-christmas-guitar-lesson-bing-crosby/
I had to set enablePluginSmoothing to true as describe here, since the Flash playback quality was baaaaad out of the box, but didn't do anything else. That I found here: Video quality issues with MediaElement.JS and Flash
I found that I had to put the
<script>$('audio').mediaelementplayer();</script>
last in the body element for it to work in IE8 and other old IE versions. I'd put it in the head, since the instructions say the link to the script has to be in the head if you want to support old versions of IE so I assumed the call would have to go there too.
If you've copied the object tags from the full video example (Option B on the site) then IE will load the Flash player but won't add the mediaelement.js markup that's needed to load the media.
The best example to work from for audio is the demo/mediaelementplayer-audio.html page in the zipped download in the latest version (you'll need to download the media as well, not sure why that's separate but it's here: https://github.com/johndyer/mediaelement-files/ ). Copy the pieces of it into your page, in the same places, then replace with your own file paths. If that doesn't work, then the problem is likely with your MIME type or CSS visibility properties.
Issue calls after $(document).ready, or when media element has loaded.
I'm starting my first PhoneGap project and am developing using Visual Studio and Windows Phone 7, although I intend on ultimately deploying to iOS and Symbian as well.
However, I'm stuck at Step 1. I have added an image to the www/images folder, and put the following code:
<img src="images/login-btn.png" width="103" height="42" style="margin-left:90px;" />
And I get:
It works fine when I preview it in IE9, but I don't have a Mac to test it on iOS yet.
It's worth noting that the JS files and CSS have loaded fine, it's just any image (whether referenced in CSS or an <img> tag) always comes up broken.
My guess would be the Build Action of your image file is incorrect.
According to http://wiki.phonegap.com/w/page/48672055/Getting%20Started%20with%20PhoneGap%20Windows%20Phone%207#4Reviewtheprojectstructure section 4. You should be setting the Build Action of your images etc to Content which simply copies them into the output project when it is built. They are probably currently set to Resource or None.
To change the Build Action right click a file and choose properties to go to the properties window if you do not already have it open. It is probably then the first property. Just click and choose the correct one.
I'm posting this to questions that I found while trying to find my answer to the same problem. The JS framework I use adds a url query to each image when in a debugging mode (in order to force browsers to reload image, instead of using cached). So, my image "image/background.jpg" would be accessed as "image/background.jpg?d=34342233". But, when running on PhoneGAP for Windows Phone, it won't recognize the image, and thus it shows up as broken. So, I had to turn off debugging for the framework I use, and suddenly the images showed up (still, don't forget to set the Build Action to "Content" as mentioned earlier).
I'm trying to create an iPad/iPhone-app that displays an iFrame that links to an external site. (It's doesn't have to be in the App Store).
The problem is that when I load the app, it's takes me to Safari.
I know there was a setting in an earlier version of XCode, where you could specify which external hosts was allowed in the app. And that worked!
I can't seem to find the setting in 4.1...
Anybody know where I can locate it?
Cheers!
Changes to PhoneGap.plist or Cordova.plist
Change/add the following values in PhoneGap.plist or Cordova.plist file of your app.
MediaPlaybackRequiresUserAction: NO
AllowInlineMediaPlayback: YES
OpenAllWhitelistURLsInWebView: YES
and set ExternalHosts list as you require
here i do for showing gopoglemap in app
ExternalHosts
*.google.com
*.gstatic.com
Phonegap reads a setting called 'ExternalHosts' - this one is used to whitelist allowed external domains.
Open phonegap.plist - the key should be there, if not, simply add it.
We have run numerous tests now and it has now come down to either a DNN-SWFObject loading multiple swf files on a page or Firefox bug.
Here's the outcome we need:
Two swf files on one page:
Header.swf: which holds the nav and some bling animation.
Map.swf: which has different provinces of the country highlighted on rollover. The active province is highlighted by reading the URL via Javascript and then loaded into the Map.swf via FlashVars.
In all of our other tests in other browsers, the scenario works very well but in Firefox 3.5.3 The swf files refuse to show.
We have stripped this test down to the bare minimum, one html page scenario and embedding it the same way using SWFObject 2.2 and this works in Firefox. When it is uploaded in DNN, the swf files refuse to show.
Is there anything anyone can think of?
Many thanks,
James
My first thought would be the way dnn renames element ids - and are you using client ids
If you could post some code it might help to look at it or a url to look at