I'm looking to play AVI files in a web browser however I can't seem to find a decent tool to do so.
The basic WMP object embed is what I'm using right now but it doesn't really do what I'd like it to do, and I can't really implement JavaScript into it. (AFAIK I can't. I done a little digging and that's the conclusion I came to)
I've also tried DivX though I don't really like it. It has adverts, and I've no idea if JavaScript can be included either.
AFAIK Flash doesn't support AVI playback at all.
Does anyone know of any player at all that can play AVI files on the web, which I could possibly integrate some kind of JavaScript in (or has an API)?
Just a thought too, but would Java itself have anything like this?
The player also needs to be able to source the files like this:
file:\\Network-PC-Name\avi\avifile.avi
What you're looking for is WebChimera, there's no doubt about it. It has the most complex JS API ever made for web video, and it supports all file types.. it also supports "file:///" (for links like file:///C:/avi/avifile.avi).
It is open source and has no advertising. And the best part is that everything inside the player is editable, so you can skin it, add buttons and even add entirely new features to it with mostly just JavaScript. :)
Update
As you mentioned you need it to connect to file:///Network-PC-Name/avi/avifile.avi, this tells me you need this for some Local / Private / LAN use.
In this case, I think the best solution for you is to use WebChimera with Node-Webkit, as it will also give you a JS API based server environment.
WebChimera Player is already ported to NW for Windows and Mac:
https://github.com/jaruba/WebChimeraPlayerNW
On Windows, just download the package, and run nw.exe. To customize just edit the html pages. For Mac, just follow the instructions in the Readme.md.
The great part about using it like this, is that it already has the plugin embedded in the app, so you won't even need to install the plugin for the player to work.
The only thing I can't be fully sure of, is if Network-PC-Name can even be accessed through the file:/// protocol in it's normal usage. But this would still be possible anyway as you could map the network drive, and you can even map it programatically (with only JavaScript!) by using the child process exec to run the necessary command. (child_process is built in node-webkit natively)
flowplayer is recommended by this post:
Flash video player for AVI files (free for commercial use)
not sure about the file:\ source, as that's on your local machine and could be refused by the browser for security reasons
Related
I tried to take a screenshot of a movie on the Disney+ web app when I realised that the video turns black as soon as I try to take a new screenshot with Snipping Tool. When I tried to do the same thing with OBS and Discord streams, I saw the same effect.
Interestingly, this only works for Chrome on my machine (I also tried Firefox and Edge and they just let me record my screen).
When I saw this, I became really curious on how they achieved this.
Does anyone have any idea how I can recreate this for my own web projects?
I became really curious on how they achieved this.
They use Widevine.
Widevine homepage.
https://ottverse.com/widevine-drm-how-does-it-work/
https://en.wikipedia.org/wiki/Widevine
News reports:
https://www.cordcuttersnews.com/sadly-disney-wont-work-on-chromebooks-linux-some-android-devices-because-of-drm/
https://www.tomsguide.com/news/disney-plus-will-work-on-chromebooks
https://www.androidpolice.com/2019/10/22/disney-will-only-work-on-devices-that-support-the-strictest-widevine-l3-drm/
It's also used by Netflix, Hulu and others.
Widevine is Google's DRM system that's baked-in to Chrome.
All other major browsers have adopted it as well, because no-one will use a browser that can't access Netflix.
Mozilla's and Microsoft's support is less user-hostile and as you noticed.
It's just a standard HTML5 <video> element - when the browser downloads the video stream it will see that it's encrypted with Widevine and that engages the Widevine client-side code which does all the DRM biz.
Though there are HTML and DOM features that facilitate DRM, I'm unsure of the extent that any JavaScript is required to use it - as theoretically everything the browser needs to know to load the DRM system should be embedded in the raw media stream.
On Windows, I understand (though unconfirmed) that Widevine makes use of SetWindowDisplayAffinity to block screenshots.
Nothing stops you from doing this in your own native code (e.g. if you had an Electron fork), but please don't because it's a real dick-move to your users, in addition to not working at all if the user has the DWM disabled (e.g. they're running Windows 7 with Aero disabled).
Has anyone any idea how I can recreate this for my own web projects?
You'll need to license Widevine yourself. This is a complicated process intended only for large media production companies and content rightsholders, not individuals or small businesses.
Anyway, even if you could, please don't. Why would you want to make to harder for users to share and appreciate your media? Just stick it up on YouTube instead.
In my web page, I have to start a desktop application on the client's computer if it's installed. Any idea how I can do this?
If the application is MS Office or Adobe Reader, I know how to start them, but the application I want to start is a custom application. You can not find it on the internet.
How can I open the application?
Basically it's not possible to achieve unless an application registers a protocol that will trigger it. If it does that all you need to do is to provide a link using this protocol
yourcustomapp://some.parameters
Another way the 3rd party app can integrate with the browser is if it hooks to it as a plugin. This is how flash apps work etc.
If the app you are trying to launch does not support something like that it's going to be close to impossible to achieve what you want.
The browser sandbox prohibits you from executing local resources, for good reason - to thwart a website destroying your box with malicious code. I've been researching the same functionality.
The only solution I've found is to build an extension in Mozilla Firefox which can launch your app. Extensions live outside the sandbox so they can execute local resources. See this page for how to do that. You may be able to do it cross-browser using crossrider, though I haven't had success with that yet.
You could alternatively build a thick client populated from a web service, and launched from the browser through an extension as mentioned above. This is what I'm doing to get around the sandbox. I'm using local XUL for this.
See my question for additional discussion.
First off - you can't do it using javascript in any sort of a portable mechanism.
If the application is ms office or adobe reader,I know how to startup them
No you don't - you know how to send a document, which the browser associates with these applications and invokes them supplying the name of the local copy of the response. You can't just start the programs.
You just need to do the same for your app - invent a new mime type (the major type would be 'application' and by convention, non-standard minor types are prefixed with 'x-', so you might use application/x-hguser) then associate that mimetype with the relevant program browser side.
i.e: You need to explicitly configure each browser
I already encouter that problem in some complex production environnements.
I do the trick using the following code :
function launch(p_app_path)
{
var oShell = new ActiveXObject("WScript.Shell");
oShell.Run('"' + p_app_path + '"', 1);
}
In IE options > Security > Customize the level > ActiveX controls and plugins > Initialization and script ActiveX controls not marked as safe for scripting, set the value to Ask or Active.
It isn't a security problem when your website is enclosed into a specific security context.
And as they say, it's not worth it to build a gas plant.
JavaScript alone can't do this. (No, not even with MS Office or Adobe Reader.) Thankfully.
There are a number of old ways, including using ActiveX, which may work for your needs. As others have pointed out while typing this, you can customize responses based on the mime type or the protocol, etc.
Any way you look at it, you're going to need control over the end users' browser. If you're in a close environment where you can dictate policy (users must use a specific browser, with a specific configuration), then you're going to need to do that. For an open environment with no control over the end users, you're out of luck.
I'm actually having a lot of success right now with SiteFusion. It's a PHP client/server application framework that serves out XUL/JavaScript applications from a server deamon running in Apache. You access applications from a very thin client in XULRunner, or potentially off a web page using extensions. Clients can execute on any platform, and they're outside of the browser sandbox so you can access local resources such as executables. It'a a fairly elegant solution, their website provides great examples and documentation, and their forum is very responsive. I actually found a minor bug in passing arguments to local executables, posted a question about the forum, and it was fixed by the chief developer in under 15 minutes. Very impressive, overall!
I'm currently developing a simple javascript extension for Chrome. The problem is simple but probably unfixable, but still here's the issue:
on particular pages, i embed links to some files (i don't have access to server, so i can't change the way they are outputted) - a simple <a>nchor tag.
then, what i'm trying to achieve is:
set a filename of downloaded file (right now it's like 87sfhkjhsf and without extension)
make the browser download (not view) the file in any case (right now, if it's a pdf, it gets viewed.. or if it's an mp3 it gets played with native Chrome player)
i would even accept a .dll solution IF it will really work (i even tried using Flash with FileReference.download method, but it doesn't allow to download files from other domains)
seeking help from you guys :)
In or to programmatically download a file using javascript in chrome you (currently) need either a server to bounce the download off, to be satisfied with garbled filenames (using blobbuilder; this sounds like what you are doing), or a NPAPI plugin (such as a custom .dll or Flash).
If you look at the screenshot extensions, the most popular ones use NPAPI.
I plan on using NPAPI myself, but haven't gotten around to coding for all 3 OSes yet. (I am the developer of Smooth Gestures, and have gotten many requests for a image download gesture)
All this said, there is constant development on filesystem access for javascript and a native API may become available. But I wouldn't hold my breath.
i was wondering if anyone knew a quick solution to my problem. I want to be able to open a folder on users screen pretty much the same as but just opening up the my computer folder so a user can drag a file onto the browser screen. anyone know how?
You can't. They even gave this bug a name: "security".
The closest you can get without using Flash, proprietary browser stuff or Java is something like this.
You have to use a java applet.
Javascript has no access to the file system for security reason.
Every page would be able to see the files on your local machine and might display: "According to the files on your disk you might be interested in some of our special movies ;)"
Incidentally, there are custom extensions in IE and Firefox that let you load and save files; it's the reason TiddlyWiki can work as it does. It does degrade a Java applet for other browsers.
A new jQuery plugin has been extracted out of TiddlyWiki to give Javascript authors the ability to load and save, and it's portable across all browsers:
twFile - http://jquery.tiddlywiki.org/twFile.html
It's quite possibly not what you're after as it will only work off a file:/// URL.
I'm busy experimenting with TiddlyWiki and trying to get it to run on my Nokia E51, which uses S60v3. The browser is based on webkit, which should mean that I'd be able to get it to work, but no luck so far.
Does anyone have any experience with saving files locally on this platform?
I skimmed through the source of TiddlyWiki. For its file operations it is using the jQuery.twFile plugin which in turn uses a custom Java applet on Webkit-based browsers. The S60 browser does not support java applets so I'm afraid you're out of luck.
I may be wrong here but a quick look at the widget training course on forum Nokia makes it seem like file system access from JavaScript isn't available on S60.
http://www.forum.nokia.com/Tools_Docs_and_Code/Documentation/Web_Technologies/
It really look like you're supposed to retrieve persistent data from the network.
I would hope the web browser cache allows you to query remote data several times while only transfering it once.
On my E51 I am able do download files the old-fashion way: A simple link to a file with a fitting mimetype.