Forum Discussion
Turn OFF Picture-in-Picture using JavaScript
We need to turn off picture-in-picture for videos. I found this online, but I need to know how to work this for Storyline videos (not iframes). Can this work in Storyline? How would I post the source... same as other internal assets, story_content/external_files/???
<video id="vid" controls muted>
<source src="https://www.w3schools.com/html/mov_bbb.mp4">
</video>
<script>
vid=document.getElementById("vid")
vid.disablePictureInPicture = true
</script>
or
const videoElement = document.querySelector('video');
videoElement.disablePictureInPicture = true;
in Firefox PiP icon is not actív for short videos
about:config => media.videocontrols.picture-in-picture.video-toggle.min-video-secs
default is 45 sec
Try:
const videoPip = document.querySelector('.video-pip');
videoPip.style.display = 'none'
Run with Execute JS when the timeline starts on this slideHello, Ramic! Sorry for the delay. The disablePictureInPicture seems to work best, but it does not override browser settings. We are still researching! I'll post back here if we find a solution. Given there is no Articulate Hero response, I'm assuming this is not possible...yet.
in Firefox there is only a reduced "disablePictureInPicture" available, because it' a user setting
in Firefox JavaScript can only disable the overlay PiP button - the PiP function and the other options to start PiP cannot be disabled
Yeah, it's a browser feature that isn't accessible to web properties. Firefox has implemented this feature autonomously, apart from the W3C working draft specification. Since the draft isn't a standard, Firefox opted not to adhere to it, whereas Chrome did. The script I shared earlier works across different browsers, at least in my experience. It simply hides the PiP icon in the Storyline video. Interestingly, I've noticed that the Storyline video PiP icon is no longer visible in Firefox. Is it just me?
I have noticed that I can hide the icon, but only temporarily; it can be overridden in FireFox. I know that MS did not have this option for quite a while. Don't know why they started up again with 508 such a huge deal these days. At least give us the option to disable it with code.
Checked. Thanks Jürgen.
Good morning! I did try the JavaScript suggested by BJ and Nedim, but neither seemed to work? I was, however, able to turn it off on the browser itself. Question for those on this thread, is this only an issue when using Review or will this also be a problem once I have my course in LMS? I haven't tested it yet in our LMS.
Both, in chrome.
Try this on start chrono :
// Sélectionne toutes les balises vidéo sur la page
const videos = document.querySelectorAll('video');
// Boucle à travers chaque vidéo
videos.forEach(video => {
// Désactive la fonctionnalité "Picture in Picture"
video.disablePictureInPicture = true;
});Thank you, Stephane! It is simpler. I'll give it a try! So far, using a screen combined with JavaScript is keeping (discouraging) learners from selecting the option for full screen available from within the browser. This does not address those who can use a keyboard to bypass the option.
It doesn't work with Firefox, any solutions?
Good question! AsJürgen Schoenemeyer mentioned earlier in this thread, and I found to be the case, if video exceeds a certain duration, Firefox does not work. I use a combination of JavaScript, player controls (no expand) and screens to discourage users from attempting to expand and select PiP.
Can you share your solution? But do you think there is a method to disable at all? Or whe have to use some tricks or change video player at all?
Inviato da Outlook per iOSjust testet 'disablePictureInPicture' on Firefox
const videos = document.querySelectorAll('video');
videos.forEach(video => {
video.disablePictureInPicture = true;
});it's working, BUT only after the next slide change
https://360.articulate.com/review/content/0e393000-d4aa-47e5-a969-259921709110/review
screen recording
https://360.articulate.com/review/content/38f1c251-c338-43fc-b190-3b0afde6d5b2/review
on slide 2 and 3 there is NO JavasScript - only on slide 1
patch PiP:
- add the script on the start slide of the course
- result: PictureInPicture ist disabled in the complete course after leaving the start slide - also on slides with several videos at the same time
but:
- if you have enabled 'course resume', then this solution is not enough
- this cannot be tested on Review 360, because resume ist globally disabled
hint:
- for testing PiP on Firefox you need a webserver
- with 'file:// ...' PiP is always disabled - as far as I could test
