Facebook embedded video not playing on click - javascript

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.

Related

Mp3 sound is delayed on phone (iphone 7) - Blazor WASM + javascript

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.

How can you prevent screen captures on the web? [2020]

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.

YouTube Iframe API - video will sometimes not play via custom controls and instead, it refreshes the video

A bit of a strange one - I'm working with the YouTube iFrame API for the first time, building a skin for a customers site.
I've followed the code examples provided by Google/YouTube (https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#IFrame_Player_API).
The issue is that when clicking the play button, which calls player.playVideo(), under some circumstances it will play, but mostly, it just appears to refresh the video with no errors logged in the console. The video will fade to black as if it was about to play, but instead it fades back to the video "poster" with the play button.
You can view the entire code here - https://codepen.io/james-morton/pen/BEZGvm
I've tried various different things such as instead of using:
function onYouTubePlayerAPIReady() {
.. I tried this as per other examples to no avail
window.onYouTubePlayerAPIReady = function() {
Again, to be clear, the controls sometimes works, and sometimes it doesnt - same machine, same browser, same video - I've tried other videos and the same result. It's really inconsistent as it sometimes works.
Any ideas?
Edit:
After further debugging using the below:
function onPlayerStateChange(event){
console.log('State Change: ' + event.data);
}
I can see that for when it doesn't load, the player's state has changed from -1 (Unstarted) to 3 (Buffering), and then back to -1 (Unstarted) when clicking the play button.
It turns out the issue appears to be with CodePen - having transferred all of the code to my own environment, it works flawlessly with no playback issues via the controls.
Having reviewed https://css-tricks.com/play-button-youtube-and-vimeo-api/ that use a very similar setup, the problem was easily replicated on CodePen, and comments (all the way back from 2014) describe the issues that I experienced.
Hopefully this will be useful to others that spot this.
This is a strange one! I didn't quite 'solve' it but I have some feedback. On running your code, at first I couldn't get it to play at all (by either the middle 'YT' play button or by the custom play button), but when I used your 'ff' button (when it hadn't yet started to play), there was obvious signs that it had being activated. I changed the z-index in the yt-player from 2 to -2 and then was able to use the middle button to start play. After the initial play, I had no problem using the custom buttoms (pause/play worked fine) - and I refreshed and tried it multiple times, each time with success.
The one big issue is starting the first video play with the custom play button. You could maybe autostart it (perhaps with a delay?) to circumvent having to use the middle button? I did inspect the widths of the buttons (to see if maybe padding / overlap) may be affecting the play button but didn't find anything. I did notice that when I played the video that it was rising slightly from it's initial position so I tweaked the css a tiny bit (only a very slight tweak). Here's my codepen link (It's not that different from yours..) I hope this helps .. if even a bit.

html5 <video> tag; click anywhere js works everywhere but firefox

Firefox seems to add it’s own ‘click anywhere to play’ behavior, it dims the poster and adds a play button. It works great, but the problem is that no other browsers seem to add that behavior automatically. So, I’ve had to implement a javascript workaround to allow ‘click anywhere to play’ in other browsers. They work great, but now it’s broken in firefox. The way it behaves, it seems like the javascript I put in there is getting a click and making it play, but then ff’s own ‘click anywhere to play’ catches the click too, and pauses it immediately. I can inch along the entire video, 1 or 2 seconds at a time, if keep clicking. As for the specific js workarounds that I've tried, many of the examples from these two threads:
How can I add click-to-play to my HTML5 videos without interfering with native controls?
and
Click the poster image the HTML5 video plays?
I was really hoping for a <video> attribute like click-anywhere="yes", but I think I'm out of luck there. Or, as a solution to my problem, something like the css: moz-click-anywhere:false; to allow the js to handle clicks exclusively.
The only solution I can think of is the browser detection route, but I’m hoping there’s a more elegant solution. If not, so be it, but it was worth asking.

Pause flash game using javascript

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.

Categories