I have a Mac OS X application and am using a WebView (webkit) to embed a YouTube iframe.
For some reason it keeps pausing on certain videos after a few seconds. It will just get stuck loading.
Flash NPAPI Plug-in version 18.0.0.160 is installed.
Xcode is also throwing an Error: Ignoring controlTimebase set by client because AVSampleBufferDisplayLayer was added to a synchronizer
Here is my code for the iFrame embed, the same one as YouTube provides.
<div id="ytplayer"></div>
<script>
document.body.setAttribute("style", "margin-left:0px;margin-top:0px;background-color:#000000");
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height: '200',
width: '300',
videoId: '%#',
playerVars: {
'controls': 0,
'html5': 1,
'autoplay': 1
}
});
}
</script>
It was working fine until a couple days ago. I believe YouTube might have updated something, which could just mean the error is on their end.
I'm using the videojs currentTime() function to jump to a specific time in the video. I have it working in Chrome, but Firefox (16) doesn't seem to respond (other api functions like play/pause do work in FF).
Videojs api docs: https://github.com/zencoder/video-js/blob/master/docs/api.md#currenttimeseconds--type-integer-or-float
_V_("video").ready(function(){
var vidplayer = this;
});
$(function() {
$('#time').click(function() {
seconds = $(this).text();
vidplayer.currentTime(seconds);
vidplayer.play();
});
});
I just basically want to get the "http://... .png" or "http://... .jpg" location of my canvas as an image.
I have already tried toDataURL() but it is not working. Especially if I loaded an image within the canvas.
Here is my code: (btw, I'm using jQuery here)
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
var canvas = $("#canvas");
var ctx = canvas.get(0).getContext("2d");
var image1 = new Image();
image1.src = "http://www.helpinghomelesscats.com/images/cat1.jpg"
$(image1).load(function(){
ctx.drawImage(image1,0,0,200,200);
});
});
</script>
with my html/body having only this:
<canvas id="canvas" width="500" height="400"></canvas>
now, if you try that, that works fine. it shows that cat.
but when i add that toDataURL into my script, it just doesn't happen.
var dataImg = canvas.get(0).toDataURL();
i load this dataImg variable into another click-redirect function to test it, hoping it would redirect to the page using the base64 url it contains, but it just doesn't work:
$("#canvas").click(function(){
document.location = dataImg;
});
it brings me to a blank page? what am i missing here?
thank you very much!
Do you own http://www.helpinghomelesscats.com or is your code hosted directly on that site? If not you won't be able to do this due to cross site origin policies. The best way would be to have some server side code grab the image and then serve it locally on your domain.
If you do own helpinghomelesscats.com this should work, as tested here
Live Demo
Click the canvas and view the log in order to see the response.
I am using Yahoo web player and certain steps in order to add song to yahoo web player playlist.
I am displaying list of songs.
On click on a song creating a dynamic song url using jquery and appending in the div tag.
Link Like: Song
I want add this link to yahoo web player playlist.
Code:
fileUrl = "<a href='http://www.example.com/data?v=yaariyaan'> Song </a>";
YAHOO.MediaPlayer.addTracks(fileUrl, 0, true);
YAHOO.MediaPlayer.play();
addTracks is not adding the link to the playlist.
I am also getting the error:
Error : "Uncaught TypeError: Cannot call method 'fadeIn' of undefined ";
How to fix it?
I had the same problem and the only way I could resolve it is to make the autoplay set to true, like this:
<script type="text/javascript">
var YMPParams =
{
autoplay:true
}
</script>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/latest"></script>
I have protocol (like http) with scheme managed with 3rd party App registered in Mac OS X.
I.e, x-someapp://someaction or something like that.
How can I open this URL with Google Chrome?
By default, Chrome starts searching in Google engine instead launching App and passing URL handling to it...
Safari launches some registered App. And it is right thing.
Firefox and Opera asks what to do... and I can launch App also.
But Chrome... Doesn't ask.
I even tried to write some HTML page with JavaScript inside to send XHttpRequest:
function _httpExecuteCallback()
{
if (httpRequestCallbackFunction != null) {
if (httpRequest.readyState == 4) {
if (httpRequest.status == 200) {
httpRequestCallbackFunction();
httpRequestCallbackFunction = null;
}
}
}
}
function _httpGet(url, callbackFunction)
{
httpRequest = false;
httpRequestCallbackFunction = callbackFunction;
httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = _httpExecuteCallback;
httpRequest.open('GET', url, true);
httpRequest.send(null);
}
_httpGet('x-someapp://test',function(){})
No results also...
The current accepted solution has a problem with Chrome for SSL https. Watching the console log, Chrome blocks the request because it thinks the custom url protocol is not secure:
[blocked] The page at reports blah blah ran insecure content from customproto//blah blah
Here is a solution (this took me a few days to research):
<input type='button' value='Test Custom Url' onclick='exec()'>
<script>
function submitRequest(buttonId) {
var d = (window.parent)?window.parent.document:window.document
if (d.getElementById(buttonId) == null || d.getElementById(buttonId) == undefined) return;
if (d.getElementById(buttonId).dispatchEvent) {
var e = d.createEvent("MouseEvents");
e.initEvent("click", true, true);
d.getElementById(buttonId).dispatchEvent(e);
}
else {
d.getElementById(buttonId).click();
}
}
function exec(){
var d = (window.parent)?window.parent.document:window.document
var f = d.getElementById('customUrlLink')
if (f ) {f.parentNode.removeChild(f);}
var a = d.createElement('a');
a.href = 'mycustomproto://arg1';
a.innerHTML = "Link"
a.setAttribute('id', 'customUrlLink');
a.setAttribute("style", "display:none; ");
d.body.appendChild(a);
submitRequest("customUrlLink");
}
</script>
This code will not work for IE. I've found using this technique IE limits the argument of the custom protocol to less than 1000 where as using the iFrame technique IE will allow 2083 chars.
The only way to overcome the url limit in javascript is chuck the data and call multiple times. If anyone wants to take a stab at that, please let me know how it goes. I would like to use it.
To handle long urls in the executing app, pass a token into the app and have it go get the data from a url GET.
So for right now I am using one function for Chrome/FF and another function for IE.
These links helped me develop this solution:
https://superuser.com/questions/655405/custom-protocol-handler-not-working-in-chrome-on-ssl-page
Simulating a click in jQuery/JavaScript on a link
(wish I had known this a few days ago....hope this helps someone)
==================================================
Update: (8hr later)
==================================================
Jake posted a great solution for chrome: https://superuser.com/questions/655405/custom-protocol-handler-not-working-in-chrome-on-ssl-page
This works in chrome only:
window.location.assign("customprotocol://");
It will fail in an iframe so this is working:
var w = (window.parent)?window.parent:window
w.location.assign(service + '://' + data)
==================================================
Update: (weeks later)
==================================================
All of the examples of opening the custom protocol, including my own, have a "://" in the url. And this is what is causing the SSL warnings.
Turns out the solution is to change "://" to ":"
so do this:
src="x-myproto:query" .....
and the SSL warnings will go away.
==================================================
Follow: (after months of production use)
==================================================
This has been working well for chorme. Detect the browser and if chrome do this:
var w = (window.parent)?window.parent:window
w.location.assign('myproto://xyzabcdefetc')
For IE and other browsers I do something slightly different.
Note that browsers do impose a limit on how much data you can put in custom url protocol. As long as your string is under 800 chars this seems to be the magic number for which works in all browsers.
It looks like it's Google's locationbar parsing which is getting in the way.
The browser, however, does seem to handle custom URL schemes properly. Try this in your locationbar:
javascript:document.location = 'myscheme://whatever'
Any link on your page that uses the custom scheme should also do the right thing.
I found the solution that works with Chrome.
I use the IFRAME-way.
Example (with JQuery):
$("body").append('<span id="__protoProxy"></span>');
function queryWord(aWord)
{
var protoProxy = document.getElementById('__protoProxy');
if (protoProxy)
{
var word = aWord.replace('"','\"');
protoProxy.innerHTML = '<div style="display:none;"><iframe src="x-myproto://query?' + word + '"></iframe></div>';
}
}
queryWord('hello');
Here's a solution that also includes a redirect to the App Store / Play Store if the user doesn't have the app. It uses a setTimeout for this. It also makes use of an iframe to support more browsers. So this works on Chrome, and any other mobile browser. We use this as my company, Branch. Just modify the two links below to correspond to your URI and App Store link.
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
window.onload = function() {
// Deep link to your app goes here
document.getElementById("l").src = "my_app://somepath";
setTimeout(function() {
// Link to the App Store should go here -- only fires if deep link fails
window.location = "https://itunes.apple.com/us/app/myapp/id123456789?ls=1&mt=8";
}, 500);
};
</script>
<iframe id="l" width="1" height="1" style="visibility:hidden"></iframe>
</body>
</html>
Again, this should work on any browser, thanks to the iframe.
If Chrome does not recognize the URL scheme, it defaults to a search.
This is what I see in Safari:
alt text http://img62.imageshack.us/img62/6792/clipboard02oh.jpg
and in Firefox:
alt text http://img138.imageshack.us/img138/9986/clipboard04xk.jpg
I believe the reason why Chrome defaults to search is that there are special google searches that use the colon.
E.g:
define: dictionary
filetype:pdf google chromium
This is one of the annoyances I have with Firefox, I have to jump to the "search box" rather than the address bar to execute these types of searches. Since Chrome does not have a separate search box like Firefox, IE and Safari have, this functionality is required.
Ajax requests won't get you around this.
Some weeks later ....
Looks like window.location.replace('myscheme://whatever') has full cross-browser support , works with chrome,firefox,safari,edge,opera see https://developer.mozilla.org/en-US/docs/Web/API/Location/replace