How would I go about seeking or pausing an embedded video (not necessarily a swf) from javascript? I am looking for something like Google's SWFObject's API, but for Windows Media Player, Real Player, Quicktime.
I would check out camen design, that is for backup (in case HTML 5 is not available), then broken links (set the src attribute of the video tag to something else, ironic enough that link to the video is broken), you can easily play/ pause, access volume control, etc using Javascript.
Like ItzWarty said, not many video formats are supported, but you can certainly work it out.
Related
BEFORE YOU TRY AND MARK THIS AS A REPEATED QUESTION
I know this is possible, and all of the other questions are old. Here's why this question is different:
Netflix has been able to do this. Try streaming Netflix, turn subtitles on, and you can see that if you try and take a screenshot, the subtitle will appear, but the video will not.
Try this again with OBS. When you use a desktop/window capture, you can see the video from Netflix playing in the browser, but at the SAME time, OBS can't pick it up.
This Wordpress plugin (which I haven't tried out personally, so not sure if it works, but the reviews are promising)
So now that I've assured you this isn't a question with the context of 2014, are there any new ways to be able to avoid screen capture on the web? I've assumed that it's impossible for a while, but it looks like there might be an API for it somewhere, and no one hasn't asked this question in years here. It'd be useful for preventing capture in my own JS websites, so I was just wondering how I could implement this myself. Thanks.
Your initial assumption is correct, it's impossible. The Netflix example is different, because it isn't preventing a screenshot of the webpage (which is why the subtitles still get captured) but of the video stream, which is embedded in the webpage, but not actually a part of it. The video isn't captured in your example because it's protected by Encrypted Media Extensions. This also means, though, that the video isn't playable in just any browser, it's only accessible in browsers that support EME.
So, the answer to "how do you prevent screen captures on the web" is "convince every browser manufacturer to include features in their browser that allow you to control screen capturing, and then only make your website available to browsers that support that feature" (which is essentially what Netflix did for video).
You could try playing a transparent DRM-protected video on top of your content (and forward any user event to the element below it). When the user takes a screenshot, the video should produce a solid overlay on top of your actual content.
I have tried several methods:
I tried to create hidden video tags and show/hide them, but this will cause flickering.
I tried to change the src attribute of the video, but I have to call load() method before play(), and the load() will load the new video.
This is not what I want either, because this causes the new video to stop for a while (because need time to load).
I tried to cache the new video by using ajax to load the new video in background before the previous video is finished. The new video can be downloaded completely (300Kbytes) before the old video is finished.
But when I call .load() function on the new video, it will be downloaded again.
My question is: for my third method, is there a way for the video object to make use of the downloaded file in cache?
After reading around, I think the above three are probably the only ways to realize my objective. The third one is really what I want but the video file just got downloaded twice (once is Ajax download, and another is calling load()). Note that, without calling load(), just simply changing the src attribute and calling play() will not work.
Media Source Extensions are what you need. It's hard to find good documentation on them yet (at the time of writing, MDN's documentation is mostly stubs), but you can delve into the spec if you dare.
The two-sentence summary is that with Media Source Extensions you can create a MediaSource object and set it as the source of a <video> element, instead of pointing the <video> at the URL of a complete video. Then you can use JavaScript to explicitly download videos representing further segments of your live stream and append them to your MediaSource object, and the segments will play seamlessly.
Also, while it's slightly beyond the scope of what you've asked here, MPEG-DASH is a technique for doing exactly what you're interested in (i.e. streaming live video by encoding short segments as individual files, such as short standalone mp4s, and serving these segments individually to the browser). There's no way to implement MPEG-DASH in a browser without Media Source Extensions, so they are often discussed together. There are some good writeups (at different levels of detail) on building a DASH player with HTML and JavaScript using Media Source Extensions on the BBC's tech blog and MSDN.
Unfortunately, Media Source Extensions are not yet available in all major browsers. For instance, the latest version of Firefox on my Mac doesn't have window.MediaSource. This means you can't do segmented live streaming in a way that will work on all major browsers using only a HTML 5 <video> element yet. Unfortunately, it's still necessary to fall back to Flash if you need cross-browser compatibility.
Like you, I tried to implement this behaviour without using Media Source Extensions. I tried (and tried combining) a whole bunch of techniques, including swapping out URLs on <video> elements, unhiding and playing <video> elements, downloading segments fully in advance and storing them in Blobs that I'd use as the src for my <video> elements, and setting the preload attribute to auto to load the segments into memory in advance... but nothing worked. In Google Chrome, using any of these techniques results in a visible stutter when you play() the second video from the first video's ended event, even if you've loaded the second video fully in advance. There just isn't a way to get seamless consecutive video playback using <video> elements without some kind of stutter in browsers that don't support Media Source Extensions.
Background story: many users (including me) browse the web from notebooks that are not constructed for sound performance. That means (besides other things) that the sound volume for most videos is too low, especially if the video itself is recorded at low volume.
Therefore...
I was wondering if there is any way of increasing the volume of such a video (especially Youtube, but could be extended to other types), because I'm interested in doing it and even publishing it as Firefox/Chrome/other browser plug-in.
Or, alternatively, if you know such a plug-in do not hesitate to post the link here.
If you want to control system volume then JavaScript has no direct access to it, you would need to write NPAPI (C++ dll) plugin.
If you want to just adjust video player's own volume (you won't be able to increase it beyond 100%) then JavaScript can do it, perhaps.
If video player is HTML5 <video> tag then controlling volume is easy. For YouTube it would be:
document.getElementsByClassName("video-stream")[0].volume = 0.5; //50%
If it is a custom made flash player then you need to rely on its JavaScript interface, if any. Youtube player happens to support controlling volume with JavaScript:
document.getElementById("movie_player").setVolume(50);
In order for this to work you would need to break out of extension sandbox first by injecting <script> tag on the page with this code.
There is no universal solution, you would need to deal with each site individually.
Use VLC Media Player. You can copy and paste links into it. Increase sound to up to 250%
You can use js-ctypes to change system's volume level. Here is an example that sets volume to 12.5%:
Components.utils.import("resource://gre/modules/ctypes.jsm");
var lib = ctypes.open("winmm.dll");
var waveOutSetVolume = lib.declare("waveOutSetVolume", ctypes.default_abi,
ctypes.uint32_t,
ctypes.int32_t, ctypes.uint32_t);
waveOutSetVolume(-1, 0x20002000);
lib.close();
However, this only changes the volume for the Firefox process. It won't have any effect on Flash because it runs in a different process now. I'm not even sure whether winmm has some way to change the global volume at all, you might need the new MMDevice API for that - and then it gets complicated because doing COM calls via js-ctypes IMHO isn't possible. Only option is creating your own library to be distributed along with your extension. That should do the COM messaging and export a plain API that can be called via js-ctypes.
You can use Sound Booster software by Letasoft, but there are some things you might encounter like crash, we are using netbooks so the built-in sound card has limit. So try to buff first before playing that's the best advice that I can give. The max volume output will be 500%.
I found this
javascript:((v,a=new AudioContext(),g=a.createGain())=>(window._g??(c=>(a.createMediaElementSource(document.querySelector('video'))[c](g),g[c](a.destination),window._g=g))("connect")).gain.value=v??1)(parseFloat(prompt("Enter gain level",window._g?.gain.value)));
If you are using Chrome, then you can:
Right-click and choose Inspect. Or simply press F12.
Go to Console.
Paste this code.
Press Enter.
A message will appear, type what level you want (0.5 - 1 - 2 - 3 - ...), and press Enter.
For more about AudioContext.createGain(): Go Here
In order to view an embedded video on a web-page, is it absolutely necessary to have javascript
enabled - assuming the web page is not in the latest HTML5 format and hence has none of
the newer type tags?
I have noticed that YouTube does not work with JS disabled and I was wondering
whether it was a conscious decision on YouTube's part to work only with JS enabled or
did they really have no choice.
The embed code for YouTube is basically an iframe that links to a normal HTML page that uses JavaScript to load in the video you want to see.
In general, you can view video without JavaScript enabled. Most videos are played through Flash, which you can include directly into your page with either an object tag or an embed tag.
There are libraries, such as SWFObject that will put those players into your page for you, but do so through the use of JavaScript. If you want to use a library like that, you will need JavaScript enabled.
Also, if your browser does support HTML5, you can load video directly into the page with the video tag, without the need of JavaScript.
Youtube wants you to have Javascript enabled to deliver advertising.
The player you want to use to embedd the video will tell you if Javascript has to be enabled or not.
Most of the Flash based players work without Javascript enabled, some other don't.
If you are going to embedd a QuickTime video, you don't need to have Javascript enabled to play it
How can I get the current playing time from an embedded video on a webpage? Is there simply an attribute that can be obtained using JavaScript from one of the common embedded video players? Or do I need to do a work-around like make my own pause and play buttons and keep track of time manually while feeding the play/pause commands to the video using JavaScript? The latter is much more ugly in my opinion. Other solutions?
The html5 video tag provides some decent support for this kind of thing.
The following page gives some decent ideas:
http://www.broken-links.com/2009/10/06/building-html5-video-controls-with-javascript/