HD button of video,js player - javascript

I need HD toggle/ON-OFF button for video.js player like in vimeo player. Do I have to make a custom button?

First of all you need to understand it's not merely just a button. Button is just a physical UI element that's used to switch between video source.
The concept is that you provided 2 different resolution videos as source to player and the button is used for selecting one of them. e.g if user selects HD, then the source of video changes to the video of better resolution or if it's SD then source changes to low resolution video.
Now coming to what you want to achieve, there's no default HD/SD video switching support in video.js (if my guess is right). You can use a plugin: There's this video-js-resolutions plugin by onyxrev - available on Github.
Use this plugin: https://github.com/vidcaster/video-js-resolutions
then you can change the css and JS to change the current style to a button that you want.
demo: http://vidcaster.github.io/video-js-resolutions/
I hope it helps.

Related

Custom YouTube player sizes + a custom fall-away overlay poster image?

I have been fine hitherto working with lightboxes and just simply having an image "button" to fire videos off, however some requirements have recently changed in one particular scenario.
I have a custom area on a page that has is contained within a news rotator area. I've eliminated the rotation and it is now effectively just a menu, however I need to both define a custom size for a YouTube video player (the two default sizes, sans full screen, are not appropriate). Consequently I have to figure out how to define a custom size in between and preferably HTML5, falling back to Flash.
Next, I need to have an overlay image that will fall out of the way to uncover the YouTube player once clicked and activate the play function without interaction.
What's the best process to follow here? I would prefer to use YouTube for several reasons over a custom HTML5 player (although there are nice options I've used).
A big bonus would be if I could leverage js to display another overlay image once the video has completed playing.
In the end I moved away from YouTube towards another solution. It's not free, but it is a superior solution.
However, saying that #PaulIrish had a suggestion that merits review: http://www.blogseye.com/i-make-plugins/youtube-poster-plugin/
The solution I ended up leveraging in the end is Wistia. They have a solid player + experience and the metrics are really nice. I appreciate the prompt reply from support so there's that personal human touch you completely miss from YouTube, and that alone is worth paying for to me.

smooth video transition HTML5

looking to use HTML5 video tag and JS. the aim is to make a video swap from one video to the next very smoothly just like a cut in the movie. I have had a look at the API
http://www.w3.org/TR/html5/video.html#tracklist
if anyone has an idea that would be great. My current plan is to familiarise myself with the API and figuare out how to que up the video for a smooth change. currently sellect a src and then play() causes an ugly white space pause before the next video comes in.
many thanks for looking
Use firefox and make hardware acceleration on. if you have good hardware it should work.
and you can also try this method, imagine if you have 5 videos to play and when you are in the 2nd video you can keep them by the video currently you are playing ,keep them on left and right sides and make them pause. when you move on to the 3nd video you can just get that relevant video and make it play. this method should eliminate any unnecessary lags.
HTML5 videos use a very low amount of CPU, so there's no reason you can't have multiple tags on the page at the same time. I would suggest having them all on the page and then using CSS and JavaScript to transition between them.
You won't be able to make this work on iOS since it doesn't allow playback to initialize without user interaction. The user will have to click to start each video.
Annoying, but that's how Apple rolls.

js flv player fullscreen option

I am developing my custom video control using jquery , javascript. for that i choose js flv player without any control bar,
so I almost developed its control bar and all the option using its listner javascript object, but now there is no full screen method in that js flv player.
any body know how can I control the full screen option, I am using the following flv player
flv-player.net
As per their FAQs:
Fullscreen only works with Flash Player newer than 9.0.16.
It is controlled by showfullscreen option which clearly mentions that it only works with Flash v9.0.16 or higher.
An alternative is to switch to FlowPlayer plugin. I've used it in a current project with great success. It provides many more options and supports mobile devices too (iPad etc).
Here's a Flowplayer demo for switching to fullscreen: Forcing to view the video in fullscreen mode
Another one: Custom Fullscreen action with overlay
The best player to use would be videojs. Really flexible. I have used it in one of my projects and i would recommend this for you. Got a full screen option by default. Uses js and no flash needed at all.
DEMO: http://so.devilmaycode.it/js-flv-player-fullscreen-option/
NOTE: as explaned by the author of the FLash Player here
Fullscreen only works with Flash Player newer than 9.0.16.
Fullscreen is not compatible with wmode transparency.
so we can at least simulate the full screen for those that not support it by using the $(document) width / height ( or whatever you want ) to fix the player size: and make use of the wmode property; this way you can use CSS position and z-index to display the controls over the flash player.
UTILS: Detecting Flash Player versions and embedding SWF files with SWFObject

How do I put a clickable image over a QuickTime video on a web page?

I have a website that runs on WordPress. There is a DIV in the header that contains an embedded QuickTime video (controls are turned off and need to stay like that). I have an image that is supposed to go over the video, and when the user clicks on it, the video should be revealed and play.
I think that if I messed around with the CSS and Javascript for long enough, I could make the image go away and revel the embedded video when clicked on, but I don't know how to make the video start on that same "onclick" event. Another note here: I prefer to use jQuery to do this, since that's what I usually work with. But whatever works works.
This is driving me crazy because I can't find any good information on how to do this! Thank you so much in advance for helping me out.
If you already have a DIV that contains the video, you can create another same-sized DIV that contains your image. Finally, set the image DIV with higher z-index and float it over the video DIV.
I think this should work.
There's really no good way to do this when rendering the video using the QuickTime plugin. Plugins are optimized for performance and typically render above the rest of the "native" elements within your page.
I seem to recall there's a wmode="transparent" attribute or "opaque" that was introduced recently to the plugin similar to what's used with the Flash plugin, but the performance will typically suffer because the plugin renderer will often need to switch to rendering in software as it composites the video with the element you have on top of it, and possibly elements beneath it as well.
The easiest thing to do is to simply use a video element to play the media you want on your page. At that point it is an element like any other on the page and interacts seamlessly with the z-index ordering of positioned elements.
An example of the usage is here: http://dev.opera.com/articles/view/introduction-html5-video/
You may need to nest differently encoded videos as video elements in the page so various user agents with support for different codes can play the video. But just adding the video element and pointing it at your current QuickTime video will work as well as a simple object using the QT plugin.

Is there a good wrapper for using Media Player in IE

I need to add media playback ability to a web application. It has to play audio and video, and the player has to be MS Media Player (shouldn't use any plugin non existent on a standard windows machine). I know I can add it directly as an ActiveX to IE, and control it with JavaScript. I wonder if there is some popular and good wrapper that will save me some of the work.
UPADTE: Having a way to easily embed the player on the page is cool. But I would like the interaction with the player to be managed too. Things I would like it to support:
Play
Pause
Stop
Load different media clip
Change volume
resize
Also I would like to be able to replace the default controls (visible in the Windows Media Player) with my own skinned controls.
Hey, this one should help:
http://malsup.com/jquery/media/
Flowplayer is also a good one: http://flowplayer.org/

Categories