If you look in soundcloud you'll notice that when you play a song it plays in the main content of the page as well as a 'footer' player. I'm trying to achieve something similar, with jplayer or soundmanager. My main content of my pages are ajaxed while the footer stays consistent to support the continious player of the website.
But my question is, how do you play music from the ajaxed footer player while animating the main content player and having seek functions on both?
With jPlayer I assume you would need to listen for $.jPlayer.event.play, $.jPlayer.event.pause, $.jPlayer.event.ended, $.jPlayer.event.seeked in your main player and update secondary interface.
You may need to create secondary interface yourself (play/pause buttons, seek bar, etc) and add event handlers for them passing corresponding parameters to the main player.
Related
If you go here (link: https://yle.fi/uutiset/3-11555155) and scroll down this news article, you will see there is a rather long background video that plays as you scroll showcasing some nodes and boxes. However the initial page load is very fast and I don't see it loading a video from anywhere at all.
As I try to understand how this website is put together, I'm not able to see where the video comes from, nor do I know if it's an .mp4 or some other format. When I try to hunt it down in my network tab and monitor if it loads, I just cannot see it and there is no resource that seems to be more than a couple of hundred kilobytes.
How is this possible from a web-design standpoint? Is it some sort of a proprietary solution that stealthily streams the video as it is loaded? If I would like to build a background video that plays on scroll like this in such a performant manner, how could I do it?
Such videos that play on scroll can often be seen for example on the apple.com website, but at least there I can easily also see the original source videos and materials of how the page is put together. Here this is not the case.
I would greatly appreciate if you could answer this super basic question I have. Thank you!
My goal is to create some simple dice games, that show a more involved scoreboard and all other players on the main screen, but a general status of whose turn it is and scoreboard on the controller when it's not the players turn. That way you wouldn't need to see the main screen in order to play, but the main screen would still add value if you could see it. Anyone have any input on this?
This is generally possible, yes. Your question is very vague and the answer depends on what tools you intend to work with. Unity WebGL cannot be rendered on phones so far, but if you use JS based game creation tools, you can show whatever you like on the controller and main screen.
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 have a subclass of CAOpenGLLayer that is using, manipulating and displaying frames from an AVPlayer. I want to add playback controls to this layer, but I need to forward events from the playback controls to the AVPlayer. I have found a few examples of how to add familiar playback controls, like AVPlayerView, but all of them require me to pass in an actual movie file when what I want is just the interface that I can write custom delegates for. Any ideas?
There are currently no built in, ready to use, playback controls that you can attach your own targets and actions to. You'll need to roll out your own UI if you are rendering things by yourself.
If you are feeling sneaky though, you might be able to add your layer (in a view) to the AVPlayerView, remove the output that AVPlayerView adds from your player item, add your own video output, and let the AVPlayerLayer take control of the playback.
How do I automatically expand an embedded youtube video when the user presses play?
The situation:
- For various reasons the ideal layout of the webpage mans that the video player must appear initially at a small size (let's say 480x385) when the user arrives on the page
- The video being shown contains some detail and is difficult to watch at 480x385
- Right now the user must click on the "full-screen" icon which comes standard in every youtube video player. This is irritating to many people.
The desired solution:
- When users click on the video to play it, the player automatically expands to a more reasonable size (e.g., 640x385 or 853x505) and plays at that size
- The video could be played in a modal overlay, but other solutions would be welcome as well
- Upon completion of the video, the expanded view should automatically disappear and the video should appear in it's original size on the page
You basically need two things:
The ability to detect when the the video is playing. You should be able to figure that out from this YouTube example.
Resize the player by changing the height and width properties of the "object" node that contains the player.