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.
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!
In a video.js player, I want to display information on the currently played video as an videojs-overlay whenever the user is active (moving the mouse over the video) and hide the information when the user is inactive (not moving the mouse over the video).
I set videojs-overlay to listen to the useractive and userinactive events like this:
player.overlay({
content: 'Default overlay content',
debug: true,
overlays: [{
content: 'The user is active!',
start: 'useractive',
end: 'userinactive'
}]
});
Unfortunately, the overlay is not triggered at first, but then, it starts working after the video is playing for ca. 1 minute.
Is there a problem with my setup, or might this be a bug in videojs or videojs-overlay? What can I do to debug this?
Video.JS already keeps track of the user active state using CSS classes. An example of this can be found in the videojs-dock plugin. It uses the vjs-user-inactive and vjs-user-active CSS classes to control showing or hiding a dock or tray over the video that can be used to display information such as a title or description for the video. You may be able to use this as inspiration for your overlay.
Please let me know if you have any additional questions.
Disclaimer: I am employed by Brightcove.
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.
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.
i'm new to windows phone 8 and need your help to capture screen activities in a video. I've to make a video of the activities performing on screen?
one solution to this that strike in me is to capture the screen in image form by dispatching a timer at a instance of time but this is not a right way to do as i've to make a video of screen activities? suggest your opinion how to handle this problem.
There's no built in way of doing what you want.
You will need two things:
Do a dispatch timer as you describe
Find code that will encode these frames into a movie. That's not an API that the phone supports - you will need to find existing code and use it. I am not aware of such code existing, but I have only looked for it once or twice and not very hard. You could, potentially, create an MJPG which is a fairly simple video format, but even that's not trivial and the ending file size can be prohibitive.