I'm working with a DirectShow application that exports as a Firefox plugin for video streaming.
To the best of my knowledge, it seems as though the plugin is being rendered on a separate window from the web page. I'd like to edit the application to allow html elements over the plugin much like flash allows with wmode='opaque' or 'transparent'. Another option that would work is to pass mouse events through the application (such as mouse move and mouse down).
I've been reading up on put_MessageDrain and put_Owner, but I'm not sure how to apply these to the application or if they will work.
I'm also aware that iframe shimming may work, but since I have access to the source code of the application I'd like to add the functionality directly rather than use a work around. Is iframe shimming my best option? It seems like the easiest option.
The application currently uses Windowless mode and is always on top of everything else on the web page.
The way video is displayed with DirectShow video renderers, you cannot make it transparent without providing your own video renderer filter, or custom allocator/presenter object for one of the standard video renderers. DirectShow renderers display video with DirectDraw or Direct3D surface which stands alone from hosting window and is not interacting with host in a way supposed to get you combined picture with transparent video and something else as well.
I've been reading up on put_MessageDrain and put_Owner
These are for Windowed mode, you seem to use Windowless which assumes that you are providing a hosting window and rectangle to cover opaquely. Renderless, the third mode VMR-7/9 and EVR offer you is the one where you provide allocator/presenter and override the presentation.
Windows SDK (for some you might need to look for an older version, not the latest) provides with samples: Renderless, VMR9Allocator, EVRPresenter which demo the renderless mode.
Related
I want to display captions using the HTML5 Text Tracks API (WebVTT) using the native browser implementations -- without loading audio/video.
How can that be achieved ?
There is no way using the native implementation.
However, the Firefox implementation of WebVTT, vtt.js, is publicly available.
All you need to do is attach a timer while a video element is playing (or just to any custom event without a video) and apply vtt.js functions to the video / captions container.
Since the Firefox VTT implementation is derived from it, this is the closest you can come to native without using the default way of attaching to a video.
How does one go about streaming video in HTML5 ? I can go with using a single browser of the latest version if I have to.I need to be able to start playing from any location of the movie even if the entire video has not been loaded by the browser.
WebRTC ?
I've already seen this question and no one has answered.
Does not allow the viewer to skip to the middle of a video in any
browser. They must watch the video straight through start to finish,
which is not ideal.
This is the main point for streaming.
Currently if you want to use pure HTML5 and work cross-browser you are limited to progressive streaming with the <video> element.
While that still does allow the user to skip ahead via the scrubber or programatically by setting the .currentTime there will still be some buffering while the browser re-loads enough content to be comfortable playing smoothly.
Solutions like Smooth Streaming, HLS do not work across browsers today so you would require a Flash or Silverlight plugin, though with MPEG-DASH being recognized by the W3C there is some hope for the future as samples like this demonstrate http://dash-mse-test.appspot.com/release-notes.html
For today however if you want to stick with an HTML5 solution and you have source in a format the works with the browser then you should be fine
Chrome has implemented the Media Source API in the mean time. Hoping the rest will follow.
http://www.w3.org/TR/media-source/
Abstract
This specification extends HTMLMediaElement to allow JavaScript to generate media streams for playback. Allowing JavaScript to generate streams facilitates a variety of use cases like adaptive streaming and time shifting live streams.
I have a jQuery Mobile website I created for a friend/client of mine. It only has 6 pages or so (2 of them are dialog windows). The site has HTML5 video with fallback for flash support via the videojs library. All videos are encoded properly in mp4, ogv (theora), and webm and so far play on every device I have used.
My problem lies bandwidth, the purpose of the program really needs to be an application because these are informational videos that may need to be viewed at any time, even with no web access (web access is required for first login to verify credentials).
I was left with 3 solutions, try writing native apps for all the platforms myself in their native languages, use Sencha Touch (which I am comfortable enough with extJS to do), or taking my existing jquery mobile app that is 100% functional including log-in and some backend package management to assign users a package of videos (there are multiple packages each with between 8-20 videos), and follow the jQuery Mobile tutorial for getting your app ready for PhoneGap, I believe its only enabling two settings, and both are to enable "cross-domain" requests, since my current web app would be running as localhost, it would see the scripts as external pages.
My main question/problem is for one, I have never used PhoneGap; aside from their Hello World android tutorial, and I know there are other all-in-one frameworks out there now: PhoneGap, Titanium, Corona, Adobe Flex (which I am installing while writing this tutorial, to see what it has to offer. If it has features like encoding videos automatically for the target device (video resolution changing), or even has local video playback features at all that may work.
Does anyone know which of the current frameworks have the ability to install a set of videos to the sdcard, (totaling around 6mb per install), and play them natively (by that i mean, in the devices native player, not inline inside of a webview). Which on android phones anyways, my current videojs based player plays the files natively in everything I have tried it on.
I just need a push in the right direction, if there is a PhoneGap plugin that I don't know about that allows videos to be played from the sd card, that would be terrific. Although I am not very happy with the speed of the android and blackberry webview controls. So something that uses 100% native controls would be great. I hope you guys can come up with some ideas, you can see the current app in action at m.yourvideobenefits.com email:abc#tool.com password: demo
You should view it from your phone if you want to see it properly, but if you do not have a smart phone; keep in mind that when viewing this page certain desktop browsers, the videos become their actual size after they are through loading. This is because i have autoload="true" in the video tag (which is ignored on most phones, but believe it or not, setting autoload="true" is what actually allowed the videos to not play inline on certain devices. A bug on the device, I am sure...but without this tag the videos played inline on iPhone 4 with the latest iOS version.
You could do it very easily with phonegap; you already have your web page, so it would be much less work, probably.
You could get the videos from inside your apps bundle in ios, and then it wouldn't be hard to select the one with the best resolution for the device being used. You could also download the videos at the perfect format and resolution the first time your app plays from your server using the file api. That convined with the storage api is nice for actualizations.
There's a plugin I use for android, because video tag is sometimes bugged or doesn't work at all in older versions, https://github.com/phonegap/phonegap-plugins/tree/master/Android/VideoPlayer.
It only plays from web or sdcard, but that's rarely too bad.
I can't help you with black berry, but I'm pretty sure there must be a way of doing it. And, anyway, appcelerator doesn't support it yet, so you would probably had to do it natively. Even if there isn't a plugin for black berry, you'd probably have to chose between native developement and html5 player inside phonegap. I won't give you my opinion about it here, for I'm not the one to give it and Stack Overflow says I shouln'd give it anyway.
I want to create a html5 page with video and an image overlay - meaning some image that is showing over the video. This overlay will in time also be text in some cases. Is there any good way to achieve this?
What I've been trying this far is to use a <video> tag to hold the video, and draw the image into a canvas, which I place on top of the video. To show it I need to move the video back setting z-index to -1, but then the video controls won't work. Maybe there's a solution to make the controls work again, but I'm not sure if I'm on the right path here.. I am assuming there is a recommended solution to this. Maybe using a canvas which I fill both video and overlay into. Or something completely different?
Note: I edited the question as it originally pointed in the wrong direction regarding what was important here. I'd love to have a solution which makes this work seamlessly in fullscreen and everything, but the focus is: What is the appropriate way to place items on top of video - in html5?
Achieving what you want and have it supported in out-of-the-box fullscreen is problematic. Fullscreen support in html5 video is only optional and in any way not accesible thorugh the API (See discussion here).
Even if you used the built in fullscreen there is no way you could inject content above it unless you are willing to change the video file itself on the server in runtime.
what you can do however (And what I did in a similar case) is to implement your own video controls, run the video tag without the built in controls, and have fun with overlaying as many layers as you want on top of your now out of focus video.
As for fullscreen, you can implement some sort of custom background fullscreen similar to what's been done here
edit: The problem you're having by placing a canvas over the video is blocking the built in html video controls. My suggestion is to implement your own video controls (play, pause, volume, seeker, etc.) using html and javascript calling the video API. You can probably even make it prettier then the ugly built in controls.
Your controls can be contained in a layer above the overlaid canvas, and thus the video will be shown, above it the overlay and above it your control set.
You can read a little about implementing your own controls here or here
And anyway this can easily be much better than this.
I need to capture an image from a webcam (tethered camera, etc.) into a form or html5 canvas so that I can save the image to the server. Also, I would like to be able to preview the image live in the page.
For example, I have a browser running at a registration check in station. I would like to take a picture of the attendee currently standing in front of the table, and submit that image into the database. Then I can use that image to print the attendee's badge with their picture on it.
I'm using rails and paperclip, though I doubt that matters.
Anyone done this before, or have some ideas how to do it?
There is a plugin for jQuery entitled 'jQuery Webcam Plugin' that provides a friendly and easy way to interact with a webcam. It actually relies on a small flash component (unfortunately), but it does a great job of making the interaction easy - as well as providing functionality to copy imagery direct into an HTML5 canvas.
Again, it's unfortunate that it relies on Flash, but I think any reliable solution is going to need flash at this point in time.
The plugin is available here: http://www.xarg.org/project/jquery-webcam-plugin/
At present, if you want to interact with a web cam from a web page you need to look at using a plug in. Flash has a mature interface to web cams, so it would be my first choice of tool.
There used to be a spec for native web cam support in HTML 5, but it has been spun out into its own, independent, specification. Currently there is no browser support for it outside of experimental Opera builds.
Android >=3.0 (on plenty of tablets and one phone soon) is supposed to support this. Searching for "html media capture" and "device api" will get you a lot more information.
On the not-even-alpha bleeding edge side, there are things like webrtc and the mozilla rainbow plugin.