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.
Related
controller.js
var app = angular.module('startervideo', ['ionic','ngCordova'])
app.controller('VideoCtrl', function($scope,$cordovaCapture) {
$scope.data = {
videoPath: ""
};
$scope.captureVideo = $scope.captureVideo = function() {
var options = {duration: 15 };
$cordovaCapture.captureVideo(options).then(
function(videoData) {
// Success! Video data is here
$scope.data.videoPath = "file:/" + videoData[0].fullPath;
console.log(videoData);
}, function(err) {
// An error occurred. Show a message to the user
console.log(err);
});
}
});
app.js
var app = angular.module('starter', ['ionic','ngCordova','startervideo'])
app.directive("cordovaVideo", function () {
return {
restrict: 'AEC',
scope: {src: '='},
link: function(scope, element, attrs) {
scope.$watch('src', function(newVal, oldVal) {
if (scope.src != "") {
// Create a div object
var div = document.createElement('div');
div.innerHTML = "<video id=\"myCordovaVideo\"controls>"+
"<source src=\"" + scope.src + "\" type=\"video/quicktime\">"+ "</video>";
// Delete previous video if exists
var previousDiv = document.getElementById('myCordovaVideo');
if (previousDiv)
previousDiv.remove();
// Append new <video> tag into the DOM
element.append(div);
}
}); }
} });
#myCordovaVideo {
background: red;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
</head>
<body ng-app="starter" ng-controller="VideoCtrl">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">VideoPro</h1>
</ion-header-bar>
<ion-content>
<button class="button button-calm button-full"
ng-click="captureVideo()">Capture Video</button>
<cordova-video src="data.videoPath"></cordova-video>
</ion-content>
</ion-pane>
</body>
</html>
Hi everyone I am new in ionic1 framework been trying to develop an application that can capture video display them on the UI and ultimately store in a remote serve, so far the code that I have can capture video but it does not display it on the UI.The example that I am following comes from ionic cookbook I am in desperate need of help here is the code that I have
I've created a similar Ionic app that captures video and uploads it to a remote server. You may find it useful
https://github.com/aliasav/ionic-video
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 have tried so many URL variations for Flickr and all attempts have failed to load my image gallery into my own webpage.
I am pretty sure its the URL. If I replace the URL with:
"api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"
all works fine to load public photos from Flickr, but to load my own album (URL below), it won't work.
Yes I have a valid API from Flickr. I also checked the script syntax in "jsbin.com" and all of that is good.
Can anyone help resolve this?
Here is the jQuery script:
(function() {
var flickerUrl = "https://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=<removed by edit>&user_id=135938131#N02&format=json&jsoncallback=?";
$.getJSON(flickerUrl)
.done(function(data) {
$.each(data.items, function(i, item) {
var image = $("<img>")
.attr("src", item.media.m)
.attr("title", item.title);
$("<a>")
.attr("href", item.link)
.attr("target", "_blank")
.html(image)
.appendTo("#images");
if ( i === 8 ) {
return false;
}
});
});
})
();
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Flickr Image Gallery</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<h1>Natural Scenery</h1>
<br>
<div id="images"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="./js/flickrgallery.js"></script>
</body>
</html>
I've built a Cordova 2.0 App for iOS with jQuery Mobile 1.2. Framework inside. I've successfully installed the Childbrowser plugin (in this version and with this guide. Thanks for the help from these nice guys at this point,
Now I can call the Childbrowser directly with an onclick event with this javascript in the head:
<script type="text/javascript">
app.initialize();
function launchCB() {
if(window.plugins.childBrowser != null) {
window.plugins.childBrowser.onLocationChange = function(loc){};
window.plugins.childBrowser.onClose = function(){};
window.plugins.childBrowser.onOpenExternal = function(){};
window.plugins.childBrowser.showWebPage('http://www.google.de');
} else {
alert('not found');
}
}
</script>
OR directly with for example
Google
Now I want to open all links with the attribute target="_blank". Therefore I've found this thread and picked up the solution by Charlie Gorichanaz.
But when I start the application in the iPhone simulator, all I get is the sandclock or rather the spinning wheel of death of jQuery mobile.
I'm happy for every helpful advice, I never coded before this app. Here's my index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name = "format-detection" content = "telephone=no"/>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width;" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Cordova</title>
<script type="text/javascript" src="cordova-2.0.0.js"></script>
<script type="text/javascript" src="ChildBrowser.js"></script>
<gap:plugin name="ChildBrowser" /> <!-- latest release -->
<script type="text/javascript" charset="utf-8" src="EmailComposer.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
function launchCB() {
if(window.plugins.childBrowser != null) {
window.plugins.childBrowser.onLocationChange = function(loc){};
window.plugins.childBrowser.onClose = function(){};
window.plugins.childBrowser.onOpenExternal = function(){};
window.plugins.childBrowser.showWebPage('http://www.google.de');
} else {
alert('not found');
}
}
/*
var args;
cordova.exec(null, null, "EmailComposer", "showEmailComposer", [args]);
*/
</script>
<!-- jQuery mobile -->
<link type="text/css" rel="stylesheet" media="screen" href="jqm/jquery.mobile-1.2.0-alpha.1.min.css">
<link type="text/css" rel="stylesheet" media="screen" href="jqm/Changes.css">
<script type="text/javascript" src="jqm/jquery-1.7.2.min.js"></script>
<script>
// for using childbrowser to open pdf on remote sites
$(document).bind( "mobileinit", function() {
$.mobile.allowCrossDomainPages = true;
}
);
// the function i want to implement
$(document).bind("pageinit", function() {
onDeviceReady();
});
function onDeviceReady() {
var root = this;
cb = window.plugins.childBrowser;
if (cb != null) {
$('a[target="_blank"]').click(function(event) {
cb.showWebPage($(this).attr('href'));
event.preventDefault();
event.stopImmediatePropagation();
return false;
});
}
}
// don't know is this thing is right in place...
document.addEventListener("deviceready", onDeviceReady, false);
</script>
<script src="jqm/jquery.mobile-1.2.0-alpha.1.min.js"></script>
</head>
<body>
<section data-role="page" id="home" data-theme="a" data-position="fixed">
<div data-role="header"> <!-- header -->
<h1>Test</h1>
<div style="position:absolute; top:0px; right:5px;">
<a href="#about" data-transition="pop">
<img src="images/schlange-sw.png" alt="Schlange">
</a>
</div>
</div>
<!-- /header -->
<div data-role="content"> <!-- content -->
<a id="domainbut" onclick='launchCB()'>Working </a>
not working
</div>
<!-- content -->
<div data-role="footer" data-theme="a" data-position="fixed"></div>
</section>
<section data-role="dialog" id="about" data-close-btn-text="Close This Dialog">
<div data-role="header">
<h1>Über</h1>
</div>
<div data-role="content">
<h1 style="text-align: center;"></h1>
<div align="center">
</div>
<p style="text-align: center;">The owner of this app</p>
<button onclick="cordova.exec(null, null, 'EmailComposer', 'showEmailComposer', [args]);">Compose Email</button>
<p>
OK
</p>
</div>
</section>
</body>
</html>
Thank you in advance.
Regards
Kieke
#Kieke, if you decide to do away with ChildBrowser, I found the following worked for me.
NOTE: Assuming you are using PhoneGap 2.x
In your Cordova.plist set OpenAllWhitelistURLsInWebView = YES and set your ExternalHosts list, * is fine. Anything you want the webview not to block (viewed in Safari or in the app) has to be in your ExternalHosts list.
In your MainViewController.m add the following code to the bottom, you can manually redirect any URL to Safari, see the if statement for www.loadDomainInSafari.com:
- (BOOL) webView:(UIWebView*)theWebView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType
{
NSURL *requestURL =[ [ request URL ] retain ];
NSString *host = [ [ requestURL host] retain ];
// if YES, directs to WebView
// otherwise, takes OpenAllWhitelistURLsInWebView setting
// if www.loadDomainInSafari.com, open in Safari by explictly stating NO.
// otherwise take OpenAllWhitelistURLsInWebView setting of YES
if ([host isEqualToString:#"www.loadDomainInSafari.com"]) {
return ![ [ UIApplication sharedApplication ] openURL: [ requestURL autorelease] ];
}
[ requestURL release ];
return [super webView:theWebView shouldStartLoadWithRequest:request navigationType:navigationType];
}
In your Cordova.plist, do you have OpenAllWhitelistURLsInWebView = YES and are all the domains (eg. www.google.com, localhost) you are connecting to are in your ExternalHosts list?
Look in the console of your Xcode debugger as #Littm describes, you will see if your link are being blocked because they aren't in the whitelist.
You can also check your system.log as well, tail /var/log/system.log for any errors after you execute.
I am currently developing a calendar system and I want some events/dates send directly to and ics file from the web calender.
Dhtmlxscheduler is exactly what I need. Writing the data to mysql works and it is reading the data too, but not to ics and from ics.
Here is the code I have so far:
<script src="../../codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
<script src="../../codebase/ext/dhtmlxscheduler_serialize.js" type="text/javascript" charset="utf-8"></script>
<script src="../../codebase/ext/dhtmlxscheduler_multisource.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../../codebase/dhtmlxscheduler.css" type="text/css" title="no title" charset="utf-8">
<script type="text/javascript" charset="utf-8">
function init() {
scheduler.config.xml_date="%Y-%m-%d %H:%i";
scheduler.config.prevent_cache = true;
scheduler.config.lightbox.sections=[
{name:"description", height:130, map_to:"text", type:"textarea" , focus:true},
{name:"location", height:43, type:"textarea", map_to:"details" },
{name:"time", height:72, type:"time", map_to:"auto"}
]
scheduler.config.first_hour=4;
scheduler.locale.labels.section_location="Location";
//scheduler.config.details_on_create=true;
//scheduler.config.details_on_dblclick=true;
scheduler.init('scheduler',new Date(2009,10,1),"month");
scheduler.setLoadMode("month");
scheduler.load(["php/events.php","/ics/schedule.ics"]);
var dp = new dataProcessor("php/events.php");
dp.init(scheduler);
}
function show(){
alert(scheduler.toICal());
}
function save(){
var form = document.forms[0];
form.elements.data.value = scheduler.toICal();
form.submit();
}
function get(){
var form = document.forms[1];
form.elements.data.value = scheduler.toICal();
form.submit();
}
</script>
</head>
<body onload="init();">
<form action="../04_export/php/ical_writer.php" method="post" target="hidden_frame" accept-charset="utf-8">
<input type="hidden" name="data" value="" id="data">
</form>
It would be nice if you could help me. Thanks. Sorry that the post looks a bit strange. It is my first post with code....
Above code loads data from 2 sources in same time, which causes issue as one source is xml based and other is ical data.
scheduler.load(["php/events.php","/ics/schedule.ics"]);
need to be replaced with separate data loading
scheduler.load("php/events.php", "xml")
scheduler.load("ics/schedule.ics", "ical")