YouTube iFrame embed pausing after few seconds - macos

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.

Related

iPad PhoneGap map not showing

I have the following html;
<div id="map_canvas"></div>
and if have some js;
document.addEventListener("deviceready", onDeviceReady, true);
function onDeviceReady () {
navigator.notification.alert("Yup, it works!",function(){},"","");
navigator.geolocation.getCurrentPosition(getCurrentPositionSuccess, getCurrentPositionError);
};
function getCurrentPositionSuccess(position) {
alert(123);
//alert(position.coords.latitude);
currentPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
gmap = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 15,
center: currentPosition,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
Obviously all the above is a snip but all the key players are in place.
All this worked great on my PC and using Safari. However, when I moved over to the mac, xcode and phonegap, the map no longer displays.
alert(123) never happens and the getCurrentPositionError function is called.
The error is code 2, kclerrordomain error 0
I get the alert that the app want's to use my location though.
Any help here would be great.
I am using xcode 5.0.1 on Mavericks with phonegap 3.1 for iPad.
edit
If I use the Retina simulator I can get back the location but not if i use the ipad sim. Why would that be?

Kineticjs - Help uploading images to stage from input file

I am trying to allow users upload their own images to the kineticJS stage through an input in the html. I prefer to keep all my code in a separate js file, here is what i have so far:
$(document).ready(function() {
var stage = new Kinetic.Stage({
container: 'container',
width: 900,
height: 500
});
var layer = new Kinetic.Layer();
});
function addImage(){
var imageObj = new Image();
imageObj.onload = function() {
var myImage = new Kinetic.Image({
x: 140,
y: stage.getHeight() / 2 - 59,
image: imageObj,
width: 106,
height: 118
});
layer.add(myImage);
stage.add(layer);
}
var f = document.getElementById('uploadimage').files[0];
var name = f.name;
var url = window.URL;
var src = url.createObjectURL(f);
imageObj.src = src;
}
How do I expose the stage to the addImage() method? It is out of its scope at the moment and I havent been able to figure out how to solve the problem as the canvas doesn't show in the html until something is added to it. I need these images to be added as layers for future manipulation so want to use kineticJS. Any suggestions would be much appreciated!
http://jsfiddle.net/8XKBM/12/
I managed to get your addImage function working by attaching an event to it. If you use the Firebug console in Firefox or just press Ctrl+Shift+J you can get javascript errors. It turns out your function was being read as undefined, so now the alert is working, but your image isn't added because they aren't stored anywhere yet, like on a server (must be uploaded somewhere first)
I used jQuery to attach the event as you should use that instead of onclick='function()'
$('#addImg').on('click', function() {
addImage();
});
and changed
<div>
<input type="file" name="img" size="5" id="uploadimage" />
<button id='addImg' value="Upload" >Upload</button>
</div>
What you would really want to do is have the user upload the photos (to the server) on the fly using AJAX, (available with jQuery, doesn't interfere with KineticJS). Then, on success, you can draw the photo onto the canvas using your function. Make sure to use:
layer.draw()
or
stage.draw()
at the end of the addImage() function so that the photo is drawn on your canvas, as the browser does not draw the image until after the page loads and img.src is defined at the end. So, this will basically just require things to be in correct order rather than being difficult.
So, step 1: upload using AJAX (to server), step 2: add to stage, step 3: redraw stage

Videojs currentTime() function not working in Firefox

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();
});
});

How to use the YouTube iFrame API in Chrome and Firefox?

I have a YouTube video embedded on my site using an iFrame. I want to use the API to pause the video, but in Chrome I get an error:
Unsafe JavaScript attempt to access frame with URL http://subdomain.example.com/ from frame with URL http://www.youtube.com/embed/KmtzQCSh6xk?enablejsapi=1&origin=http://subdomain.example.com. Domains, protocols and ports must match.
In Firefox (3.6) I get this error:
Permission denied for <http://www.youtube.com> to call method Location.toString on <http://subdomain.example.com>.
I've tried putting the iFrame in myself or adding it with the API. Either way the player gets in, but I have no API control over it.
Here's the relevant part of my code:
<div id="player"></div>
<script type="text/javascript">
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 player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '433',
width: '731',
videoId: 'KmtzQCSh6xk'
});
}
$("#pause_button").click(function(){
alert("Pausing " + player);//is undefined :(
player.pauseVideo();
});
</script>
How do I get browsers to allow the YouTube iFrame to access my page's main frame?
Thanks!
Ignore those warnings. The player should still work fine regardless.
Use the recently-introduced JavaScript Player API for iframe embeds.

Mac Google Chrome iframe Access Parent Window

I am trying to access the parent window of an iframe and set the iframe's height.
The following code works on Windows IE7/IE8/Chrome/FireFox 3.6 and on Mac FireFox/Safari.
But on Mac Chrome it doesn't appear to be accessing the parent window.
On the parent page I have an iframe:
<iframe src="iframe_saleinfo.html" id="saleInformationIframe" frameborder="0"></iframe>
In the iframe.html:
$(document).ready(function() {
var theFrame = $('#saleInformationIframe', window.top.document);
theFrame.height($(document.body).height() + 30);
});
I have also tried:
$(document).ready(function() {
var theFrame = $('#saleInformationIframe', top.document);
theFrame.height($(document.body).height() + 30);
});
And I've tried:
$(document).ready(function() {
var theFrame = $('#saleInformationIframe', parent.document.body);
theFrame.height($(document.body).height() + 30);
});
And I tried:
$(document).ready(function() {
var theFrame = $('#saleInformationIframe', window.parent.document);
theFrame.height($(document.body).height() + 30);
});
Thanks in advance,
Jayde.
It looks like a local issue with Chrome Mac. I don't have a web server installed on the test mac but when I uploaded the files to a server and viewed it from there, everything appears to work.
Thanks,
Jayde.

Resources