Difference between native html5 video player and any other - javascript

I was reading html5 video tutorial which suggested to use some player for html5 <video> tag such as JW player, Projektor, videojs, etc.
I know even if I don't use a player such as these, a player is drawn (in supported browsers) when using <video> tag.
So what exactly is difference between or pros and cons of third party player (for example videojs player) over native html5 player ?

The promise of HTML5 video at least to me, is avoiding all this horrible Flash setup and Javascript, and making the browser do all the heavy lifting.
Unfortunately using something simple like:
<video controls src="http://static.natalian.org/2012-01-18/MVI_0123.ogg" />
Is not enough. You are missing features like hooking into the fullscreen API which is different across browsers and hence you probably need to rely on these 3rd party libraries to take away the pain.

One obvious one is that you'll have more control over how it looks--you'll be able to have it match your site's design.
Also, it makes sure your site looks consistent in different browsers.

The only reason I could think of is UI consistency across browsers. Every browser implements their video player differently so something like JW Player makes it look and feel the same.

Related

JWPlayer vs Custom Player

I'm playing around with HTML5 videos and front end work. I'm wondering, why use JWPlayer or any other plugin instead of (extensively) creating your own? Other than it being less work.
Browsers, devices, advertising standards, etc are constantly changing, making it essentially impossible to responsibly keep up with the rapidly moving market AND continue to develop on top of the player (which, if you look at building a player from a macro perspective, is where the work really begins).
In short, using a product like JW Player gives you all of those benefits on top of the <video> tag without requiring you to become an expert in video engineering.

How to perfectly sync two or more html5 video tags?

Is there any way to have two or more (preferably three) html5 < video > tags playing simultaneously and to be in perfect sync.
If I have let's say three tiles of one video and I want them to appear in browser as one big video. They need to be perfectly synchronized. Without even smallest visual/vertical hint that they are tiled.
Unfortunately I cannot use MediaController because it is not supported well enough.
I've tried some workouts, including canvases, but I still get visual differentiation. Has anyone had any similar problem/solution?
Disclaimer: I'm not a video guy, but here are some thoughts anyway.
If they need to be absolutely perfect...you are fighting several problems at once:
A device might not be powerful enough to acquire, synchronize and render 3 streams at once.
Even if #1 is solved, a device is never totally dedicated to your task. For example, it might pause for garbage collection between processing stream#1 and stream#2--resulting in dropped/unsynchronized frames.
So to give yourself the best chance at perfection, you should first merge your 3 videos into 1 vertical video in the studio (or using studio software).
Then you can use the extended clipping properties of canvas context.drawImage to break each single frame into 2-3 separate frames.
Additionally, buffer a few frames you acquire on the stream (this goes without saying!).
Use requestAnimationFrame (RAF) to control the drawing. RAF does a fairly good job of drawing frames when system resources are available and delaying frames when system resources are lacking.
Your result won't be perfect, but they will be synchronized. You will always have to make the decision whether to drop or delay frames when system resources are unavailable, but at least the frames you do present will be synchronized.
As far as I know it's currently impossible to play HTML5 video frame-by-frame, or seek to a frame accurate time-code. The nearest seek seems to be precise to roughly 1-second.
But you can still get pretty close using the some of the media frameworks:
Popcorn.js library made for synchronizing video with content.
mediagroup.js another library used to add support for mediagroup attributes on HTML5 media elements
The only feature that allowed that is named mediaGroup and it was removed from Chrome(apparently for not being popular enough). It's still present in WebKit. Relevant discussion here and here.
I think you can implement you own "mediagroup"-like tag using wasm though without DOM support it may be tricky.

Adjust playback speed of videos in a browser

There is a program at enounce.com that it will increase the play speed of a video in a browser. I think that 95% of videos on the internet run on flash therefore this tool can be useful. I am wondering how that program was created. Maybe they modify the html source in the browser? perhaps it looks for the swf video playing on your browser and it injects some JavaScript on that html element to increase the speed. I been researching on Google and I think it is possible to alter the playback speed of a video with JavaScript. If it is not modifying the html page then it will be nice to at least know how this can be achieved. Also if a video plays on your browser it has to be saved somewhere in your computer I believe. That's why you can seek back and forth once the video finished downloading. why is it that it is almost impossible to find it and the only way of getting that video will be by capturing the packages with a package sniffer? anyways that is not my question I am just really curious on how that program achieves doing what it does. it speeds up everything even Pandora songs.
MySpeed seems to intercept the media stream coming from the server into the Flash player that sits in your browser. It changes the speed on the fly, and sends the result to the Flash player.
PS: If you need to control the playing speed of your own videos I recommend looking into the VLC Browser Plug-in, or the QuickTime player, which also has very good speed control features (from Javascript). Or you could use the HTML5 <video> tag.
Afaik, Flash-based players like Longtail/JWPlayer and Nonverbla don't have very good support for this.

Soundcloud (javaScript) custom player create spectrum analyzer

I'm implementing the Soundcloud custom player ( https://github.com/soundcloud/soundcloud-custom-player ) on my site.
I would like to create a spectrum analyzer which moves based on the sound.
I really don't have any idea as to where to start or if it even is possible at all.
Please check out my site to see what I mean: http://dev.upcoming-djs.com
At the right side you see the player and when you click on play it starts playing and the equalizer starts moving.
This is currently a fake effect, but I want it to move with the sound.
All suggestions and/or help is of course much appreciated.
Added my comment as an answer:
You might want to look into the HTML5 Audio Data API. Other than that, you're going to need Flash if you want a legit spectrum analyzer (which, by the way, is what you're asking for. not an equalizer).
Edit:
For anyone interested, I have a quick and dirty demo here: http://kevincennis.com/audio/ (Chrome only)
Source is un-minified, but not particularly well commented. Feel free to steal whatever you want.
The simple answer is this can not be done just using javascript.
Your options are to use to a plugin like flash which has a extensive audio API and is installed on a large percentage of web users browsers as a plugin or to look into the experimental HTML5 audio API.
hope this helps
Sound manager 2
Take a look at
http://www.schillmania.com/projects/soundmanager2/demo/360-player/canvas-visualization.html#hifi=1
I wrote a article about this, if you are interested. http://www.flobii-cc.com/2011/04/simple-fft-web-visualization.html
I used the SoundManager2- API ( need flash) to get the spectrum data and HTML5 Canvas to visualize them.
(The HTML5 Audio API is limited to only a few browsers)

Dreamweaver CS4 - .flv player preloader

Is it possible to show how many % of the video is loaded?
I just need a simple string like: 32% loaded...
(I use non-streaming (progressive loading))
The FLV player that is built in, you can pretty much only do what you see, so displaying the % loaded, if not already displayed in the skin itself, is either not supported, or not documented. You can make your own skin http://www.adobe.com/devnet/flash/articles/flvplayback_programming.html or use one of the many other available options http://www.google.com/search?q=flv+player, or try the Widget Browser version (which should be CS4 compatible) of the HTML5 Video Player Widget, and that player is based on the following http://www.kaltura.org/project/HTML5_Video_Player it is theme-able. I've not seen a way to show the percentage yet, but perhaps their docs show how to do it.
There is another reference for talking back and forth between Flash and JavaScript, http://kb2.adobe.com/cps/156/tn_15683.html, but you'd need to know what to call, and again, the built in player doesn't appear to be documented well, at least from external interaction, or modifications of the skins themselves.
I know this is not dreamweaver player and it doesn't show %, but this is what I use in my projects http://www.longtailvideo.com/players/
It is a pretty cool player.

Categories