How can I disable fullscreen mode in Kaltura's HTML5 media player? - javascript

I'm loading Kaltura's video player in a learning management system (essentially a CMS for educators and their students), and it gets presented inside an iframe. With current browser security protocols as they are, full screen viewing is not possible. I need to disable the fullscreen capability for this use case. Here's an idea how we have the embed set up:
loadMovie: function(id) {
var autoPlay = this._autoPlay;
var allowFullScreen = this._allowFullScreen;
kWidget.embed({
'wid': '_' + this._partnerId,
'targetId': this._playerTarget,
'uiconf_id': this._playerId,
'entry_id': id,
'params': {
'wmode': 'transparent',
'allowFullScreen': allowFullScreen, // not working for html player
},
'captureClickEventForiOS': true,
'readyCallback': function (playerId) { // autoPlay movies
var kdp = document.getElementById(playerId);
kdp.kBind('mediaReady', function() {
kdp.sendNotification('doPlay');
});
}
});
}
I've been able to hide the fullscreen button with CSS, but a user can still (intentionally or inadvertently) double-click the playback area to achieve fullscreen. Because of the iframe issue, the video essentially disappears, leaving the user confused and unable to easily close the player modal.
I'm passing a data attribute from the movie links to the player init function to indicate when fullscreen should be unavailable. I just need to find out how to actually do the disabling. Kaltura's documentation has not been helpful.
I've also fiddled with legacy Flash params, but they have no effect on the HTML 5 player. I'm using version 2.11. Thank you.

You need to put this in a script tag:
mw.setConfig('EmbedPlayer.EnableFullscreen', false);

Why don't you simply put a div overlay on top of the player with z-index, say 10000. That way, even if some double-clicks, they are clicking on the DIV and nothing happens. Continue with the CSS button hiding.

Related

How to disable HTML Video Player playback speed / three dots

I don't want to show playback speed in my video, is there any controls or controlList properties to disable that option like controls disablepictureinpicture controlslist="nodownload"
Add the parameter 'noplaybackrate' to controlsList. It works for me.
you can add the following:
video.controlsList = "noplaybackrate";
however if you want to deactivate others as well, then as such:
video.controlsList = "noplaybackrate nodownload"
and you have the last one in the list "Picture in Picture"
disable this one as such:
video.disablePictureInPicture = true;
now your three dots are gone
and to be complete to also disable the full screen function
video.controlsList = "noplaybackrate nodownload nofullscreen"
According to the docs only three options are available (nodownload, nofullscreen, and noremoteplayback) and none seems to do what you want.
And you can't style the browser's default control set, but you can use the (JavaScript) Media API to build your own control set which of course you can style in any way that you like.
See this CodePen.
As of Chrome version 104 adding noplaybackrate to controlsList hides the "Playback Speed" from the menu, but users can still right-click on the video and choose "Show all controls" to bring it back!
Additionally, adding noplaybackrate to controlsList doesn't work in Firefox as of version 103.
What I did to force my video to play at regular rate (1) is to subscribe to onratechange and bring it back to the playback rate that I want as below:
let video = document.getElementById(mediaElementId);
video.onratechange = function () {
video.playbackRate = 1;
};

Enable/Disable fullscreen option video.js HTML5

How can I enable/disable the fullscreen option of one video from my post tag HTML in Wordpress? I'm using Video.js.
I would not like to make it for ever, just decide which video I want with it or without it, anytime. I tried AllowFullScreen="true/false" but it doesn't work.
Current version of video-js (6.x.x) supports disabling of fullscreen button also by fullscreenToggle option. You can simply set it during init of the player like this:
videojs("my-video", {
controlBar: {
fullscreenToggle: false
}
});
However, I observed that it doesn't mean that you are not able to enter fullscreen by hand gesture on mobile devices. (For example reverse pinch on iPad - two fingers on the screen and moving them apart). That's another story - I'm dealing with it by listening for fullscreenchange event and checking isFullscreen() state of the player (fullscreenchange event triggers on opening but on closing of the fullscreen as well), if it's in fullscreen then I'm calling exitFullscreen() function. Just like this:
videojs("my-video",{controlBar: {fullscreenToggle: false}}).ready(function(){
let myPlayer = this;
myPlayer.on("fullscreenchange", function(){
if(myPlayer.isFullscreen()){
myPlayer.exitFullscreen();
}
});
});
Add class to video as below
.vjs-nofull .vjs-fullscreen-control {
display:none;
}
to
<video class="video-js vjs-default-skin vjs-nofull" ....></video>
Hope it works
Looking through the video.js documentation, getting the child component named FullscreenToggle is a pretty involved process. For me, only myPlayer.children()[5].children()[7] did the trick, where myPlayer is defined here:
videojs("lodestar_video").ready(function(){
myPlayer = this;
});
However, calling .disable() and .disposed() didn't work and returned undefined.
What worked for me was a CSS solution: making sure it doesn't appear using display:none and then setting the appropriate margin so the volume control doesn't go out of place.
.vjs-fullscreen-control {
display: none;
}
.vjs-default-skin .vjs-volume-control {
margin-right: 20px;
}
The downside of this is the small overhead since the fullscreen button is still created and loaded, only not displayed, but this should be near-negligible in the light of loading an entire video.
In 7.5.0 you can use this to hide the full-screen button and disable double-click
videojs("my-player", {
controlBar: {
fullscreenToggle: false
},
userActions: {
doubleClick: false
}
});

How to hide title when video is played?

I have put my own custom title absolutely positioned over the top of an Vimeo video embed (you can see the dev site here http://ourcityourstory.com/dev/). When I click on the Vimeo video I want the title absolutely positioned over it to hide.
How do I accomplish this? None of the JS I'm writing is working.
Here is my non-working code:
$(document).click({namespace: this}, function (e) {
var t = e.data.namespace;
if ($(e.target).parents("#video-slider-wrapper iframe").length > 0 || $(e.target).is($("#video-slider-wrapper iframe"))) {
$("#episode h1").hide();
}
});
UPDATE: pimvdb's example listed below does exactly what I need my page to do — however, I keep getting the error "$f is not defined" on my page.
Your click handler does not work because the iframe is cross-domain. However, you can use the dedicated Vimeo API to add a listener when the play event is fired:
var player = $f( $('#player1').get(0) );
player.addEvent('play', function() {
$("h1").hide();
});
​

Flowplayer event when buffering ends

I'm using flowplayer to play an MP4 video on a website from a NGinx server with H264 streaming plugin, and the pseudostreaming plugin for Flowplayer. Everything works fine.
I implemented several javascript functions for deep linking into the video, with the $f().Seek() method, which also works fine.
Here is my problem : when the user seeks to a particular place in the video, I need to disable some elements on the page, to prevent him or her from clicking more times, jamming all the sync. Then, I want to re-enable the same elements when the video starts playing again.
This code disables the elements and is placed in the click event of some buttons. Straightforward :
$('.cur-left, .cur-right, .book-temps').hide('fast');
This code enables them :
$('.cur-left, .cur-right, .book-temps').show('fast');
I can't find where to place my "re-enabling" code, as no event seems to happen when the video restarts playing after buffering after a seek.
Any advice on an unknown event matching or a trick to fit it some other way would be unvaluable.
Thanks for reading.
You need handle onBufferFull event:
<!-- player container -->
<a href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv" id="player"
style="display:block;width:425px;height:300px">
<!-- .. with a splash image -->
<img src="http://static.flowplayer.org/img/home/flow_eye.jpg" alt="Search engine friendly content" />
</a>
<div id="info">
</div>
and script:
$(function(){
var info = document.getElementById("info");
flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
// this will enable pseudostreaming support
plugins: {
pseudo: { url: 'flowplayer.pseudostreaming-3.2.7.swf' }
},
// listen to following clip events
clip: {
// make this clip use pseudostreaming plugin with "provider" property
provider: 'pseudo',
// all videos under this baseUrl support pseudostreaming on the server side
url: 'http://pseudo01.hddn.com/vod/demo.flowplayervod/Extremists.flv'
},
onBufferFull: function() {
info.innerHTML += "buffer full<br/>";
}
});
});
See example here

Flash in fullscreen mode works in <embed>, but not work within <a> tag

I have this code
<div id="c01" class="hider">
< a href="flash.swf" class="bump">flash</a>
</div>
and it displays flash content within a bumpbox (lightbox alternative) window. It works perfectly, but there is a fullscreen button in the flash animation and it do not works. The other button (to stop the animation) works ok.
I find out, that with this
<embed src="flash.swf" width="100%" height="100%" allowFullScreen="true"> </embed>
fullscreen button works fine, but the flash animation runs since the page is loaded and I have about 50 of those animations, so I need to run only one of them at a time. I need to make it clickable (within ) and with working fullscreen button at the same time. Is it possible? Thank you!
The issue you're having is actually coming from Mootools. Mootools has an Flash embed class called Swiff, which is what BumpBox uses when you pass an SWF in your link.
Unfortunately, I think you're either going to have to hack into BumpBox or Mootools to get full screen permission working.
If you look into the expanded version of BumpBox 2.0.1, you will see where Swiff is instantiated, around line 372:
var obj = new Swiff(content, {
id: 'video',
width: maxw-40,
height: maxh-40,
container: div
})
You may be able to pass in the additional parameter you require here, which would look something like this:
var obj = new Swiff(content, {
id: 'video',
width: maxw-40,
height: maxh-40,
container: div,
params: {
allowFullScreen: true
},
})
If that fails you will have to make the adjustment to the Swiff class itself. Open up Mootools and search for Swiff=new Class. That will lead you to the code that creates the Flash object. Finding the params list should be easy from there, it looks like:
params:{quality:"high",allowScriptAccess:"always",wMode:"window",swLiveConnect:true}
and you would just need to add the fullscreen permission:
params:{allowFullScreen:true,quality:"high",allowScriptAccess:"always",wMode:"window",swLiveConnect:true}
Some browsers can't open a Flash file without Flash container (embed).
The embed code in your post is fine, put it on a PHP page and replace:
src="flash.swf"
with
<?php echo $_GET['flashurl']; ?>
Then you can put as link: nameofphpscript.php?flashurl=flash.swf

Categories

Resources