I try to show YT video in my application (Appcelerator, Android). I found that the best way is to show embeded video in WebView, so I do it with such code:
var webView = Ti.UI.createWebView({
url: 'https://www.youtube.com/embed/LTRfmqc0KBg',
enableZoomControls: false,
scalesPageToFit: true,
scrollsToTop: false,
showScrollbars: false
});
but video does not load (I see only black screen - instead of webview's white). WebView works properly because it shows other pages.
Then you can try this
var Win = Titanium.UI.createWindow({
title : 'Video View Demo',
backgroundColor : '#fff'
});
var video_url = 'https://www.youtube.com/watch?v=bSiDLCf5u3s';
var movie = '<html><head></head><body style="margin:0"><embed id="yt" src="' + video_url + '" type="application/x-shockwave-flash" width="480" height="266"></embed></body></html>';
var webView = Ti.UI.createWebView({
top:0,
left:0,
width:480,
height:266,
url:video_url,
html:movie
});
Win.add(webView);
Win.open();
You can call the device default youtube app to open the url for the user. See the below code
var Win = Titanium.UI.createWindow({
title : 'Youtube Video View Demo',
backgroundColor : '#fff'
});
var button = Titanium.UI.createButton({
title: 'Hello',
top: 10,
width: 100,
height: 50
});
button.addEventListener('click',function(e)
{
Titanium.Platform.openURL('https://www.youtube.com/watch?v=bSiDLCf5u3s');
});
Win.add(button);
Win.open();
Thanks.
I found that embedded videos wouldn't work on Android, while doing fine on iOS.
However switching form using the webviews url property to load the video, to using the setHtml() function works. The way to do this is by using the Youtube iframe api.
var videoUrl = 'https://www.youtube.com/embed/' + videoId + '? autoplay=1&autohide=1&cc_load_policy=0&color=white&controls=0&fs=0&iv_load_policy=3&modestbranding=1&rel=0&showinfo=0';
var playerWidth = $.youtubeWebView.width;
var playerHeight = $.youtubeWebView.height;
var html = '<iframe id="player" type="text/html" width="'+playerWidth+'" height="'+playerHeight+'" src="'+videoUrl+'" frameborder="0"></iframe>';
$.youtubeWebView.setHtml(html);
Heads up, iframes can be a pain, add this in the load event to get rid of the wierd white padding on the top & left side
this.evalJS('document.getElementsByTagName("body")[0].style.margin=0;');
Something like this:
$.youtubeWebView.addEventListener('load', function(){
this.evalJS('document.getElementsByTagName("body")[0].style.margin=0;');
var showYoutubeTimer = setTimeout(function() {
$.activityIndicator.hide();
$.youtubeWebView.opacity = 1;
clearTimeout(showYoutubeTimer);
}, 300);
});
Related
I want to hide the top options bar in google drive. How can I achieve that? I am using cordova inAppBrowser to open this link.
https://drive.google.com/file/d/0B_nipvep1WpPd2JXeDdJcUlNYXM/view
I want to use embedded=true but I don't know how it would work. Please see the image below.
May be this will help you
You have to wait until your inAppBrowser page loading finishes.
//Set css in your inAppstyle.css
.drive-viewer-toolstrip{
display: none !important;
opacity: 0 !important;
}
You must add an event listener:
var inApp = window.open('https://drive.google.com/file/d/0B_nipvep1WpPd2JXeDdJcUlNYXM/view', '_blank', 'location=no');
inApp.addEventListener('loadstop', function(){
inApp.insertCSS({
file: 'inAppStyle.css'
},onSuccess);
});
Use this path for your android projects file:///android_asset/{your folder}
INFO: https://github.com/apache/cordova-plugin-file/blob/master/doc/index.md#android-file-system-layout
Your JS
text += '' + data.docs[i].doc_title + '';
Updated JS
text += '' + data.docs[i].doc_title + '';
//Create new function
function openthislink(ln)
{
var inApp = window.open(ln, '_blank', 'location=no');
inApp.addEventListener('loadstop', function(){
inApp.insertCSS({
file: 'inAppStyle.css'
},onSuccess);
});
}
Please excuse the ugly code this is here just as the simplest possible version of my actual code that I can use to reproduce my error. I am basically using a WebView in titanium to open a locally held .htm file so that I can leverage HTML5 graphics capabillities. What I am doing works fine. The problem is that I need to pass some data to the htm file which I am doing exactly as the docs recommend - using Ti.App.fireEvent - and this works ... once. But if I navigate away from the window and then navigate back again it fails and gives me a NS_ERROR_NOT_AVAILABLE. I have tried this code in firefox as a web preview and on Android device and emulator with the same issue in each. Clearly there is some issue with it not loading the same way if the view is called back, I am guessing it is pulled back off the stack which is messing with the 'load' event listener or something, but I have no idea how to fix it. Here is a simplified version of my code, just to demonstrate the issue:
app.js
Titanium.UI.setBackgroundColor('#000');
var win = Ti.UI.createWindow({
layout: 'vertical',
});
var wv = Ti.UI.createWebView({
url: 'test.htm',
height: '50%'
});
var but = Ti.UI.createButton({
width: 100,
height: 50,
title: 'Press',
});
var wvopen = false;
but.addEventListener('click', function() {
if (wvopen === false) {
win.add(wv);
wvopen = true;
} else {
win.remove(wv);
wvopen = false;
}
});
wv.addEventListener('load', function() {
Ti.App.fireEvent('go');
});
win.add(but);
win.open();
And the .htm file:
test.htm
<!doctype html>
<html>
<head>
<title>Test</title>
</head>
<body>
<p>A Little Test</p>
<script>
var Ti = window.parent.Ti;
Ti.App.addEventListener('go', function(){
alert(1);
});
</script>
</body>
</html>
Try this,
but.addEventListener('click', function() {
if (wvopen === false) {
win.add(wv);
wvopen = true;
} else {
win.remove(wv);
wv.release();
wvopen = false;
}
});
I found the answer myself eventually. It is in the docs but realising what the problem actually is and why it is happening is not always simple so I feel it is worth me answering here myself for others use.
The key point is this:
"Keep in mind that app-level events are global, which means they remain in context the entire time your app is running (unless you remove them). This also means that any objects they reference will also remain in scope while your app runs. This could prevent those objects from being garbage collected. See the Managing Memory and Finding Leaks chapter for more information."
~ Titanium docs.
link: https://wiki.appcelerator.org/display/guides2/Event+Handling#EventHandling-Application-LevelEvents
So basically the event listener will exist even if it is not loaded and you try to delete the context in which it exists. So you must delete both the event listener and nullify the view that holds it.
In practice the implementation may vary a little depending on your specifics, but this is what I came up with.
NB ... there may be more efficient methods to do this in which case please let me know.
app.js
/*
* Build window and buttons
*/
var win = Ti.UI.createWindow({
layout: 'vertical',
backgroundColor:'black'
});
var but = Ti.UI.createButton({
top: 20,
width: 200,
height: 50,
title: 'Toggle WV',
});
var but2 = Ti.UI.createButton({
top: 20,
width: 200,
height: 50,
title: 'Fire Event'
});
var wv;
function newWv(){
wv = Ti.UI.createWebView({
top:20,
right: 20,
left: 20,
height: '50%',
url: 'test.htm',
});
}
win.add(but);
win.add(but2);
/*
* Main functionality goes here of tests goes here.
*/
var isVisible = false;
but.addEventListener('click', function() {
if (isVisible) {
win.remove(wv);
Ti.App.fireEvent('close');
wv = null;
isVisible = false;
} else {
newWv();
win.add(wv);
isVisible = true;
}
});
but2.addEventListener('click', function() {
try{
Ti.App.fireEvent('go');
} catch(e) {
alert(e);
}
});
win.open({modal:true});
And then a few changes in the htm file:
test.htm
<!doctype html>
<html>
<head>
<title>Test</title>
</head>
<body>
<p>A Little Test</p>
<script>
var Ti = window.parent.Ti;
var go = function() {
alert('called by Titanium app');
};
var close = function() {
Ti.App.removeEventListener('go',go);
Ti.App.removeEventListener('close',close);
};
window.addEventListener('load', function() {
Ti.App.addEventListener('go', go);
Ti.App.addEventListener('close', close);
});
</script>
</body>
</html>
It is easy to create a custom play button for an embed YouTube video using their API, however it seems that the button cannot launch the video in mobile environment, especially Android. When you click it there, screen simply goes forever black with ever spinning loading animation.
<div id="wrapper">
<div id="video">
</div>
Play
</div>
<script>
var player, tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
window.onYouTubeIframeAPIReady = function() {
player = new YT.Player('video', {
height: '320',
width: '240',
videoId: '5oxIQe3XngY',
playerVars: {
modestbranding: 1,
controls: 0,
rel: 0
}
});
player.addEventListener('onReady', function(e) {
document.getElementById('play').onclick = function() {
player.playVideo();
};
});
player.addEventListener('onStateChange', function(e) {
if (e.data == 1) {
document.getElementById('play').style.display = 'none';
}
});
};
</script>
Here's the fiddle: http://jsfiddle.net/HArsN/
Any solution to that? Is it necessary to launch the video through bundled button only?
I have the following code:
app.js:
Ti.include('logic/ui.js');
/* some code */
mainWindow.open();
ui.js:
var mainWindow = Ti.UI.createWindow({
title : 'Main Window',
backgroundColor:'transparent',
exitOnClose : true,
backgroundImage: 'view/i/bg.png',
});
var resultWebView = Titanium.UI.createWebView({
url : 'view/result.html',
backgroundColor: 'transparent'
});
mainWindow.add(resultWebView);
Problem: On devices with Android < 2.3.5, WebView does not load when the application is first loaded. But if you apply zoom, it works fine. Any ideas on how I can resolve this?
UPDATE:
If the url to the web document is internet url, then WebView always displayed without a problem.
var resultWebView = Titanium.UI.createWebView({
url : 'http://www.google.com',
backgroundColor: 'transparent'
});
On the click of my button, I want to navigate to another screen. How would I achieve this in Titanium?
var TrialButton = Titanium.UI.createButton({
color:'black',
backgroundColor:'#FFFFFF',
title:'Trial Mode',
top:55,
width:300,
height:50,
borderRadius:5,
font:{fontSize:18, fontFamily :'Helvetica', fontWeight:'bold'}
});
TrialButton.addEventListener('click', function() {
var newWindow = Titanium.UI.createWindow({
background : "#fff",
title : "Trial Demo",
url:"nextScreen.js"
});
newWindow.open();
});
TrialButton.addEventListener('click', function()
{
var newWindow = Ti.UI.createWindow({
background : "#000",
title : "Image View",
url:"nextScreen.js"
});
newWindow.open();
)};
should checkout examples here https://github.com/appcelerator/KitchenSink
here are some posts from my blog http://blog.clearlyinnovative.com/tagged/Appcelerator
If you're using Alloy, You can also navigate to another screen using the Alloy.createController method.
function sample(e) {
var nextScreen = Alloy.createController('nameOfNextScreen').getView();
nextScreen.open();
}
If you wish, you can also pass data to the next screen by passing it in as an argument eg,
var nextScreen = Alloy.createController('nameOfNextScreen', {sushi: "california roll" }).getView();
and retrieving the argument in the next screen with the following
var args = $.args;
var value = args.sushi;
TrialButton.addEventListener('click', function()
{
var newWindow = Ti.UI.createWindow({
background : "#000",
title : "Image View",
url:"nextScreen.js"
});
newWindow.open();
//close your current window of this page and also in your nextScreen.js page, the window must be set to current window
)};
Because its written wrong. Theres an error in code at the last line. The ")" has to follow after "}". Not opposite ast written here. So the closing tag is right like this: "});". Use following code instead:
TrialButton.addEventListener('click', function()
{
var newWindow = Ti.UI.createWindow({
background : "#000",
title : "Image View",
url:"nextScreen.js"
});
newWindow.open();
//close your current window of this page and also in your nextScreen.js page, the window must be set to current window
});