I'm working on a flash gaming site, BeardedGames.com. I just recently implemented a "Panic" button that makes the entire site display: none and display: block's a iframe with a allowed in school website of the user's choice.
It works well so far, but the user's flash game still runs in the background while hidden. Is there a way to pause (not reset) the game, that will work on most, if not all, flash games? It needs to be accessible from javascript (possibly just javascript, or a flash wrapper?), and it has to work in IE 6 and greater (I know... I know. Can't help it.).
EDIT: Failed to make it clear that the user must be able to "un-pause" their game after the unpanic button is pressed.
EDIT: I haven't made these games, these are already made games like linerider.
I don't know if you can force pause a Flash movie with Javascript, but you can always create a pause function in the AS code of your Flash application, then call that function with Javascript. (try googling flash.external.ExternalInterface if you're using AS3)
Best thing you can do:
Do not embed the games directly. Embed an swf, that'll load the game. Then you'll be able to have some control, because the loaded SWF is running in the same instance as the loading SWF. For most games, it should suffice setting the frame rate to 0.
Still, some games use timers, so while the game doesn't run visually, the game logics (partially) continue.
you can however combine this with drowntoge's solution. have the loader make a call to javascript, where you have some operation that blocks, for example have it making synchronous http requests until the unpanic button is pressed. some browser may however complain that the script is running too long. some browser may also halt all JavaScript execution or become unresponsive.
Check out myswf.StopPlay(). Got it from this tutorial, haven't tried it myself. YMMV.
Related
I have blazor WASM app with "correct" .mp3 file that is played via javascript code. On the Desktop lets say its pretty instant after pressing button but on the phone its skips few ms and then it seems there is delay and its not good user experience. I tried to look up some solutions but couldnt find anything. Is there any way to solve it or its just because of phone (Iphone 7)?
sounds.js:
window.PlayAudio = (elementName) => {
document.getElementById(elementName).play();
}
*.razor:
<audio id="sound" src="#navManager.BaseUri/sound/correct.mp3" />
<button id="soundButton" #onclick="PlaySound">Click me to play "correct" sound</button>
...
public async Task PlaySound()
{
await JSRuntime.InvokeAsync<string>("PlayAudio", "sound");
}
Please see the repo and webapp:
https://github.com/Laftek/BlazorWASMPWAStaticPublish
https://laftek.github.io/BlazorWASMPWAStaticPublish/Lottie/7
Thank you any help would be much apprieciated.
This is not a Blazor issue-- it's a client browser behavior. It was once the standard across all devices, but I think newer devices have dropped some of the restrictions as audio files are no longer considered "large files."
Getting consistent media playback across all platforms has always been EXTREMELY difficult-- especially apple products, and most especially older apple products. I suspect that the sound will not start loading at all until a user action (like a button click). Then, unless you have fast data transfer, it will take some time to buffer. This was a common security feature for mobile devices to prevent sites from wasting users' data with media they didn't want.
The solution is to catch a click early on in the site's progress-- usually with a loading screen and "click here to enter." Then IN THAT CLICK HANDLER (important) you pre-start all your audio files by playing them and immediately pausing them again. Now, they will (probably) load, and when you really want to play the file, it will be loaded and ready.
Note that a simulated click will not work, so you can't just do element.onclick() after the page renders. It has to be an actual user interaction.
Javascript audio elements have various events, like canplay which let you know when enough of an audio source is loaded that you can start playing it.
https://www.w3schools.com/tags/ref_av_dom.asp
If you're lucky, Blazor has exposed the oncanplay event. Then you can use that even to enable your plaback button. I don't know if they have got around to audio events yet or not.
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'm facing problem with facebook video embedded on my post. My client wanted me to follow this method: https://medium.com/#BenBillups/facebook-video-embeds-that-actually-work-57037f8cdcf3
I've done all of the part except PHP code because that wasn't required by my client. Now what is happening. When page loads a play button appear to start video. On click it work just fine. It plays the video but only on desktops. The click event triggers on mobiles and tablets. But it doesn't start the video.
Please take a look at https://candylish.com/mix-and-match-swirl-cookies/ and also check in mobile. You'll see the difference.
In short, you've to click twice in mobile to start video.
Please help me sort this out.
Thanks :)
I think you are simply dealing with mobile browser's general reluctance to start playing video, when they can't determine it was directly connected to a user interaction (and therefor likely willingly triggered by the user.)
//Autoplay
FB.Event.subscribe('xfbml.ready', function(msg) {
if (msg.type === 'video') {
msg.instance.play();
}
});
This code waits for one of the SDK's events to fire and then tries to call the play method, introducing exactly the kind of asynchronism/detachment that gets this blocked, because techniques like that are often used in a malicious way.
In short, you've to click twice in mobile to start video.
That second click is "a whole different animal" altogether ... it happens on the native play button of the (now) embedded social plugin. The other script is not involved at all any more at this point, and this click is a direct user interaction that triggers the video to play, so it is allowed to work. This isn't nested into anything asynchronous or callbacks, it is straight up click => trigger play.
I don't think you will find any example using this technique where this will work differently.
Mobile browsers are more gracious when it comes to autoplay-on-page-load(!) videos, if those videos do not contain an audio track or are embedded to be muted by default. I don't think Facebook offers the latter as an option for mobile to begin with (the data-autoplay attribute does that for desktop, but is documented to not work on mobile) - so at most you could try with a Facebook video that is silent to begin with; but apart from that I'm not sure this restriction resp. when it actually gets lifted even applies here, it's probably not going to fulfill your client's requirement either.
I started typing this as a comment, but besides that it has gotten a little longer now, in this case I think it can't be done actually simply is the answer, even if it might not be a satisfying one.
I have a single page website on which I would like to host up to 14 videos using the html5 video player. The video files are all between 80 and 150mbs and I'm currently hosting them on AWS S3.
I'm running into a problem, however, which is that the players do not load well. Once I click play, they take often 10 seconds to start playing. Because of this, I tried turning on the preload function (i.e. preload="auto"), but this led to other problems. Because there are so many players on the page, some of the players stall -- I think because when a browser tries to download too many at once, some will stall.
In order to mitigate that problem, I setup a queue to preload the videos three at a time. That works, but now I've run into another problem: Chrome, at least, stalls giving a message "waiting for available socket...." I know from this that that is probably due to a limit on the maximum six websockets that can be open at once.
So now I'm truly stumped. I'm not sure how to guarantee that the videos start playing in a reasonable time (1-3 seconds) after the user hits play, and not max out the browser's limits. I'm starting to wonder if this just can't be accomplished given the limits of the html5 video player.
If anyone has any ideas about workaround, or ways in which approach could be altered it would be much appreciated.
So instead of turning preloading on, I would suggest you set preload to none
e.g:
<video id="myVideo" preload="none">
Think of it this way - if you set 14 fairly large videos to all download at once, so they are available immediately for the user wants them, you'll end up with no one video actually fully loaded.
If you set them to not download at all until the user requests one (i.e. clicks the play button) then there may still be a small delay. However they'll end up downloading less overall, they'll only download the videos they actually watch and the page is much less likely to crash. This is much more considerate to the user too (think those on low bandwidth/throttled connections).
However, not all browsers respect the preload="none" option and may preload parts of the video anyway. The safest possible, but more complicated way would be to put placeholder images with fake play buttons on them, which on user click dynamically inserts a video tag to the DOM. That way you can be sure no video tag is ever loaded until it is requested.
I work on a website that embeds videos from many different websites, the number of sources run into the thousands. For YouTube, their JavaScript API allows a way to detect when the video ends and one can execute any function he wants at that time. But this will only work for the youtube videos. What about all the others?
So is there a global all applicable way to detect when the Flash video on a page has stopped playing using either javascript or action script? And by "stopped playing" I mean stopped playing when it reached the end and not just been paused half way.
P.S. There will always be one embedded video inside a <div> with the id video on the page.
Just like YouTube provides an API, those players from those external websites have to provide their own APIs as well. There isn't an easy one-size-fits-all solution that you can implement in JavaScript.