We Keep Coding

Stopping a dynamically created Soundcloud oEmbed player when closing a modal

I am working on a webapp that allows people to share links from Soundcloud by copying and pasting the URL. Then the webapp generates a running list of people, allowing users to open a modal that loads the a Soundcloud player (via SC.oEmbed). The URL is derived from the element that opens up the modal. So SC.oEmbed opens up the URL found within the href attribute.
I have everything working great, except that when the modal is closed the music keeps playing.
There doesn't seem to be a stop() or pause() function associated with this player like there is with the Widget player. The only solution I have found is upon close to have SC.oEmbed open up another random soundcloud link but with auto_play off. This works but seems really inelegant and a waste of resources. There must be a better way no? Oh, and I'm using Twitter Bootstrap too.
Here's my jQuery code:
$(document).ready( function() {
SC.initialize({
client_id: "xxxxxxxxxxxxxxxxxx",
});
$("a[data-target='#myModal']").click(function(event) {
event.preventDefault(); /* makes sure <a> link doesn't actually open new window */
var url = this.href; // gets Soundcloud URL from href in <a> element
SC.oEmbed(url, { auto_play: false }, document.getElementById("audio_1_body"));
});
/* this part below is what I want to improve -- loading up a random track, just to stop playing of track that was loaded in the modal */
$("#myModal").on("hidden.bs.modal", function(){
url = "https://soundcloud.com/the-deep-dark-woods/sugar-mama-1";
SC.oEmbed(url, { auto_play: false }, document.getElementById("audio_1_body")); //this last part is what I want to improve
});

Does not seem that there is a way to do so from SC JS SDK.
Best you can do is to delete SC iframe:
$('#audio_1_body').html('')

Click event not triggering over youtube iframe in mobile safari

I’d like to place interaction controls above a youtube iframe video, and I got it working quite OK by just adding wmode=opaque as arguments and then position the elements absolute above the iframe.
My problem is that on mobile safari - the controls work fine first, but when I return from the fullscreen video, they are all disabled. It works fine on desktop though.
The HTML is basically:
<iframe src="http://www.youtube.com/embed/[ID]?wmode=opaque"></iframe>
<button id="btn">Click me</button>
And then the button is positioned absolute above the iframe.
For a demo, please visit this fiddle using your mobile safari: http://jsfiddle.net/SwGH5/embedded/result/
You’ll see that the button yields an alert when clicked. Now, play the video and click "done". Then try to click the button again...
If the movie was embedded using the <video> tag I could listen for a fullscreen-end event and do something, but now I’m stuck...
Here’s the fiddle: http://jsfiddle.net/SwGH5

So I played around with the iframe API a bit and found a solution. It's kind of hacky... but not really. When a user clicks on the video to play it, the document.activeElement becomes the iframe. When the user clicks the "done" button, the document.activeElement === document.body. So when the video starts playing, we periodically check to see if the active element returns to the body. At that point, the only solution I found was to redraw the iframe. In the example, I destroy() the video and recreate it using the iframe API. I also tried cloning the iframe and replacing it with success (I left that code there so you could see it):
http://jsfiddle.net/ryanwheale/SwGH5/105/
It's not the best solution, but it works. Also, to give an explanation of what [I think] is happening - iOS hijacks any video content (Safari or Chrome) and plays it using the native video player. Any type of OS functionality like this takes place "over" the browser if you will - higher than any z-index... completely outside the browser. When the user clicks "done" the native player kind of zooms out as if it is re-implanting itself on the page. My best guess is that the native player is still hanging out "over" the browser... thus making anything underneath it inaccessible. The fact that the button appears to be on top is just an anomaly... for lack of better description.

EDIT: Ryan Wheale's solution is a better workaround to this problem and will work in most cases.
From Apple’s documentation:
On iOS-based devices with small screens—such as iPhone and iPod touch—video always plays in fullscreen mode, so the canvas cannot be superimposed on playing video. On iOS-based devices with larger screens, such as iPad, you can superimpose canvas graphics on playing video, just as you can on the desktop.
Same goes for a "played video" either. This article clearly states it's not possible.
Workaround:
You could detach and re-attach the iframe element on webkitfullscreenchange. But it won't work for a foreign iframe. Browser will not allow you to manipulate iframe DOM bec. of the cross-domain policy. And even if it did, you could only hide the video overlay to reach your button anyway.
So, the only solution is watching for YT.PlayerState.ENDED state via YouTube iFrame API and then destroying and re-creating the player. But don't worry it plays smooth.
window.onYouTubeIframeAPIReady = function () {
var video = {
player: null,
create: function () {
// first destroy if we already have the player
if (video.player) { video.player.destroy(); }
// create the player
video.player = new YT.Player('ytp', {
videoId: '9u_hp7zPir0',
width: '620',
height: '290',
events: {
'onStateChange': video.onStateChange
}
});
},
onStateChange: function (event) {
// YT.PlayerState.ENDED » exiting full screen
if (event.data === 0) { video.create(); }
}
};
video.create();
};
Here is the working fiddle.

If you can't get it to work with the regular iframe, you might want to consider using mediaelement.js - which can wrap the Youtube API in a HTML5 Media API wrapper. That works fine on safari on ios - try the Youtube example at mediaelementjs.com.
All you need to do is to add the mejs js/css and put your youtube video as source in your video tag, here is some example markup taken from mediaelementjs.com:
<script src="jquery.js"></script>
<script src="mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="mediaelementplayer.css" />
<video width="640" height="360" id="player1" preload="none">
<source type="video/youtube" src="http://www.youtube.com/watch?v=nOEw9iiopwI" />
</video>
Then start the player like so:
jQuery(document).ready(function($) {
$('#player1').mediaelementplayer();
});
If you want to add your button ontop of the mejs player it will work fine, just set the z-index high enough. If you want a regular play button you could also consider styling the existing one that comes with mejs.

By the comments from #CullenJ's answer, possibly it might be due to some problem in iOS device browsers not triggering the click event on iframe elements. In that case, you would have to change from:
document.getElementById('btn').onclick = function() {
alert('clicked');
}
To something like this (as answered by #smnh):
$('#btn').on('click tap touchstart', function() {
alert('clicked');
});

Lightbox trigger event to click space or mouse left click

I have the follow script to load the lightbox,
$(document).ready(function(){
$('.TESTER123').nivoLightbox({
effect: 'fade',theme: 'default',
beforeShowLightbox: function(){
$('.TESTER123').hide()
},
afterHideLightbox: function(){
$('.TESTER123').show();
},
beforeHideLightbox: function(){
var e = jQuery.Event("keydown", { keyCode: 1 });
jQuery(".nivo-lightbox-content").trigger( e );
}
});
});
in the beforeHideLightbox function, I want to to generate a mouse left click event or space key press event so that when I close the lightbox window the video should pause playing, currently it keeps playing in the background. So I want to genenrate 1 of these two events inside the video frame that is the .nivo-lightbox-content or in center of the screen since the video will always be at the center.
Thanks in advance

I have faced this situation only on IE. on other browser it will automatically stop the video when lightbox closes or removed.
For IE, if it is a custom flash player you should create a function inside flash player to stop the video and trigger that function inside flash player using js.
If you are embedding youtube player, you cannot use direct embedding code. you should go for youtube api, so that you can control the player using js.

Problem is with the plugin nivo lightbox. When you click outside the video container is not removed from the page, instead it just fades out, so why the video is playing inside the faded out div.
Something wrong with plugin, since its compressed unable to show which line. Instead you can use plugin like this http://www.jacklmoore.com/colorbox/example1/

Play an SWF when a javascript button is clicked

I'm new to Javascript and to Flash, and I'm developing a browser Flash video recorder.
Right now, when I direct my browser to a certain URL, it asks for permission to access the webcam and starts recording - and streaming to a Red5 server on Ubuntu.
I now need to add a javascript button, which when clicked will start the recording, and when clicked again, will stop it. Can someone tell me how to play the .swf file only when the button is clicked? And how to stop playing it when the button is clicked again?
Thanks.

As Pete said, ExternalInterface is certainly what's needed to make function calls between a SWF and the surrounding HTML page.
You can also use swfobject to do cross-browser compatible SWF embedding/loading into a page dynamically.
I've made a little demo of the two features you're looking for here: http://akineticblog.com/fl/ExtIntDemo/index.html
The AS3 code for this is:
import flash.external.ExternalInterface;
var recording:Boolean = false;
//These are two TextFields instantiated on the stage as visual indicators
recordingTF.visible = false;
notRecordingTF.visible = true;
function recording_toggle():void {
recording = ! recording;
//Your actual record start/stop code would go here//
recordingTF.visible = recording;
notRecordingTF.visible = ! recording;
}
if (ExternalInterface.available) {
//This registers the AS3-side function to the JS-side reference
ExternalInterface.addCallback("recording_toggle", recording_toggle);
}
For the HTML/JS side, you can check the page source of the above link, but the main parts are:
function swf_load() {
swfobject.embedSWF("ExtIntDemo.swf", "flashMovie", "500", "250", "10.1", "swf/expressinstall.swf", flashvars, params, attributes);
};
- to be called when you want to load in the SWF, replacing a div with the id 'flashMovie'.
And:
<button onclick="flashMovie.recording_toggle()">Toggle recording</button>
to send the 'recording_toggle' function call into the SWF itself.

You can use ExternalInterface to communicate between JavaScript and AS3. After that it's just a case of making the button call the AS3 functions to you want to perform.

Auto-Full Screen for a Youtube embed

I have a Youtube video embeded on a webpage.
Is it possible to have the video go full screen when the user presses play, using the HTML5 iframe with Youtube's API?
Using the Chromeless player is not an option as the website is intended for iPads.

Update November 2013: this is possible - real fullscreen, not full window, with the following technique. As #chrisg says, the YouTube JS API does not have a 'fullscreen by default' option.
Create a custom play button
Use YouTube JS API to play video
Use HTML5 fullscreen API to make element fullscreen
Here's the code.
var $ = document.querySelector.bind(document);
// Once the user clicks a custom fullscreen button
$(playButtonClass).addEventListener('click', function(){
// Play video and go fullscreen
player.playVideo();
var playerElement = $(playerWrapperClass);
var requestFullScreen = playerElement.requestFullScreen || playerElement.mozRequestFullScreen || playerElement.webkitRequestFullScreen;
if (requestFullScreen) {
requestFullScreen.bind(playerElement)();
}
})

This isn't possible with the youtube embed code or the youtube javascript API as far as I know. You would have to write your own player to have this functionality.
Doing some reading it looks like you can use the chromeless youtube player and it will resize itself to the width and height of its parent element.
That means that if you use the chromeless player you can resize the div with javascript with the play event is triggered.

No, this isn't possible, due to security concerns.
The end user has to do something to initiate fullscreen.
If you were to run an Adobe AIR application, you can automate the fullscreen activation w/o having end user do anything. But then it would be a desktop application, not a webpage.

I thought I would post an easier updated method to solving this one using html5.
.ytfullscreen is the name of the button or whatever you want clicked.
#yrc-player-frame-0 is going to be the name of your iframe.
jQuery(".ytfullscreen").click(function () {
var e = document.getElementById("yrc-player-frame-0");
if (e.requestFullscreen) {
e.requestFullscreen();
} else if (e.webkitRequestFullscreen) {
e.webkitRequestFullscreen();
} else if (e.mozRequestFullScreen) {
e.mozRequestFullScreen();
} else if (e.msRequestFullscreen) {
e.msRequestFullscreen();
}
});