Cloudflare has added the RocketLoader option which adds if (!window.__cfRLUnblockHandlers) return false; to my onloadstart.
<video id="video" onloadstart="if (!window.__cfRLUnblockHandlers) return false; this.volume=0.01" loop="">
Since it adds window.__cfRLUnblockHandlers the volume that plays is super loud when people click play. As this.volume=0.01 no longer gets detected.
I have tried a few things like adding this
var __cfRLUnblockHandlers = 1 ;
or
<script>
window.__cfRLUnblockHandlers = true;
</script>
Both do not work and cloudflare still forces __cfRLUnblockHandlers onto my onloadstart.
At the moment I am unable to turn off RocketLoader. Is there a way to fix this without changing the cloudflare settings.
The answer should be to disable "Rocket Loader" within the Speed / Optimization area of the CloudFlare control panel.
If you feel that you need the performance benefits of Rocket Loader then you can also disable for areas or specific pages in the website using the "page rules" functionality of CloudFlare.
you can add a new page role in CF for your specific page to bypass the rocket loader.
Related
Question: how to prevent YouTube video name from showing up when changing volume in Windows 10. [YouTube IFrame Api]
What I don't want:
Image of what I don't want
I don't want the name of the YT video to show up when changing volume. It's really annoying and I can't find any way to disable it.
Is there some kind of playervar that stops this?
Thanks!
It appears that you currently cannot change Chrome flags to disable this from code. The best you can do is provide a direct link to the setting, as the flags page supports direct links to specific settings: chrome://flags/#hardware-media-key-handling
In the meantime, we'll just have to wait and make feature requests to Google. Maybe they can add a popup that says, "This website is trying to change a setting...", or something.
It is a browser feature, If you are using chrome you can disable this feature by navigating to chrome://flags/#hardware-media-key-handling and then disable Hardware Media Key Handling
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.
When you open a website in LinkedIn's app (iOS), html5 background videos set to autoplay do not play, and animations do not fire unless you stop scrolling. So, it often looks like there is a bunch of empty space when you use fade and slide animations.
Here are a few examples (you must view within LinkedIn's app to see the issue)...
Background video
https://jobs.netflix.com/
https://thelovinggroup.com/ (also has animation issues)
Animations
https://voidwatches.com/
http://www.clearmotion.com/
Any thoughts on how to tackle this issue until LinkedIn builds a better browser?
I've looked into browser detection as a possible solution. Thinking maybe I could do an if/else statement to check if it's a common browser (Chrome, Safari, Firefox, etc.), else do something else with those videos and animations.
But everything I've read for browser detection strongly recommends against using it unless you absolutely have to (https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent).
Any thoughts would be very much appreciated!
UPDATE
Ok, so I've implemented the code from this Github project to detect UIWebView: https://github.com/simpleweb/UIWebView-Detect
And it works well! However, I really need to differentiate between LinkedIn and other apps with WebView because LinkedIn is the only one with these issues.
I used Udger's parser (based on what I found in another Stack Overflow post): https://udger.com/resources/online-parser
And I can see that Facebook has its own browser, but LinkedIn seems to be using some version of Safari.
I feel like I'm starting to get closer, but I'm still not sure I've come up with a solid solution.
I'm trying to find out answer to my problem, but Google and other sites can't help me.
I'm building mobile website and I need redirect to homepage where browser is reactivated (unlock screen or open from minimalized). Is it possible?
Thanks a lot
Maybe you can do something with window.onunload event
No in short,
There is no specified way to detect a lock screen as such there is nothing in HTML / Javascript.
However you could use PhoneGap and create a mobile application,
I have a class to make events in PhoneGap easy
then you can use Application paused if you still want your application to only work online you can use an AJAX loader to load the content as using PhoneGap dose not hit the Cross-Origin domain policies of JavaScript normally
This i think is the only alternative you can use and it would require quite a bit of work to make your site become a mobile application.
EDIT:
Sorry a bit of Detail. PhoneGap allows you to build mobile applications HTML, CSS & JavaScript and provides some new events into JavaScript to help with mobile applications as well as the ability to call upon the hardware of a phone you can find more out at
http://phonegap.com/
Another Thought:
Thanks to #jeroenk for this idea it just came to me after reading his you might be able to do a little hack fix.
on your page
window.timestamp = Math.round(new Date().getTime()/1000);
setInterval(4000, function(){
var curTime = Math.round(new Date().getTime()/1000);
if(curTime > window.timestamp+5){
// do redirect
}
window.timestamp = Math.round(new Date().getTime()/1000);
});
I'm not 100% but i think Javascript gets halted when the browser on a mobile is not open, so lock screen on minimized so the above will check every 4 seconds that the Javascript has not become out of sink in (allowing for 1 second extra in case there is an application lag it would take some one more than 1 second to get though lock screen unless it was the user using the phone so it was not put down)
As i say this is a thought it might not work.
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