I created xcode universal project, I am trying to load HTML5 page in UIWebView the
problem is i cant see any control to play movie, and i am getting blank screen on the video
place, in ipad and iphone simulator,
my .html file
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- Change this if you want to allow scaling -->
<meta name="viewport"
content="width=default-width; user-scalable=no" />
<meta http-equiv="Content-type"
content="text/html; charset=utf-8">
<title>Web App Demo</title>
</head>
<body>
<h1>Video Test</h1>
<p>This is a video test.</p>
<video width="320" height="240" controls= "controls">
<source src="video.ogv" type="video/ogg" />
<source src="video.mp4" type="video/mp4"/>
browser not supports the video
</video>
</br> <br/>
<h1>This is Audio </h1>
<b>Testing Audio </b>
<audio controls="controls">
<source src="audio.ogg" type="audio/ogg" />
<source src="audio.mp3" type="audio/mpeg"/>
browser not supporting audio
</audio>
</body>
</html>
Any help why its not playing in simulator.
Thanks in advance.
I have seen this before when there are url issues -- like capitalization... The simulator is more relaxed than the device... Check the exact file names...
Sounds like it might be a pathing issue. You are using relative pathnames for the video, so they need to be in the place the HTML expects them to be in order to find them. You'll need to either use absolute pathnames to the files in your bundle OR make sure that the base href is defined to point to the appropriate folder holding those images, either explicitly in the HTML or by specifying the correct baseref in the loadHTMLString:baseURL: call.
One way to quickly test whether this is a problem would be to put a .png next to the video files and reference it in the HTML, too. If the .png doesn't show up, it's not a video problem so much as a problem finding assets.
i read that the mp4 file should be placed before the ogv file for the iPad to play it.
I am playing an m4v file in my uiwebview, but the translucent 'play' button does not appear in my simulator. It does work on the device itself, though....
<video id="VideoDiv" preload src="http://www.movietime.com/movie.m4v" controls width="480px" height="270" poster="poster.png"></video>
Related
Here is iframe code. This is working properly in all browsers but not in iPhone 5. I am using custom play button on YouTube player screen.
I have already tried class="youtube-player" type="text/html" tricks.
<!DOCTYPE html>
<html>
<head>
<title>YouTube</title>
</head>
<body >
<iframe width="940" height="529" frameborder="0" id="player" allowfullscreen="1" title="YouTube video player" src="https://www.youtube.com/embed/yS2PQwPqsCs?controls=0&showinfo=0&hd=0&enablejsapi=1"></iframe>
</body>
</html>
If you are trying in simulator, this wont work. You can play YouTube videos in device only.
Having read how to add a custom home screen icon for my web app, I have spent days trying to make it work and whatever I do, the Add to Home Screen process results in an icon based on the screen shot of the current web page.
I have tried using the default file names alone
I have tried using the <link rel="" href=""> definitions and the icons
I have tried putting the icons in the root directory and one level down
I have tried 57x57, 72x72 and 114x114 sized icons, with and without the sizes definition
I have tried precomposed and normal with and without the corresponding change to the rel name
But whatever I do the Add to Home Screen process on my iPhone 4 running iOS 6.3 ignores whatever icon I define and gives me a screen shot based icon. I am tearing my hair out.
How can I find what is going wrong? How do I debug this process to find what is wrong? I have mobile safari linked to safari on the desktop to see what is going on but I am none the wiser.
You might be missing some meta definitions. For example this works in our web apps. Check that the png you're using is valid image.
<!DOCTYPE html>
<head>
<link rel="apple-touch-icon" href="/img/appicon-57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/img/appicon-72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/img/appicon-114.png" />
<link rel="shortcut icon" href="favicon.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>
<body>
...
My iOS Application contains some .html files, .jpg files in project itself. And show them via webView.
My image files are high-resolution but when it added to html files with tag and check them with iOS simulator zoom in... images became blurred so that I can't read text on them.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" charset="utf-8" content="initial-scale=1.0; maximum-scale=20.0; user-scalable=yes">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" type="text/css" href="m.ritz.css"/>
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
<script src="scrollview.js"></script>
</head>
<body>
<img src="tong.png" width="500"/>
</body>
</html>
My code has nothing special... But I can't find the reason... help me~
You appear to be setting a specific width (resolution) for the image within the HTML. If the stored image has a greater resolution than that requested, the browser will down-sample the image to the requested resolution. This process can introduce image artefacts, blurring etc.
Try creating an image file which is equal in resolution to that which you wish to display. This should remove the need for the browser to reps ample the image leaving you with a nice sharp image.
Hi Im developing a sencha-touch-2 app which will be embedded on iPhone UIWebview. The UIWebview size is 280x420 which is centered on the iPhone screen. Everything works perfect on sencha development but when I try to build the sencha into production, the size of the sencha page streched or not fit to the size of the UIWebview. Please see code below
SENCHA
Adding meta tag to the body of index.html
<body>
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<div id="appLoadingIndicator">
<div></div>
<div></div>
<div></div>
</div>
</body>
This code works on development but when change to production the page change. What should I do to make it on the production build, since production is very fast on loading.
Try this, just add this script in your html body tag.
<script type="text/javascript">
setTimeout(function(){
var meta = document.createElement('meta');
meta.setAttribute("name","viewport");
meta.setAttribute("content","width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;");
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(meta);
},1000);
</script>
Sencha touch 2.0 will overwrite your script with it's built in meta tag. So, what happen is your meta tag will be loaded but will be replaced by it's own meta tag.
When I add my beep-23.mp3 file to the cache manifest, the sound effect no longer works on or offline. Is this a bug, or am I doing something wrong?
The audio is within an html file as:
function playBEEP() { if (navigator.platform == "iPad" || navigator.platform == "iPhone" || navigator.platform == "iPod") { Beep.play(); } }
if (navigator.platform == "iPad" || navigator.platform == "iPhone" || navigator.platform == "iPod") {
var Beep = document.createElement('audio');
Beep.setAttribute('src', 'beep-23.mp3');
}
Accessed via:
$("#mybutton,#anotherbutton").each(function() {
$(this).bind("touchstart",function(e){
playBEEP();
});
});
<html manifest='index.manifest'> makes the audio stop working when beep-23.mp3 is listed...
UPDATE: Could Web Storage be used instead of the cache manifest to store the audio??
UPDATE for iOS 6:
This is all fixed in iOS 6. You can cache an audio file and play it via javascript without user input.
shaun5 Nov 7 '12 at 0:58
Even though it should work and there are no specifications (W3C, Apple) which say it shouldn't, I tested some scenarios and it seems like Safari on iOS is just refusing to cache the sound files.
Safari is loading the audio file (but not the index.html) every time I reload the page, so caching is apparently not working correct regardlessly of file size.
After some research: It looks like it's not possible to cache audio files. So you may file a bug at Apples bugtracker.
Here's my code to prove my results:
index.html:
<!DOCTYPE HTML>
<html lang="en-US" manifest="audio.appcache">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>Cached audio</title>
</head>
<body>
<h1>Cached audio</h1>
<audio controls autobuffer>
<source src="sample.mp3" type="audio/mpeg" />
</audio>
</body>
</html>
audio.appcache:
CACHE MANIFEST
# 2012-02-23:v1
# explicitly cached
CACHE:
index.html
sample.mp3
.htaccess:
AddType text/cache-manifest .appcache
AddType audio/mpeg .mp3
EDIT
I also tried using data URIs but, that Safari keeps refusing the audio data. So I think it's not possible to cache audio …
<?php
function data_uri( $file ) {
$contents = file_get_contents( $file );
$base64 = base64_encode( $contents );
return ( 'data:audio/mpeg;base64,'.$base64 );
}
?>
...
<audio controls autobuffer>
<source src="<?php echo data_uri('sample.mp3'); ?>" type="audio/mpeg" />
</audio>
...
EDIT 2
Great idea, but it looks like it's not working … Safari for OS X -> ok; Safari for iOS -> still the same problem as we had before.
<?php
function base_64_string( $file ) {
$contents = file_get_contents( $file );
return base64_encode( $contents );
}
?>
...
<audio controls autobuffer>
<source id="sound-src" src="sample.mp3" type="audio/mpeg" />
</audio>
...
<script>
(function(){
var sound;
if ( localStorage.getItem('cachedSound')) {
sound = localStorage.getItem('cachedSound');
}
else {
sound = "<?php echo base_64_string('sample.mp3'); ?>";
localStorage.setItem('cachedSound',sound);
}
document.getElementById("sound-src").src='data:audio/mpeg;base64,' + sound;
})();
</script>
If you haven't already you have to make sure that URL paths are absolute or relative to the .manifest and not the actual webpage.
There is also a limit to the size of the actual component that you are trying to cache currently at 4MB.
The total cache limit is 5MB.
I'm also pretty sure you can not cache audio and video files.
Apple do not support playing audio via safari, this is intentional to prevent people using online domains to store you music without paying for them and using you iPod/iPhone to play them. It's apples way of trying to make you pay for music. Sorry guys.