** EDIT **
This is the code I'm using to detect whether it's a mobile device:
<!-- Javascript inclusion -->
<script type="text/javascript">
var isCE = navigator.appVersion.indexOf("Windows CE")>0;if (isCE){ window.location.href="http://m.mobileversionsample.com/";}
</script>
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
jQuery.preloadImages = function()
{
for(var i = 0; i<arguments.length; i++)
{
jQuery("<img>").attr("src", arguments[i]);
}
}
</script>
Went to the Apple store and saw that my mobile site picks up on an iPad as well... Does anyone know how to make an exception for iPads, so that they load the normal site and not the mobile version?
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />
About supporting both landscape and portrait mode: http://www.cloudfour.com/ipad-css/
Detecting iPad using Javascript: http://davidwalsh.name/detect-ipad
var isiPad = navigator.userAgent.match(/iPad/i) != null;
if(isiPad) { window.location.href="http://m.mobileversionsample.com/";}
That would depend a lot on the code you're using to detect mobile browsers. You're presumably using the User-Agent string to detect something like "MobileSafari" - just add a conditional that skips the redirect if "MobileSafari" AND "iPad" are in the User-Agent string.
Related
I try to display a 360-video in a a-sphere using the a-frame framework.
My code is as follows:
<html>
<head>
<script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
<script src="https://rawgit.com/donmccurdy/aframe-extras/v2.1.1/dist/aframe-extras.loaders.min.js"></script>
<title></title>
</head>
<body>
<a-scene>
<a-assets
<video id="antarctica" playsinline autoplay loop="true" src="130.mp4">
</a-assets>
<a-videosphere src="#antarctica"></a-videosphere>
<!-- Using the asset management system. -->
<a-camera position = "0 0 0">
<a-cursor color=#FFFFFF></a-cursor>
</a-camera>
</a-scene>
<script>
</script>
</body>
</html>
The video is not displaying in the iphone browser, and as you can see i tried using the playsinline attribute. Can someone point me to the right direction?(It is working on desktop on android)
EDIT: I bookmarked the page to my home screen
Unfortunately, video does not autoplay on mobile browsers yet.
For some projects, I've solved this by hiding the a-scene and displaying a video element on the page that the user has to press to start the scene. After the user has pressed the play button, the video element is moved into a-assets element, the a-scene is made visible, and start the video with javascript. At this point, the video will be displayed on the videosphere.
Here's an example...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Video example</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="./bower_components/aframe/dist/aframe.js"></script>
<script>
window.addEventListener("load", function() {
document.querySelector("#video").addEventListener("play", function() {
var video = document.querySelector("video");
var assets = document.querySelector("a-assets");
var videosphere = document.querySelector("a-videosphere");
var scene = document.querySelector("a-scene");
assets.appendChild(video);
videosphere.setAttribute("src", "#video");
scene.removeAttribute("style");
video.play();
})
});
</script>
</head>
<body>
<video id="video" controls="true" autobuffer height="100%" width="100%" webkit-playsinline src="./media/video.mp4" type="video/mp4"></video>
<a-scene>
<a-assets></a-assets>
<a-videosphere></a-videosphere>
</a-scene>
</body>
</html>
Edit: Just noticed your comment about iPhone. Have you also added a bookmark to your home screen?
I am attempting to get a very simple HTML/JavaScript application working for SDK 5.0b, the instructions for which are here...
http://samsungtvdev.blogspot.com/2013/04/smamsung-smart-tv-how-to-write-hello.html
I can launch VirtualBox 4.2.16 and see my application in the menu for the emulator. However, when I launch it, the background is black, and I don't see my application. I also see a bunch of warnings in the emulator about 'RegisterType()' and other functions not being available.
I tried posting this on the Samsung SDK forum, but it's pretty dead over there. I also tried the suggestion here, but copying the application manually also doesn't seem to work. Anyone have any ideas on how I can get this working?
Edit: Here is the HTML code. This isn't more than a "hello world" example.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HelloWorld</title>
<!-- TODO : Common API -->
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/Widget.js"> </script>
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"> </script>
<!-- TODO : Javascript code -->
<script language="javascript" type="text/javascript" src="app/javascript/Main.js"></script>
<!-- TODO : Style sheets code -->
<link rel="stylesheet" href="app/stylesheets/Main.css" type="text/css">
<!-- TODO: Plugins -->
</head>
<body onload="Main.onLoad();" onunload="Main.onUnload();">
<!-- Dummy anchor as focus for key events -->
<!-- TODO: your code here -->
<div id="outputDiv"></div>
</body>
</html>
This is the JavaScript code.
var widgetAPI = new Common.API.Widget();
var tvKey = new Common.API.TVKeyValue();
var Main =
{
};
Main.onLoad = function()
{
// Enable key event processing
this.enableKeys();
widgetAPI.sendReadyEvent();
alert("App loaded!");
};
Main.onUnload = function()
{
};
Main.enableKeys = function()
{
document.getElementById("anchor").focus();
};
Main.keyDown = function()
{
var keyCode = event.keyCode;
alert("Key pressed: " + keyCode);
switch(keyCode)
{
case tvKey.KEY_RETURN:
case tvKey.KEY_PANEL_RETURN:
alert("RETURN");
widgetAPI.sendReturnEvent();
break;
case tvKey.KEY_LEFT:
alert("LEFT");
break;
case tvKey.KEY_RIGHT:
alert("RIGHT");
break;
case tvKey.KEY_UP:
alert("UP");
break;
case tvKey.KEY_DOWN:
alert("DOWN");
break;
case tvKey.KEY_ENTER:
case tvKey.KEY_PANEL_ENTER:
alert("ENTER");
document.getElementById("outputDiv").innerHTML += "<h1>Hello, World!</h1><br/>";
break;
default:
alert("Unhandled key");
break;
}
};
Here are the logs:
http://pastebin.com/mZULDGc6
1.) Look for misspellings, typos and missing commas. Samsung Smart TV SDK seems to be very strict with that and since you have no proper console, you don't get any errors if you forget a comma or something
2.) check your HTML/CSS
Maybe you should post your code so I can have a closer look.
EDIT: You forgot to add the scripts in your HTML head. You have to add every script file that you use in your project, such as Main.js. That would be
<script language="javascript" type="text/javascript" src="app/javascript/Main.js"></script>
and also all Samsung SmartTV API script files that are required.
First what i see, you forgot "anchor" tag in html.
Not included external JS files in html page, and standard smart tv sdk files:
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/Widget.js"> </script>
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"> </script>
Then add
<body onload="Main.onLoad();" onunload="Main.onUnload();">
Are you sure that images loaded? Print it in console.
Why div block position inside canvas, move it outside. I think that code started with js error, so you don't see anything. Be more careful.
I had same issue and fixed it by adding background: red; for body tag in css.
I am working on a phonegap app for IPhone using cordova. I am trying to implement a scenario where I need to open the IPhone native calendar when the user clicks on a particular button to add an event. I have followed this link to accomplish my task, i.e, Calendar Plugin for IPhone.
I did the following steps as they specified:
Added CalendarPlugin.m,CalendarPlugin.h in the Plugins folder
Added calendar.js file and add refrence in my .html file.
Added dependencies EventKit framework and the EventKitUI framework
Added the plugin with the key/pair value of calendarPlugin in
cordova.plist file.
And my HTML file would look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi" />
<title>My Calendar Plugin</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script src="assets/Scripts/jquery-1.9.1.min.js"></script>
<script src="assets/Scripts/cordova-2.3.0.js"></script>
<script type="text/javascript" src="assets/Scripts/calendar.js"></script>
<script type="text/javascript" src="assets/Scripts/index.js"></script>
<script type="text/javascript">
function addEvent()
{
var cal = new calendarPlugin();
console.log("creating event");
var title= "My Sample Appt";
var location = "Los Angeles";
var notes = "This is a sample note";
var startDate = "2012-04-16 09:30:00";
var endDate = "2012-04-16 12:30:00";
var errCall = function(theerror) {
console.log("Error occurred - " + theerror);
}
var succCall = function(themessage) {
console.log("Success - " + themessage);
}
cal.createEvent(title,location,notes,startDate,endDate, succCall, errCall);
return false;
}
</script>
</head>
<body>
<input type="button" id="btnAddEvent" onclick="return addEvent();"/>
</body>
</html>
But I am unable to open the native calendar and add an event at a specified date. I have reviewed several StackOverflow questions and Google Groups discussions, but they have not worked for me. I have changed my calendarPlugin.m and calendarPlugin.h files according to IPhone 6 updates specified in the issues section of github. Please guide me if I went a wrong direction in implementing calendarplugin in phonegap.
Try
cal = window.plugins.calendarPlugin
instead of,
cal = new calendarPlugin()
See if that helps.
I have a number of very small pages which basically loads a video for use on mobile browsers. In the latest iOS (5.1.1) the video player loads, but then just spins. The video can be played by clicking on the video, but since it looks like it's still loading, people may not do that. Works everywhere else.
I'm using the youtube api code
This is a test version of the page.
http://bit.ly/S2KuN1
Here's the code:
<!DOCTYPE HTML>
<html>
<head>
<title>Celebrity's Caribbean Shore Excursions</title>
<link href="http://www.celebritycruises.com/css/min/global.min.css" rel="stylesheet">
<link href="http://media.celebritycruises.com/celebrity/content/en_US/css/m_video.css" rel="stylesheet">
<script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
<script type="text/javascript">
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
videoId: 'PH-m591p4xg',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
</script>
<script type="text/javascript" src="m_video.js"></script>
</head>
<body id="video_page">
<div class="logo"><img src="http://media.celebritycruises.com/celebrity/content/en_US/images/cel_misc/logo.jpg" alt="Celebrity Mobile" width="259" height="55" border="0"></div>
<div id="player"></div>
<div class="visit">
<p>Now visit Celebrity Cruises' official mobile website.</p>
<p><a class="ccButton large" target="_self" href="http://m.celebritycruises.com/m/home.do"> <span class="text">Explore</span> <span class="pointer"> </span> </a></p>
</div>
</body>
</html>
And here's the js for the page
// JavaScript Document
// autoplay video
function onPlayerReady(event) {
event.target.pauseVideo();
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
window.location = "http://m.celebritycruises.com/m/home.do";
}
}
//style Blackberry
window.onload = function() {
var ua = navigator.userAgent;
if (ua.indexOf("BlackBerry") != -1 ) {
document.getElementById("video_page").className = "bb";
}
};
Okay, I figured out how to solve it.
I changed
event.target.pauseVideo();
to
event.target.stopVideo();
I don't know what the issue is, but iOS 5.1.1 never seems to finish autoloading. Using the stopVideo() command from the YouTube api stops the process and the play button appears. Once clicked, it loads normally.
I've made a simple iPhone webapp and I've set a startup screen and icon and everything. Here's the link to it.
The problem I'm having is that when I save the webapp to the homescreen, a white screen (or else a screenshot of the page I have opened on Safari) shows up first for a few seconds before the startup screen.
I've added other iPhone webapps like JQtouch to my homescreen and opened them and the startup screen shows up straight away.
I'm wondering if I have something wrong in the html code???
Try changing <meta name="viewport" content="width=300px; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> to <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /> so the width=device-width and using commas (,) instead of semi-colons (;) except at the end of the line.
Do you have this in your <head>:
<link rel="apple-touch-startup-image" href="myImage.jpg">
See iOS Web App Configuration - mobile-meta-links.html for exact specs:
<!-- startup image for web apps - iPad - landscape (748x1024)
Note: iPad landscape startup image has to be exactly 748x1024 pixels (portrait, with contents rotated).-->
<link rel="apple-touch-startup-image" href="img/ipad-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
<!-- startup image for web apps - iPad - portrait (768x1004) -->
<link rel="apple-touch-startup-image" href="img/ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />
<!-- startup image for web apps (320x460) -->
<link rel="apple-touch-startup-image" href="img/iphone.png" media="screen and (max-device-width: 320px)" />
Also read that the startup image will only show up if you use the HTML5-doctype
<!DOCTYPE html>
From Icons and splash screens for iOS web apps - retina displays also welcome:
To insert a high-resolution splash screen into the <head>, but only
for iOS devices with a retina display running iOS5 or later:
function hasRetinaDisplay() {
return (window.devicePixelRatio >= 2);
}
function isAppleDevice() {
return (/iphone|ipod|ipad/gi).test(navigator.platform);
}
function iOSNewerThan(majorVersion) {
if(isAppleDevice()) {
// Check the version
var pattern = /iPhone OS (.*) like Mac/;
var result = navigator.userAgent.match(pattern); // Returns "iPhone OS X_Y like Mac, X_Y"
var version = result[1].split(''); // Returns X, Y
var release = version[0];
return (release >= majorVersion);
}
return false;
}
// When we're ready to go...
$(document).ready(function() {
if(hasRetinaDisplay() && iOSNewerThan(5)) {
var highResSplash = '<link rel="apple-touch-startup-image" href="/images/splash-iphone4.png" />';
$('head').append(highResSplash);
}
});