I am making an app for iPhone and in that I am using Javascript for making making embeded youtube in UIWebView. I want to open/read/write a file on some events from javascript and then want to use that file in objective-c code. But how can I do this? I mean at what location can I save and open the file.
I have made a file called youtubeAPI.html and calling this file from objective-c code. It opens the page successfully. Now I want to open a file and write the something everytime it changes it states, and then need to to show that file in the final result from obejective-c. Please tell me how can i do this.
<!DOCTYPE HTML>
<html>
<body>
<div id="player"></div>
<script>
//Load player api asynchronously.
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var done = false;
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'JW5meKfy3fY',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(evt) {
evt.target.playVideo();
}
function onPlayerStateChange(evt) {
if (evt.data == YT.PlayerState.PLAYING && !done) { // NEED TO ADD FILE OPERATION HERE
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
THanks
Akansha
// Get file path
NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString *documentsDirectory = [paths objectAtIndex:0];
NSString filePath = [documentsDirectory stringByAppendingPathComponent:filename];
// Read file contents
NSString *content = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
// Write file contents
[[content dataUsingEncoding:NSUTF8StringEncoding] writeToFile:filePath atomically:NO];
UIWebView is a sandbox, there is no chance to do this, javascript can not access file system directly, this is what i know.
But you can do other thing.
first: save state into window object;
such as window.state = "someting";
second: read the state by Objective-C;
NSString *state = [webView stringByEvaluatingJavaScriptFromString:#"window.state"];
Related
I have this script as described here: YouTube Player API:
<!DOCTYPE html>
<html>
<!-- ... -->
<body>
<h1>Youtube Video</h1>
<div id="player"></div>
<script type="text/javascript">
// Load the IFrame Player API code asyncronously
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Creating an iframe and youtube player
var player;
function onYoutubeIframeAPIReady(){
console.log("Youtube API Loaded");
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'LSwbPyIP-gY',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// When video_player is ready, call this function
function onPlayerReady(event){
event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event){
if (event.data == YT.PlayerState.PLAYING && !done){
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo(){
player.stopVideo();
}
</script>
</body>
</html>
After reloading the page, nothing happing. So, at the end of the script, I call this function:
onYoutubeIframeAPIReady();
Doing this, gives me an error:
(index):25 Uncaught ReferenceError: YT is not defined
But when I check the generated source code, I see this two lines before my script tag:
<script type="text/javascript" id="www-widgetapi-script" src="https://s.ytimg.com/yts/jsbin/www-widgetapi-vflWkc-3E/www-widgetapi.js" async=""></script>
<script src="https://www.youtube.com/iframe_api"></script>
If the IFrame Player API code are being loaded, why I am getting the error "YT is not defined" ? What am I missing?
To run this test, I am using Google Chrome 51.0.2704.79 (64-bit)
You don't have to call onYoutubeIframeAPIReady by yourself.
Youtube server side code call it for you.
Check in their code you will find this code:
var Sb = l("onYTReady");
Sb && Sb();
var Tb = l("onYouTubeIframeAPIReady");
Tb && Tb();
var Ub = l("onYouTubePlayerAPIReady");
Ub && Ub();
You just load the script and it call your function.
I'm trying to execute a javascript that has youtube api to the WebBrowser1.
procedure TForm1.FormCreate(Sender: TObject);
begin
WebBrowser1.Navigate(ExtractFilePath(ParamStr(0)) + 'test.html');
end;
procedure TForm1.Button1Click(Sender: TObject);
var
Doc: IHTMLDocument2; // current HTML document
HTMLWindow: IHTMLWindow2; // parent window of current HTML document
JSFn: string;
begin
// Get reference to current document
Doc := WebBrowser1.Document as IHTMLDocument2;
if not Assigned(Doc) then
Exit;
// Get parent window of current document
HTMLWindow := Doc.parentWindow;
if not Assigned(HTMLWindow) then
Exit;
// Run JavaScript
try
JSFn := 'onYouTubePlayerAPIReady()';
HTMLWindow.execScript(JSFn, 'JavaScript');
except
on E : Exception do
ShowMessage(E.ClassName+' error raised, with message : '+E.Message); //error EOleException, 80020101
end;
end;
but this raised an error : EOleException, 80020101
Here is my test.html
<div id="player"></div>
<script src="http://www.youtube.com/player_api"></script>
<script>
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', { //<-- error
height: '390',
width: '640',
videoId: '0Bmhjf0rKe8',
events: {
'onReady': onPlayerReady
}
});
}
// autoplay video
function onPlayerReady(event) {
event.target.playVideo();
}
</script>
Here I want to embed the video to WebBrowser1 and then auto play it using the javascript that has youtube api.
Is this possible to make this work ?
You are using the Youtube javascript player API, which is deprecated. You must use the Youtube Iframe player API. If you have the HTML under control, then there is no need for special code on the delphi side.
Here is a complete and working example:
HTML code (is the same code from the YT API reference page, I just added the autoplay variable):
<!DOCTYPE html>
<html>
<head>
<!-- // this is needed to force our embedded browser to run in EDGE mode -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
playerVars: { 'autoplay': 1, 'controls': 0 }, // this is essential for autoplay
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
Delphi code:
unit u_frm_main;
interface
uses
MsHtml,
Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System.Classes, Vcl.Graphics,
Vcl.Controls, Vcl.Forms, Vcl.Dialogs, Vcl.StdCtrls, Vcl.OleCtrls, SHDocVw;
type
TForm1 = class(TForm)
WebBrowser1: TWebBrowser;
Button1: TButton;
procedure FormCreate(Sender: TObject);
procedure Button1Click(Sender: TObject);
private
{ Private declarations }
public
{ Public declarations }
end;
var
Form1: TForm1;
implementation
{$R *.dfm}
procedure TForm1.FormCreate(Sender: TObject);
begin
WebBrowser1.Navigate(ExtractFilePath(ParamStr(0)) + 'test.html');
end;
end.
I am trying to implement the example youtube api html page described here: https://developers.google.com/youtube/iframe_api_reference in a meteor application.
I have read that you can use Template.<template name>.rendered to implement traditional javascript functionality within a meteor application.
So I attempted to implement that youtube example in meteor by putting it into a rendered function.
However No video will display.
I worry I am not understanding meteors capabilities. Is something like this even possible in meteor?
Code:
home.html:
enter code here
<template name="home">
<h1> Home</h1>
This is the home page
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
</script>
</template>
home.js:
Template.home.rendered = function() {
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
}
P.s. I am aware of adrianliaw:youtube-iframe-api and do not want to use that. I would like a better understanding of how to implement this on my own. Hopefully doing so will further my knowledge of javascript and meteor.
I think the problem here is that after https://www.youtube.com/iframe_api loads, it will try to call the onYouTubeIframeAPIReady function but it can't find it. The code works if you change the functions to anonymous functions stored in variables that are available across the entire application.
home.html:
<head>
<title>test</title>
</head>
<body>
{{> home}}
</body>
<template name="home">
<h1> Home</h1>
This is the home page
<div id="player"></div>
</template>
home.js:
Template.home.rendered = function() {
/* 2. This code loads the IFrame Player API code asynchronously. */
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
/* 3. This function creates an <iframe> (and YouTube player) */
/* after the API code downloads. */
var player;
onYouTubeIframeAPIReady = function() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
};
/* 4. The API will call this function when the video player is ready. */
onPlayerReady = function(event) {
event.target.playVideo();
};
/* 5. The API calls this function when the player's state changes. */
/* The function indicates that when playing a video (state=1), */
/* the player should play for six seconds and then stop. */
var done = false;
onPlayerStateChange = function(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
};
stopVideo = function() {
player.stopVideo();
};
};
Notice the function declaration changes:
function onYouTubeIframeAPIReady() has been changed to
onYouTubeIframeAPIReady = function()
function onPlayerReady(event) has been changed to onPlayerReady
= function(event)
function onPlayerStateChange(event) has been changed to
onPlayerStateChange = function(event)
function stopVideo() has been changed to stopVideo = function()
These global variables are now callable by the injected YouTube script.
I was trying the following code from the samples given on developers.google.com/*
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'yZxrao3zou4',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
The code works perfectly when I have nothing else on my web page, but when I try to merge it with my project it doesn't seem to work.
I am guessing the problem is with the following lines:
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
Can someone tell me what does the above two lines do, especially the [0] part?
My code is pretty much the same except that instead of the script tag I have the code inside a function, which takes in a argument for the videoId.
EDIT:
My code is as follows:
<script>
// I have a input area, where the user can enter the movie name. When the user submits the movie name, I capture the val and pass it to the youtube().
function youtube(movie_name) {
var videoId;
$.ajax({
url:"https://www.googleapis.com/youtube/v3/search?part=snippet&q="+movie_name+"&type=video&key=my_key",
success: function (response) {
videoId = response.items[0].id.videoId;
findMovieById(videoId);
}
});
}
function findMovieById(videoID) {
$("#player").css('display', 'inline-block');
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: ""+videoID,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
alert('Player Ready');
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
}
</script>
The idea behind the sample code is that it is much more consistent when you load the YouTube iFrame library code after the rest of the page has loaded; hence the sample code demonstrates that you put an inline at the bottom of the page, and within that, you traverse the DOM, find a place where you can insert another tag, and do so dynamically (the [0] just says 'the first entry in the array of all elements of name in the document).
The logic here is that, when the iFrame library loads, it will call the function onYouTubeIframeAPIReady. But since the library loads asynchronously, it's best to load it this way to ensure that anything else that your API hooks might depend on (the element in the DOM you're binding to, for example) already exists.
Also note that, because the loaded library will always call the onYouTubeIframeAPIReady function, it MUST be defined outside any other function. Otherwise it isn't callable. That could be why nesting it inside your code somewhere isn't working.
Feel free to post some of your merged code for more detailed help.
I am trying to make an iphone app. In that app I am using Javascript. I want to know it is possbile to call a objective C function function from Javascript. If yes, then how can we do that? If not then is there any alternative for that?
Thanks
Akansha
I have this java script code. So whenever I enter in "onPlayerStateChange" function I want to open a file and write some event in this file. But I am not able to open and write file in javascript as the location of file is not known to me. With objective-c I can open and write data in documentsDirectory, but I am not sure about javascript. So I was thinking to call a function inside "onPlayerStateChange" which is there in objective-C .m file. and that function writes in the file whenever I enter "onPlayerStateChange" function.
Can suggest anything now?
<!DOCTYPE HTML>
<html>
<body>
<div id="player"></div>
<script>
//Load player api asynchronously.
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var done = false;
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'JW5meKfy3fY',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(evt) {
evt.target.playVideo();
}
function onPlayerStateChange(evt) {
if (evt.data == YT.PlayerState.PLAYING && !done) { // NEED TO ADD FILE OPERATION HERE
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
yes, you can create a UIWebView with the HTML/JS Context and in the
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
you can catch the request and call the obj-c method.
Or you create the same solution like Appcelerator: https://stackoverflow.com/a/2471774/644629
You can't do it directly like in JAVA/ANDROID. Refer my answer below
iOS UIWebView Javascript - insert data -receive callbacks?
You can create an objective c module and import it into your app and call it from JavaScript. Is this what your looking for:
http://developer.appcelerator.com/doc/mobile/iphone/module_sdk