I'm using the Strobe media player (with OSMF). I need to re-size the player when someone clicks a re-size button (built into the player). How can i do this? I've searched high and low but found no results.
Set scaleMode to "letterbox", then the player automatically adjusts its size depending on its parent div. You can then change its size, for example using jquery:
function getHeight() { return $(window).height(); };
function getWidth() { return $(window).width(); };
$(window).resize(function () {
$("#strobemediaplayback").css({ height: getHeight(), width: getWidth() });
});
Related
I would like to remove volume control on videojs player.
Anyway, when the user click on fullscreen, thevolume control must appear again.
So I want to remove volume control only when the player is not on fullscreen. Is it possible in videojs?
const videoplayer = videojs('video-player', {
controlBar: {
'pictureInPictureToggle': false,
'volumePanel': false,
}
});
video.js uses styles for states such as fullscreen, so you can control this with CSS:
.video-js .vjs-volume-menu-button {
display:none;
}
.video-js.vjs-fullscreen .vjs-volume-menu-button {
display:block;
}
PhantomJS is doing a great job of capturing web pages into image files for me. I am using a script based on rasterize.js.
However, for certain web elements of a fixed size, I need the resulting image to match the size of the web element.
e.g. I have a page like this:
<html>
<body>
<div id="wrapper" style="width:600px; height:400px;">
Content goes here...
</div>
</body>
</html>
In this example, I need it to produce an image sized at 600x400. Is thre a way to get the viewport size dynamically based on a web element in the page I am rasterizing.
I know this one is not a easy one... Ideas?
Thanks
Wow. Not that hard after all. Just set the viewport really big and use the cropRect function. What a great tool!
Mods to rasterize.js:
page.open(address, function (status) {
if (status !== 'success') {
console.log('Unable to load the address!');
} else {
var height = page.evaluate(function(){
return document.getElementById('wrapper').offsetHeight;
});
var width = page.evaluate(function(){
return document.getElementById('wrapper').offsetWidth;
});
console.log('Crop to: '+width+"x"+height);
page.clipRect = { top: 0, left: 0, width: width, height: height };
window.setTimeout(function () {
page.render(output);
phantom.exit();
}, 200);
}
});
I have 2 facebook app one that is 872px height and another one that is 712px height. For the 827px app I have successfully re-sized the app from 800 to 872px using the facebook JS SDK. But for the 712px I haven't been able to get it down from 800px. Is there a minimum height for facebook canvas app or I'm doing something wrong?
Apparently Canvas APP can't go lower than 800 px.
have you tried to set the height dynamically? this worked for me as i am attempting to display multiple pages that are less than 800px in height. the usual height of my page tabs were ~700px.
window.fbAsyncInit = function() {
FB.init({
appId: window.FB_APP_ID
});
// set height dependent on page (min height is 800px)
// but we are attempting to get it shorter
var body_height = $('body').first().outerHeight();
FB.Canvas.setSize({
height: body_height
});
}
what also worked for me, if not grabbing the body height is to set the height to something shorter than any of your pages at load, then triggering the setAutoGrow() function to expand it to the proper height with some delay. though this will cause your canvas to be the initial set height (eg. 480px) then will expand to size whenever your timeout fires.
window.fbAsyncInit = function() {
FB.init({
appId: window.FB_APP_ID
});
FB.Canvas.setSize({
height: 480 // some height shorter than necessary
});
setTimeout(function(){
FB.Canvas.setAutoGrow();
}, 500);
}
To deal with it:
FB.Canvas.getPageInfo(
function(info) {
// console.log(info);
if (info.clientHeight< 800) FB.Canvas.setSize({ height: 800 });
}
);
I'm embedding Youtube's experimental HTML5 iframe capabilities in a website through use of the javascript API:
YouTube Player API Reference for <ifram> Embeds
I'm aware of the z-index issues this brings about, and the fix that involves adding wmode=opaque (or wmode=transparent) to the iframe url:
Fixed. My Youtube iframe z-index is ignored and is above a fixed div
When just using the javascript API, how do you set wmode to opaque:
function onYouTubePlayerAPIReady() {
var player;
player = new YT.Player('player', {
width: 1280,
height: 720,
videoId: 'u1zgFlCw8Aw',
// if I try adding wmode: opaque here, it breaks
playerVars: {
controls: 0,
showinfo: 0 ,
modestbranding: 1
// if I try adding wmode: opaque as a playerVar here, it breaks
},
events: {
'onReady': onPlayerReady,
'onPlaybackQualityChange': onPlayerPlaybackQualityChange
}
});
}
Any ideas?
Hmmmm...
Well, it appears I was hasty in posting the question. It appears that the correct form for setting wmode within the API is:
function onYouTubePlayerAPIReady() {
var player;
player = new YT.Player('player', {
width: 1280,
height: 720,
videoId: 'u1zgFlCw8Aw',
playerVars: {
controls: 0,
showinfo: 0 ,
modestbranding: 1,
wmode: "opaque"
},
events: {
'onReady': onPlayerReady,
'onPlaybackQualityChange': onPlayerPlaybackQualityChange
}
});
}
Hopefully this helps someone else.
As far as I can tell it is the default to be opaque. I tested changing wmode to transparent, opaque and removed it. When it wasn't specified it was automatically set to opaque.
I'm not sure if this always was the case, but it definitely is now.
Also remember this only applies when using the Flash player. You can disable the HTML 5 player to test this which is the default with the 'Disable Youtube™ HTML5 Player' plugin. Then just inspect element and drill down till you find the EMBED tag.
I have two circles, one is small (thumb) another one is big (info), and when the user hover over the small (thumb), then the small icon need to resize in to big one. I also need to show the new information in the big. I think I have to do this by width and height animation, because small is 100px X 100px, and big is 200 X 200 size.
Please advice on the best way to do this. I would like to avoid using plug-ins.
using jquery 1.4.2 or up, you can achieve this by using:
$(".smallCircle").hover(
function () {
$(this).animate({
width: '200px',
height: '200px'
}, 200, function() {
// Animation complete.
//do whatever
});
},
function () {
$(this).animate({
width: '100px',
height: '100px'
}, 200, function() {
// Animation complete.
//do whatever
});
});
put the class "smallCircle" in the small circle.
P.S. in each state of the hover, you can control what happens after the animation is done (the place where I put "//do whatever"), that's the place where you could insert the content of the big cicrle.