Disable fullscreen on double-click? - javascript

I have an app which loads a webpage in a webview2 control (Edge Chromium), the page it's loading simply contains a html5 video tag with source and a bit of css for styling.
The css I'm using makes the video take up the full area of the browser page which is working fine, but I want to disable the ability to enter fullscreen (as in, taking up full area of desktop).
I can hide the fullscreen button in css by doing:
::-webkit-media-controls-fullscreen-button {
display: none !important;
}
But the video can still enter fullscreen when double-clicked.
I've tried moving the video to a secondary page sourced in an iframe with donotallowfullscreen but this still doesn't work, double-clicking still results in fullscreen.
<iframe src="Player.html" allow="autoplay; encrypted-media" donotallowfullscreen></iframe>
What else can I try to prevent the video from entering fullscreen? I've tried searching around on Google but all of the results are in reference to Youtube's video embedding.
Not sure why necessary, but here's full reproducible code....
Index.html
<html>
<body>
<iframe donotallowfullscreen src="Iframe.html"></iframe>
</body>
</html>
Iframe.html
<html>
<body>
<video controls src="video.mkv"></video>
</body>
</html>

There is the controlsList attribute which is in the process of being defined, but there are still some issues to sort out before it's official, and currently it seems to be implemented only in Blink browsers.
video{ max-height: 100vh; }
<video controls
src="https://upload.wikimedia.org/wikipedia/commons/a/a4/BBH_gravitational_lensing_of_gw150914.webm"></video>
I didn't checked for IE, but for Safari, they don't even respect the allow of an <iframe> when the fullscreen request has been made by the <video>'s controls, because this fullscreen mode is not the one defined by the Web-API, but rather a native mode. This is also why in this browser we can't even call document.[vendor]ExitFullscreen() (in Firefox this would work because their current UI is using the Web-API).
So the only way to make this work in all browsers would be to make your own controls entirely, and to block the clicks on your <video> element (pointer-events: none).

Just I added controlsList="nofullscreen" attribute. But playing the video on click on the center of won't work. So I added onclick="vd.play()" attribute. <video id="vd" src="video.mp4" onclick="vd.play()" disablePictureInPicture controls controlsList="nofullscreen"></video>

Related

Fullscreen icon is missing on Wordpress using iframe

I'm creating a Wordpress site using HelpGuru by HeroThemes (https://herothemes.com/)
I added an iframe to show a vimeo video. This is my code snippet:
<div style="padding:55.83% 0 0 0; position:relative;">
<iframe src="(url)" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute ;top:0; left:0; width:100%; height:100%;" title="(title)">
</iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
I removed the original url and title of anonymous reasons.
What I expect, and what I also get when I add this code snippet in any html editor (like W3Schools') is to display the video including a fullscreen button to show the video in fullscreen.
However the button is always missing.
What I tried:
I added allow="fullscreen" (How to enable fullscreen in IFrame) aswell as the allowfullscreen tag (see iframe docs).
In the wordpress preview it also does seem to work. Theres no extra styling added to it.
I also tried to have a look at the iframe with the chrome dev tools, there the buttons' display property is set to "none". However just forcing it to be "flex" is not going to work, as the button would not do anything then.

How to make audio play on body onload?

Yesterday I downloaded a responsive navbar tutorial and saw that the author had used button click sound using JavaScript.
So I try the code (copying it) and was able to make it too. When the button is clicked the background music plays well. But when I try adding the same code to body onload function the music din't play.
So, I thought the code has some error but suddenly I opened the HTML file from Opera Mini for Android and the background music appeared. The code which isn't working in advanced browsers like Chrome is working in Opera Mini. Why is this happening?
<!DOCTYPE html>
<head>
<title>Untitled</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="" type="text/css"/>
<script>
function stir0(){
var bbs = new Audio('media/background.ogg');
bbs.play();
alert('bb');
}
function pl(){
var Loops = new Audio('media/button_click.ogg');
Loops.play();
}
</script>
</head>
<body onload="stir0()">
<button id="clk" onClick="pl()">Here</button>
</body>
</html>
As of April 2018, Google had changed their Autoplay Policy. It was implemented in Chrome v.66.
Relevant snippet from the Policy:
Chrome's autoplay policies are simple:
Muted autoplay is always allowed.
Autoplay with sound is allowed if:
User has interacted with the domain (click, tap, etc.).
On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously play video with sound.
On mobile, the user has added the site to their home screen.
Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.
The way I understand it, and it seems to be reflected in your experience: Chrome browser mutes any autoplayed audio if no action of the user had been made with the domain that specificly requests the audio to be played. Once a user has made a positive interaction, the rules soften and the media may be played without consent renewal.
You can do the first one (the background music) with pure HTML:
<audio autoplay>
<source src="media/background.ogg" type="audio/ogg">
</audio>
The second one (the button click) you do like this:
//JS
var Loops = new Audio("media/button_click.ogg");
//Make sure this is a GLOBAL variable.
And in HTML:
<!--HTML-->
<button id="clk" onClick="Loops.play()">Here</button>

Vimeo fullscreen : video appears under the website's elements

I'm having a really strange issue with vimeo & html5 fullscreen player.
I have this code in my template :
<iframe src="http://player.vimeo.com/video/91593219/?autoplay=1" width="100%" height="615" frameborder="0" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups"></iframe>
The iframe loads fine, but when I click "fullscreen", the browser goes in fullscreen mode with the video appearing UNDER the site (I have relative and absolute divs visible while watching the video).
You can experiment this bug here : http://webrelais.net/pingpong/projet/proxipolis
Has anyone experienced this issue ?
Thanks a lot for your help !
I solved the problem by disabling animate.css style on the element which included my iframe.
Nevertheless, I tried with z-index modifying, jQuery for changing styles but nothing worked, the only one solution was removing Animate CSS class.
Was the same bug in Safari (13.0.4). In my case parent div of an iframe had will-change property. Fullscreen works correct after I've removed it.
A quick look shows that it is related to CSS or Javascript for the element - since removing the id for that element makes fullscreen video work in Chrome at least.
Solve the problem by isolating CSS and Javascript that you use for that element and you should be able to find what causes it.
animation-fill-mode: both; in parent elements seems to cause this issue with fullscreen videos.

SoundCloud Autoplay in iFrame has Stopped Working

this page http://falsefeatures.com/aBookForPrivateReading/PlayHeavyWater should autoplay as I understand it.
the code looks like this:
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/108973626&color=9900EE&auto_play=true&show_artwork=false"></iframe>
the audio does play if button clicked and I can change the button color and show or hide the artwork, as you'd expect. but no autoplay?
I've simplified for debug purposes but I have another page which I'd swear was autoplaying last week just fine. I have tried different browsers, computers, connections: what gives?
~Marqso
your link auto plays fine for me on Chrome.
It won't work on iOS devices though – there's a limitation on Apple's side that prevents media from auto playing in order to save on user's traffic.
This was caused by a regression on our part and was fixed last week.
https://twitter.com/flaneur/status/398439823234846720

HTML5 video playback on the iPad?

I'm developing a web app, and having trouble with HTML5 video for iPad. This code works fine every where else, not iPad. I just get a video frame, a black box. The HTML is generated in javascript, it is not hardcoded per se.
<video preload="true" src="places/video.mp4" class="c1" id="it" height="480" width="385" controls="">
</video>
Anyone know what could be wrong? (Videos are encoded using handbrake CLI and ffmpeg2theora as specified in Dive Into HTML5).
I think the issue is that it isn't http://serverlocation/places/video.ext. How would I alter it to look like that (with no guarantee that I know server location.) Part of me doubts this because images are served without the http:// and they work fine.
I think I know the problem. iPad chokes when presented with multiple <source> tags. What you can do (to do it simply) is use jQuery to add/remove objects.
HTML:
<div id="movie-wrapper">
<div id="webkit-wrapper">
<video width="480" height="360" controls="controls" src="places/video.mp4"></video>
</div>
<div id="other-wrapper">
<!-- Do your video in a new wrapper for all others -->
</div>
</div>
JS:
$(document).ready( function(){
if($.browser.webkit) {
$('#other-wrapper').remove();
} else {
$('#webkit-wrapper').remove();
}
});
Ideally, you're going to have a conditional for every major browser since you need at least three types of video for complete compatibility. But something like this should resolve the iPad webkit choke.
Edit
Rereading your comment, I want to make sure of something – that you have controls="controls" on the video element as above. From everything I've read, iPad requires that to enable playback. Otherwise, you get... a black screen.
And you might also look into whether there's an encoding problem, per HTML5 Video "Black Screen" on iPad
Edit
Other considerations:
Webserver may not be reporting the filetype properly (you can check this in the error console if it transfers with a warning about type)
If a poster is loading, try directly accessing the link to the mp4 video (see if quicktime plays it in the browser).
Other than that, I have no idea – there's going to continue to be miscommunication of facts unless you post a link to your page with the non-working example.

Categories