I use SWFObject 2.2 to play sounds for an AJAX based game I have made. I used to use SWFObject 1, and everything worked fine, but when I updated my game, I updated to 2.2. Now, when users try to listen to music on Youtube or Pandora in another tab on Firefox while playing the game, they can't unless they have that tab selected.
What is interesting is that the video doesn't stop playing, just the sound stops working. I run the following javascript in order to stop the sound effect in my flash file, and it seems to stop the sound at the exact same time on Youtube or Pandora:
$('myflashid').doStop();
The following is the actionscript used for my flash file:
import flash.external.ExternalInterface;
snd=new Sound();
snd.attachSound("MySound1");
ExternalInterface.addCallback( "doPlay", this, doPlay );
ExternalInterface.addCallback( "doStop", this, doStop );
function doPlay() {
snd.start();
}
function doStop() {
snd.stop();
}
I am not sure why this fixes it, but if I set the volume to 0 instead of doing snd.stop(); and then set the volume back to 100 when I start it again, it seems to work fine.
Related
The following is the way I load a video (in the actual code, the variables are member variables of the player class). I do not want the video to be played right away which is the reason I use prepareMedia(). When the application is ready to play the video, I call player.play().
However, my player view (I add EmbeddedMediaPlayerComponent to JPanel which is set as ContentPane of a JFrame) still shows the old video after running the following code with a new "videoPath" value. The player view shows the new video only after I call player.play().
EmbeddedMediaPlayerComponent mediaPlayerComponent = new EmbeddedMediaPlayerComponent();
MediaPlayer player = mediaPlayerComponent.getMediaPlayer();
player.prepareMedia(videoPath);
Is there any way I can get the player to show the new video image (or at least removing the old video image) without starting to play it? I tried calling methods such as repaint() from mediaPlayerComponent, stop() from player, in the overrided MediaPlayerEventAdpater methods such as mediaFreed(), but nothing I tried so far work.
It is a feature of VLC/LibVLC that the final frame of the video is displayed when the video ends, so you have to find a workaround.
A good solution is to use a CardLayout with two views, one for the media player component (or the Canvas used for the video surface) and another view simply with a blank (black) JPanel.
The idea then is to listen for the video starting/stopping/finishing and show the appropriate view in your card layout.
If you add a MediaPlayerEventListener and implement the playing, stopped, finished and error events you should cover all cases.
For example: in the "playing" event you switch your card layout to show the video view, in the "stopped", "finished" and "error" events you switch your card layout to show the blank view.
The view doesn't have to be black of course, you can do whatever you want like show an image.
Also note that the media player events will NOT be delivered on the Swing Event Dispatch Thread, so you will need to use SwingUtilities#invokeLater to properly switch your view.
I've had a scan through previous questions and can't seem to find anything about adding a YouTube video to a page and having it auto play without effecting page load speeds. Is there anyway to allow the full content of the page to carry on loading without the Video creating a bottle neck situation?
It will depend on the device and browser but on a laptop, using the HTML5 video mechanism your page will continue to load while the video starts on most OS's and browsers, without you having to do any complicated ordering.
The video is streamed, which in practice means small chunks are requested at a time, so there is no delay waiting for the full video to download. Most browsers will implement this playback in a way that does not interfere with the rest of the page download and display - e.g. in a separate thread, and even sometimes mostly in the device HW itself.
On a mobile device things are different - many mobile devices will not allow autoplay at all. They implement this restriction protect to the user from incurring excessive charges on mobile data plans.
Many mobile deices will also force the video to play full screen when it does play - this tends to be on a device by device basis. For example iPhones play videos full screen but larger iPad's will allow it inline in the web page (this is an ever changing playing field so its worth checking the status with the latest release if you are interested in a particular device).
Searching around on line I came across this little bit of javascript, and an amend to the YouTube embed code which helped.
<iframe width="854" height="480" src="" data-src="https://www.youtube.com/embed/ihhAswAsg8c?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
Notice how the src="" is empty and the url has been put inside a data-src="" instead. Then add the following javascript.
$(document).ready(function() {
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
}
}
}
window.onload = init;
});
This will then stop the iframe from automatically making lots of http requests until the rest of the page has finished loading.
I'm trying to create multiple swiffy.Stage() movies on one page.
But it seems that when there are multiple Flash movies on a page, only one of the movies will actually run as it should. I have to call their stage.tick functions manually.
EDIT: With multiple sound containing flash, only one will play correctly.
EDIT:
The expected behavior is that "tick()" is handled by the Swiffy runtime after running "start()". Unfortunately it seems that the Swiffy runtime will only handle the tick function for one movie per page.
Found that the issue was not multiple movies, but that some of the movies were not on the screen or invisible, and so were not being rendered by Chrome. It seems that Chrome optimizes away draws that aren't visible.
I am using a video background plugin on this site http://kimcolemanprojects.com/index.html
Its works great on all browsers, only on chrome the video doesn't show until the user clicks on the screen, which is just a white screen.
Looks like its bound to a click event but I can not work out where. I can see no events bound to this page.
Thanks for your help.
Angela
This is a strange one indeed. It only happens for me when I open your site in a background tab. There are definitely no click handlers. (See "Event Listener Breakpoints" in dev tools.) And the video element does exist and is loaded, even though it's not displaying. So I suspect it's either a bug in Chrome or a quirk in how it handles certain slow-loading pages.
One thing that seems to make it show up is to tweak the CSS in the developer tools. So try adding this to your page at the end of the body element:
<script>
$(document).ready(function() {
setTimeout(function() {
document.getElementsByTagName('video')[0].style.display = '';
}, 500);
});
</script>
That works for me when I run it in the console, so hopefully it will work in script.
Also, there are a few easy things you can do to make the page load much faster and mitigate this particular problem, even if you can't make it go away completely.
Set a dark background color. That way, when the video takes some time to load, people will be able to see the white text immediately.
Make the video MUCH smaller. It's about 21MB, which is way too big for a background. It's encoded at around 3400kb per second, which is more than you need even for HD video on the web. Try it at 1000kb or even less. Maybe 500kb. And don't include an audio track in the video file.
Save the poster image as a jpg instead of png. It's 140kb. You can get it much smaller.
Put all your scripts (except for the mobile redirect) at the bottom of the body tag. This way you can at least get the text and background color displaying without having to load your scripts.
I'm coding an app around video content and am currently playing around with HTML5's fullscreen API (I know it is still in very early stage).
Because of what my application does, the video itself isn't the only part that goes fullscreen: several elements alongside go fullscreen too, and I have noticed a great drop in performance there. The video streams ok, but other graphical elements suddenly get painfully slow. For example, a hover style typically takes about a good half second before showing up. A simple change in subtitles (I use popcorn.js) causes the video to freeze for a fraction of a second.
Any one knows why this is so? Do you experience the same? Thanks for your precious feedback.