I am using the SoundCloud's javascript library to setup some external controls for an embedded player on my site. The play/pause and skip buttons work across all the browsers I've tested (lets leave mobile for another question). I also have wired up a FINISH listener to automatically skip the player to a new track. This works on Chrome and Firefox but it seems the event is never triggered on Safari. I will try to pull out the relevant parts of the code and leave out what I believe to be superfluous. Please feel free to ask for clarification or more details.
Thanks!
<div id=playlist-player">
<iframe id="sc-ilovemakonnen-tuesday-feat-drake" class="player-iframe" width="100%" height="120" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/162777996&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
initializeSoundCloudPlayer: (post) ->
playerIframe = document.getElementById("sc-"+post.slug)
#player = SC.Widget(playerIframe)
#player.bind(SC.Widget.Events.READY, () =>
#player.unbind(SC.Widget.Events.FINISH)
#player.bind(SC.Widget.Events.FINISH, () =>
#skip("forward", true)
)
)
So the take home message, as I see it, is that #skip() method never runs on safari, so I suppose the FINISH event is never triggered.
I have read other places that there were problems with some events not being triggered when the autoplay option was true in the embed code but I have this issue with or without autoplay being true.
Related
Should both of these code blocks be used?
Should only one code block be used? If so, which one?
code per video.js
<video
id="my-player"
class="video-js"
controls
preload="auto"
poster="//vjs.zencdn.net/v/oceans.png"
data-setup='{}'>
<source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
<source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
<source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">
supports HTML5 video
</a>
</p>
</video>
code per amp-video-iframe
function onAmpIntegrationReady(ampIntegration) {
var myVideo = document.querySelector('#my-video');
ampIntegration.listenTo('videojs', myVideo);
}
amp-video-iframe is not supported by amp-story. The supported tags, depend on what type of layer you are using, but for amp-story-grid-layer they can be found here. Notably, if you are looking to play video, amp-video is currently the only way to do it. Since amp-video-iframe supports AMP's video interface, you can see this GitHub issue to track the implementation/support for this feature.
But, to answer your question (as it is relevant for AMP pages that are not stories): both snippets are necessary. The first code snippet adds the video to the page, while the second code snippet listens for events like play and pause to communicate them back and forth to the AMP runtime. Note that you'll need to make sure that the IDs are the same (in the code you've posted, the HTML refers to the video by the ID my-player, while the JS refers to the video by the ID my-video).
I have literally just copy & pasted the code from the YouTube developer page YouTube Player API Reference for iframe Embeds (from underneath the heading "Getting Started"). The only difference, is that I added an alert to fire when the state changed, because I thought I was doing something wrong within the onPlayerStateChange function.
You can see the jsFiddle at http://jsfiddle.net/jesMv/.
As stated, it's just an exact copy of the code from the YouTube developer page with the added
alert('State Changed')
as the first thing to fire in the onPlayerStateChange function.
Nothing is happening, however... No matter how I look at this and what I change, I simply can't get the onStateChange to do anything.
How can I fix this problem?
There was a temporary issue with the iFrame Player API (which was fixed in June 2013) that you can read about here: https://code.google.com/p/gdata-issues/issues/detail?id=4706
Jeff Posnick posted a temporary workaround here:
http://jsfiddle.net/jeffposnick/yhWsG/3/
As a temporary fix, you just need to add the event listener within the onReady event:
function onReady() {
player.addEventListener('onStateChange', function(e) {
console.log('State is:', e.data);
});
}
Make sure to remove the onStateChange event from the YT.PLAYER constructor (see the jsfiddle).
Also, as someone mentioned on the Google Code Issue Thread, you set an interval and poll the player for its current state instead of listening for the onStateChange event. Here is an example code snippet for doing that:
setInterval( function() {
var state = player.getPlayerState();
if ( playerState !== state ) {
onPlayerStateChange( {
data: state
});
}
}, 10);
Firefox and IE Issues
Other people have mentioned that Firefox will not instantiate the YouTube Player if it is placed in a container with the css property display: none. Internet Explorer will also not work with visibility: hidden. If you're finding this to be the issue, try positioning the container off the page with something like left: -150%.
Steve Meisner talks about this here: YouTube API does not appear to load in Firefox, IFrame gets loaded , but the onPlayerReady event never fires?
And another related SO question: YouTube iframe API - onReady and onStateChanged events not firing in IE9
Edit: I've edited this answer to be more thorough because people are still seeing this error after the original bug was fixed in 2013.
onStateChange does not work in any version of Internet Explorer or Edge. I assume it will begin working once Microsoft moves Edge over to being Chromium-based. But whether IE9, 11, or Edge, I cannot get this event to fire, even when it fires cleanly in Chrome, identical code.
I have Google's re-captcha implemented and working in Chrome perfectly (AJAX APIs). IE is the problem...
I have: localhost://myapp/index.html and a link for Forgot your password. When this link is clicked jQuery click handler is called. Handler function changes the div's content and also calls for Recaptcha.create(...) The widget is displayed correctly and works as expected in Chrome, but in IE if I click on reload icon or the sound button it reloads the whole page.
If I manually call for Recaptcha.reload() it reloads without any problem ?!
HTML I have is:
<div id="recaptcha" style="width:120px"></div>
[...]
<script type="text/javascript" src="https://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
[...]
//In a jquery click handler I call
Recaptcha.create("6LxxxxxxxxxxxxxxxxxxxxxxIrpV5RO8P",
"recaptcha",
{
theme:'white',
callback: Recaptcha.focus_response_field
}
);
So far so good... Captcha gets loaded well in all browsers. In IE8 and 9 when I click the widgets buttons for reload and mp3 version the whole page gets reloaded
I tried changing http for https and vice-versa, but still without any luck...
When Recaptcha.create(); is called, Google's re-captcha RELOAD and IMAGE/TEXT buttons' code looks something like this:
<a href="javascript:Recaptcha.reload();">
and I don't know why the page gets reloaded in my app in IE when the button is pressed and in the demo Google provided DEMO it sends a async request...
Since I can't change the javascript in href attribute I had to add a onclick handler in jQuery $(document).ready();
My solution was this:
$("#recaptcha).on("click", "id_of_the_reload_button", function(e){
e.preventDEfault();
Recaptcha.reload();
});
I basically blocked the natural behavior of the anchor google provides and called the reload() function myself.
I've never found out what was causing my page to reload in the first place
I have a modal window using jqmodal. I need a button within that modal to load a different page in the modal. I have this functioning in all browsers except safari.
JS
<script language="javascript">
function shipCalc() {
$('.jqmWindow').load("/ash/shop/shipping.php");
}
</script>
HTML
<form name="form9" id="form9" method="post">
Zip: <input type="text" size="5" name="zip">
<a href="#" id="submitbtn" onclick= "shipCalc();" >zip</a>
</form>
KEEP IN MIND! The class .jqmWindow is a modal window using the jqmodal jquery plugin. It is NOT just a div on a page. I am using the method .load() to change what has been loaded in the modal window after it has popped up. The html shown above is inside the page that is originally loaded in the modal. I am having trouble understanding why this works in all browsers besides safari. I posted earlier and got some responses that weren't quite addressing the real problem here, which is that I can not use the .load() method to load anything into my modal window in safari. (Ive stripped some non-important information regarding future modifications I will make to further make this suite the needs of the site, just to keep this nice and simple to understand...)
function shipCalc() needed to be on both the initial page AND the page that gets loaded into the modal for safari to load everything properly. All other browsers did not require that. All is working now, so I figured I would post my own answer in case anyone was ever searching for something similar!
I have decided to have some fun with VB.NET and make a bot for some online games.
First of all, I plan on viewing the game through a webview control, which I believe is perfectly possible... unless I can't see Flash/Java content?
If it is possible, I've been wondering how would you "simulate a click" in the web view control? And, of course, keyboard input?
Perhaps a little late and I have no experience with VB.NET but to work with keys on a web page you need to use Javascript. For example:
<html>
<head>
<script>
document.onkeyup = function(event){ console.log(event); };
</script>
</head>
<body>
press a key within this document.
</body>
</html>
Cursor keys don't generate a keypress event hence the use of onkeyup. Also note it's lowercase. onKeyUp is not correct. If you're using Chrome or Firefox console.log will output the object that you can inspect. Not sure about IE but I think later versions support this too. Properties and methods can be used to get the keycode, character and any modifiers.
This code was tested on Chrome 12 beta. There are differences between IE and other browsers (as usual). This page shows an example of some of the differences: http://www.w3schools.com/jsref/event_onkeypress.asp
Not sure what you mean by "simulate a click" but I suspect you're not referring to testing.
Try for WatiN, its like testing a web application