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
}
});
Related
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.
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();
});
I am using the jquery function to toggle a youtube video element on my site. It works great and shows/hides its as needed. However I can't find a way to stop the video playing on hiding the div. I keep reading about destroying the element then recalling it on the toggle but I don't know enough about the code to know how or where to do that within the toggle functions. Any help would be amazing. I've added my code below
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
.vidblock
{
background:#ccc;
width:430px;
height:320px;
display:none;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('.toggle').click(function(){
$('.vidblock').toggle("slow");
});
});
</script>
and
<h3>Click to view a video of how and where to enter <?=$merch_array['Name']?> <?=$merch_array['Term_Used']?>s</h3>
Okay! This one took me a little while to figure out, and when I tell you it's going to make sense.
Make sure you are calling the youtube api:
<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
When hiding your div, use jquery to change the source of the video to the same video, without using autoplay. This stops the video from playing, and also sets it back up.
Another cool thing I found, is when opening my div, I turned it on autoplay.
You can see a demo on this page: http://advantageanywhere.com/index.aspx?sid=250
Click on the play link and it's going to open a lightbox (similar to what you are doing, showing and hiding the div. In it's original state I have it sitting there while hidden as a regular embed link. Once clicked, then it turns to autoplay, then when escape or X is clicked, it will close the lightbox and also change the video back to a normal embed (stops the playing)
We will take for example the following video:
The original embed from youtube [adding AN ID ( youtube ) to it to target in jquery, and the parm for youtube api ( ?enablejsapi=1 ) ]:
That is how you should have the image started off in it's hidden div.
Once the div is opened this is the jquery you need:
$('#youtube').attr("src", "http://www.youtube.com/embed/AAbOWbquDWU?enablejsapi=1&autoplay=1"); /* starts youtube video after lightbox opens */
Now, when the div is being hidden, this is the jquery you need:
$('#youtube').attr("src", "http://www.youtube.com/embed/AAbOWbquDWU?enablejsapi=1"); /* stops video from playing on youtube after hiding div */
Below is the entire script I have setup. I tried throwing this together for you in a fiddle but I don't have the time right now and just stumbled upon your question when I am trying to punch out a deadline.
If you have any other questions I don't mind helping out, please.
$(window).load(function(){
var KEYCODE_ESC = 27;
$(document).keyup(function(e) {
if (e.keyCode == KEYCODE_ESC) { closeLightBox(); }
});
function closeLightBox() {
$("#lb1, #lb4").fadeOut();
$("#featureContent, #videoContent").hide();
$('#youtube').attr("src", "http://www.youtube.com/embed/clJe9U38ids?enablejsapi=1"); /* stops video from playing on youtube after hiding div */
}
/* ------------ Light Box 4 Video ------------- */
var lightBox4 = $('#lb4'),
videoContent = $('#videoContent');
$('#anywhereVideo').click(function() {
lightBox4.fadeIn(function() {
videoContent.show();
$('#youtube').attr("src", "http://www.youtube.com/embed/clJe9U38ids?enablejsapi=1&autoplay=1"); /* starts youtube video after lightbox opens */
});
});
$('#close4').click(function() {
closeLightBox();
});
});
You don't have to destroy the element, just use the YouTube JavaScript API ( http://code.google.com/apis/youtube/js_api_reference.html ) to pause or stop the video.
You give the object a playerapiid, then you can target it with JavaScript.
You could use 'detach' -
$(function() {
var savedNodes;
$('.toggle').toggle(function() {
$('.vidblock').hide('slow', function() {
savedNodes = $('yourplayerid').detach();
});
}, function() {
$('.vidblock').append(savedNodes)
$('.vidblock').show('slow');
});
});
Demo - http://jsfiddle.net/Sf4LT/2/
First of all, I can't upgrade to a newer version of the player, because I need the displayclick=fullscreen option to work, and it doesn't with version 5.
So, what I need to do is this: have the player auto-start with no volume and no controls on the page (this works just fine), and when the user clicks the screen the player must go full-screen and the volume must turn on.
The problem is all Javascript interaction seems to be completely ignored by the player, and I really can't see where the problem is.
When the page is loaded, I embed the player:
var so = new SWFObject('path_to_player.swf','div_id','200','120','10');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','sameDomain');
so.addParam('bgcolor','#000000');
so.addParam('flashvars','file=path_to_playlist.xml&autostart=true&displayclick=fullscreen&controlbar=none&volume=0&icons=false&image=path_to_thumb.jpg');
so.write('div_id');
This seems to work just fine, the player is loading.
Then I add the event listeners:
var player = null;
function playerReady(p) {
player = document.getElementById(p.id);
addListeners();
}
function addListeners() {
if (player) {
console.log('add the listener');
console.log(player.getConfig().volume);
player.addControllerListener("RESIZE", "checkResize");
} else {
setTimeout("addListeners()", 100);
}
}
function checkResize(obj) {
console.log('resized');
if (obj.fullscreen) {
player.sendEvent("VOLUME", "60");
} else {
player.sendEvent("VOLUME", 0);
}
}
The "add the listener" message gets displayed in the console, but the second one, with the player's volume doesn't, and neither does the "resized" one when the player enters or exits fullscreen (and, obviously, the volume doesn't turn on).
I've tried other listeners, for both model and controller, and they don't seem to work. Sending events doesn't work either.
I've tried running just the code for the player separately, to make sure there are no other things interfering with the code, but I still have the same problem.
Well, it seems I've found the answer myself. Upgrading to a newer version of swfobject and using swfobject.embedSWF() seems to work just fine.
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