I'm trying to develop a unified video player, with a single standards-based UI that interfaces via JS to either a HTML5 <video> element or a "dumb", chromeless Flash player.
This Flash player would probably be implemented with the VideoDisplay class.
The only requirement besides playing AVC/MP4 videos is that it would have a JavaScript interface for methods (play, pause, seek) and events (onPlay, onPause, onTimeUpdate). Extra points if it mimics the <video> interface.
Does such a player exist? I assumed it would be easy to find, but I've been googling for longer than I care to admit, and I've clicked every link in the "Similar Questions" sidebar (on the "Ask Question" page). If I were a competent Flash developer, I'd certainly do it myself, but I'm trying not to invest time learning Flash/AS.
Thanks for your consideration.
Check out mediaelementjs.com. Note that they do provide a player UI (built w/ DOM elements & CSS), but read down the page — it's also designed to be used without their player, as an object that will simply provide a Flash (or Silverlight) instance when HTML5 media elements aren't available (due to either the browser itself or just the codec support), and it does mimic the HTML5 media element APIs as you were hoping for.
It's not perfect (preload handling is kind of wonky across browsers & plugin fallback scenarios, in my experience, for example) but it's solid overall and sounds like it might be exactly what you're looking for.
Oh, and the means of getting to fullscreen when you're in plugin/fallback mode is annoying, but it's not the developer's fault... JavaScript is not allowed to send Flash or Silverlight to full screen, period, as a security restriction. So instead the JS setFullscreen command just forces the plugin to reveal a "Go Fullscreen" button in the upper right corner of the plugin instance. If you don't care to offer the fullscreen option, though, it's a non-issue.
I would try http://flowplayer.org/ you can control it with JS its really simple, it can also convert html5 video tags into flash if the browser does not support html5,
Related
I need to redirect to one of two options, either a mobile area which is fully HTML5 but is optimized for small screen or the regular version which may contain some flash but is optimized for bigger screens.
The Modernizr JavaScript library has a option to detect weather a the current browser has flash Modernizr.on(feature,cb);. I was thinking this would this be a better way to check if a device is an ipad/mobile device but if it's a desktop browser has flash disabled this would probably also send the user to the mobile optimized area, instead of sending them to the desktop area with a Flash player blocked error if they do reach a flash object, which would be the preferred behavior.
Would a better way be to check the User Agent or if the browsers supports Touch Events?
Does any one have any opinions on best way to go about this?
For my situation I ended up using User Agent detection over feature detection. This is because the section I need to send the user to would give desktop user a lower quality experience. However I feel the feature detection would still be a preferable way to go but within the end area. All flash element can rather be removed there and the html5 object can be optimized there rather.
I am trying to produce a video player with buttons to fast forward, rewind, pause and step one frame forward.
I am familiar with the theory of how to make them work using javascript - and have constructed some, admittedly slightly buggy, buttons that are separate from the player and can't be seen when I make it full screen.
For clarity I have <button> elements with jquery scripts that sit under the video but aren't attached to it.
Is there a way to inject these buttons into the controls element of the html5 <video> tag so they persist and users can enjoy the use of these buttons while in full screen.
Or as an addendum - does anybody know how to sure up scripts for fastforwarding etc, they don't seem to play very nice with pausing the video - is there a known compatibility issue with javascript and the html5 video player's native pause function from controls, if not it just means my code is probably crap.
As far as I have read the HTML5 video player controls are not directly stylable.
The solutions I found require you to include custom controls and disable the default ones:
http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos
http://mrbool.com/how-to-style-the-html-5-video-element-with-javascript-and-css/27683
I would also argue that completely replacing the default controls would give you greater control and more stability than trying to inject new buttons after load. There is no benefit to using the standard controls, they are plain HTML, CSS and javascript and utilize the same methods you would use to build your own version.
As for fastforward, the video element has a playbackrate attribute that works really well. If you make sure your controls implement the method correctly you shuld be fine.
I have a rather unusual question for you all; it might be foolish but I am new to this area and I would really appreciate some help.
As the title suggests I was wondering if there is a way to disable a specific button from the default browser controls for the HTML5 video.
I know that each browser has its own somewhat unique looking set of controls so I don't think that I can overlay the button with CSS.
If it is impossible is it maybe possible to somehow tie via Javascript the event of the video going full screen to another event?
I was looking into making the custom controls or using the pre-made players but if at all possible I would like to get away without using either.
I appreciate any help.
You can't hide specific native controls. You can either use them or hide them via the controls attribute.
As far as using listening to fullscreen events along with other events the video API provides, longtail does extensive research on compatibilities or lack thereof within different browsers and devices.
You can make your own css controls on top of the video element and control different actions via the html5 media api demonstrated here.
For fullscreen type things, I'd recommend looking through the code here as it was written for the Vimeo HTML5 player specifically.
It's kind of a nightmare dealing with the Video API depending how much support you're trying to achieve.
I found this link to a page here on StackOverflow about "Creating Audio using Javascript in <audio>", and this page on how to play audio on multiple channels. I found that the iPhone supports the audio tag and the Audio object in Javascript to play single channel audio, but is there a way to play audio on multiple channels?
Maybe I'm over complicating this, so this is what I'm trying to do. I want a way to make a graceful audio player in Javascript that supports transitioning from one audio file to another. The way I was going to implement this is to incrementally reduce the volume on one channel while incrementally increasing the volume on the other channel so I'd get a kind of fade effect. Is there a simpler solution to this using only Javascript? I guess another solution would be to reduce the volume to a certain point, start the new audio file on the same channel, then increase the volume again. This circumvents the need for fading, but I would like to fade if at all possible.
Is this possible? I know the HTML5 spec isn't finished yet, but is there some kind of workaround that you know of? Do any of you have ideas for another approach?
From what I can tell from this post about playing audio in the Android browser, this isn't supported yet, but do any of you know if it will support multiple channel audio once the audio tag is supported? Does opera mini support this?
This is an old question I know :).
iOS Safari does not support multiple audio objects playing at the same time. Also, it is not possible for having a fade-in/out effect for iOS, as the only way to change the volume setting is from the hardware itself. Apple decided to give this ability only to the device user. Volume setting is not writable by javascript. It is not even readable (always returns 1).
You can check out the Safari documentation for iOS for more info.
For Android, to be honest I have no idea.
There's no direct way that I know of to have multiple channels on an audio tag, but check out this blog post on using multiple audio tags to simulate multiple channels. http://www.storiesinflight.com/html5/audio.html
I know this is a total hack but try this trick I came up with...
Go to the page below and type on the home row keys to play a blues riff (type multiple keys at the same time etc.)
http://davealger.com/jthump/
The way this works is to create invisible <iframe> components that play a sound before destroying the frame.
I know it is a total hack and I look forward to better HTML 5 multi-channel audio support in the future.
For example, I want the page to play an audio file while at the same time have some bullets slide into view at just the right moment that said bullet is talked about in the audio file. A similar effect would also be used for closed captioning. When I say reliable I mean specifically that the timing will be consistent across many common platforms (browser/OS/CPU/etc) as well as consistent in different sessions on the same platform (they hit refresh, it works again just as it did before, etc).
NOTE: It's OK if the answer is 'NO', but please include at least a little quip about why that is.
Check out this animation, which synchronizes a 3D SVG effect to an audio file.
The technique is explained in a blog post at http://mrdoob.com/blog/page/3. Look for the one entitled "svg tag+audio tag = 3D waveform". The key is to create a table of volume values corresponding to the audio file.
You'll obviously have some work to do in studying this example and the Javascript it uses to adapt it to your scenario. And it will probably only work in browsers that support HTML5.
Given the current situation and HTML5 support, I would solve this using Flash.