I want to publish videos using Video JS player, but cannot get it to scale in response to different screen sizes.
On the Video JS homepage, the demo video scales (looks like from 970px to 600px width). But the code you get if you hit the "embed this player" button does not scale. Here is that code in action:
http://www.casedasole.it/video/index.html
In the embed code, the size of the video is specified (640 x 264), but the demo page code gives no size for the video element. I've looked at the source of the video js page, but there's too much going on (13 scripts and 4 stylesheets) to track down what's making it scalable. There's also no video js forum, so they recommend asking here.
Anybody know how it can be done?
It comes from http://www.video-js.com/js/home.js l72
videojs("home_video", {"height":"auto",
"width":"auto"}).ready(function(){
var myPlayer = this; // Store the video object
var aspectRatio = 5/12; // Make up an aspect ratio
function resizeVideoJS(){
// Get the parent element's actual width
var width = document.getElementById(myPlayer.id()).parentElement.offsetWidth;
// Set width to fill parent element, Set height
myPlayer.width(width).height( width * aspectRatio );
}
resizeVideoJS(); // Initialize the function
window.onresize = resizeVideoJS; // Call the function on resize
});
You can make video.js player scalable by using media queries. On smaller screens, change the css of video js controls by media queries. This worked for me.
Related
Doing a simple 2d physics engine with HTML5 Canvas (collisions,graphing). I want a full screen canvas with a header navbar. How can I create this layout and handle resizing correctly?
I have tried several solutions:
One involved programatically resizing the canvas to fill its container onload() and onresize(). Canvas contents stay the same.
Another involved a responsive canvas with percents whose contents shrunk as the canvas shrunk.
Can anyone help lead us to the holy grail? The most important question is your opinion about canvas resizing best practices (should we do it?). If so, what about the debate between resizing the canvas pixels and media queries vs flex/percents vs javascript container measuring, etc.
Example/Attempts:
Example-1:
Here is the Javascript code which I used in v1 of my mock up. The corresponding HTML was just a basic document with a header and a 100% container with the canvas inside the container and being set to fill the container.
window.onload = function(){
init();
};
window.addEventListener("resize", init);
function init(){
console.log("init");
initCanvas();
drawCircle();
}
function initCanvas() {
var content = document.querySelector(".content");
var canvas = document.querySelector(".myCanvas");
canvas.width = content.clientWidth;
canvas.height = content.clientHeight;
}
Example-2:
This CodePen is an example of the resizing canvas that I made. It still retreats up under the navbar during extreme resizing though.
Resizing
It will depend on how you are rendering.
requestAnimationFrame is best practice.
Generally best practice to make any changes to the DOM is to use requestAnimationFrame to ensure that changes are presented in sync with the display hardware's refresh. requestAnimationFrame also ensure that only when the page is visible will the changes be made. ie (if the client switches tabs to another tab, your tab will not fire any requestAnimationFrame events)
It is also best to keep the canvas resolution as low as possible. Keeping the canvas at a resolution higher than the display means you will be doing a lot of needless rendering on portions that are off screen, or if you are scaling the canvas via CSS the down or upsampling can result in a variety of unwanted artifacts.
The problem with the resize event.
The resize event is triggered by a variety of sources, OS events that change the window size, mouse events, or from Javascript. None of these events are synced to the display, and some resize events can fire at very high rates (mouse driven resize can fire 100+ times a second)
Because resizing the canvas also clears the image data and resets the context state, each resize requires a re-rendering of the content. The rapid firing rate of the resize event can overwork the thread and you will start to lose events , the page will feel laggy and you can get parts of the page that are not updated in time for the next display frame.
When resizing you should try to avoid resizing when not needed. Thus the best time to resize is via a requestAnimationFrame callback.
Realtime rendering
If you are rendering in realtime then the best way to resize is to compare the canvas size to the container's or window size at the start of every render frame. If the sizes do not match then resize the canvas.
// no need for a resize event listener.
function renderLoop(){
// innerWidth / height or containor size
if(canvas.width !== innerWidth || canvas.height !== innerHeight){
canvas.width = innerWidth;
canvas.height = innerHeight;
}
// your code
requestAnimationFrame(renderLoop);
}
requestAnimationFrame(renderLoop);
Static renders
If you are rendering infrequently or as needed. Then you may be best off to keep a canvas at a standard resolution offscreen and use a resizable canvas on screen to render a view of the offscreen canvas.
In that case you keep a main loop alive that will check a semaphore that indicates that there is a need to update the view. Anything that changes the canvas will then just set the flag to true.
const mainCanvas = document.createElement("canvas");
const mCtx ...
const canvas = document.getElementById("displayCanvas");
const ctx ...
// when updating content
function renderContent(){
mCtx.drawStuff...
...
updateView = true; // flag the change
}
// the resize event only need flag that there is a change
window.addEventListener("resize",()=> updateView = true );
var updateView = true;
function renderLoop(){
if(updateView){
updateView = false; // clear the flag
// is there a need to change display canvas resolution.
if(canvas.width !== innerWidth || canvas.height !== innerHeight){
canvas.width = innerWidth;
canvas.height = innerHeight;
}
// draw the mainCanvas onto the display canvas.
ctx.drawImage(mainCanvas, viewOrigin.x, viewOrigin.y);
}
requestAnimationFrame(renderLoop);
}
requestAnimationFrame(renderLoop);
In your case using the above method (even for realtime) gives you better control over what part of the canvas content is seen.
CSS
Some poeple consider that CSS is the only place any type of visual content should be changed. The problem with the canvas is that CSS can not set the canvas resolution so if you use CSS you still have to set the canvas resolution.
For the canvas I do not set any CSS sizes and let the canvas resolution properties set the display size canvas.width=1920; canvas.height=1080; I can not see the point of having having to set the CSS width and height when there is no need to
Note: If you do not use requestAnimationFrame you will need to set the CSS size as you can not guarantee the canvas resolution will be set in time for the next refresh, while auto CSS updates (eg canvas.style.width="100%") will change in sync with the display device.
It works, you could check it with element inspect.
And I was thinking you wanted change the style width/height of canvas, not the width or height of canvas, they are quite different.
The width or height of canvas would just affect the ratio of things you draw on the canvas. And the CSS style width or height could change the display size of the canvas.
In my application, I am keeping so much of container with components. Now I have to create Fullscreen button for VideoDisplay. I tried some what like the followings
systemManager.stage.displayState = StageDisplayState.FULL_SCREEN;
And
this.stage.addChild(videoDisplay);
this.stage.displayState = StageDisplayState.FULL_SCREEN;
videoDisplay.width = stage.width;
videoDisplay.height = stage.height;
But no use.
Is any other way is there to do it?
If your app is going to fullscreen but your video doesn't then you should probably resize it using size of your full screen:
videoDisplay.width = stage.fullScreenWidth;
videoDisplay.height = stage.fullScreenHeight;
But since your video will probably deform when adjusting to different screen dimensions (3:4, 9:16 etc) you should resize only one side and adjust the other like this:
videoDisplay.width = stage.fullScreenWidth;
videoDisplay.scaleY = videoDisplay.scaleX;
Add the videodisplay object in a group and on fullscreen button click remove the video display from group and increase the group height and width according to screen resolution.
Then add the videodispaly object to the same group and set all the property like height = 100% width = 100% , etc
If its not working use videoplayer instead of videodisplay
I recently made and hosted Catifier.com.
It's working pretty good, except I have a bug with saving I have to work out, and it stretches images when you set them as the background.
Portrait images look horrible.
Would it be possible to detect the width and height of the image a user pastes in the box, then resize the canvas accordingly?
You have to load your picture in a DOM element to know its size.
So basicly when you want to do it, here are the steps :
Add your picture in an invisible DOM element.
You will be able to get picture width and heignt when onload event is lauched.
Then create your canvas depending those two variables.
All can be done in very few javascript lines.
Just gonna write up a very generic and likely not fully functional way to do this real quick just to give more of an idea.
var img = document.getElementByTagName('img');
for (var i = 0; i < img.length; i++) {
var width = img[i].width,
height = img[i].height;
// do some stuff with the img[i] width and height here if you like. for each image on the page...
}
Not how you'd end up actually doing it but it's just as simple as doing, img.width or height. If that helps more at all.
Using a combination of HTML and JS, how could I detect whether a device is in landscape or portrait and then change the size of an embedded video accordingly?
I know a fairly easy way to detect the screen orientation is to compare the width to the height and see which is larger. But how could I then use these variables in the code for embedding the video? The code is from Vimeo:
<iframe src="http://player.vimeo.com/video/15813517?title=0&byline=0&portrait=0" width="320" height="480" frameborder="0"></iframe><p>RCE: A Different Kind of Experience from John D. Low on Vimeo.</p>
You can actually do it without JS by resizing the iFrame windows using CSS. Look into CSS3 media queries. They allow you to set different layouts based on browser size, and work with most modern browsers.
W3C spec: http://www.w3.org/TR/css3-mediaqueries/
Good ALA Article: http://www.alistapart.com/articles/responsive-web-design/
Another resource: http://www.thecssninja.com/css/iphone-orientation-css
An easy way to get started with them is to use something like the Less Framework: http://lessframework.com/
I would reference the window height and width in javascript.
var h = window.innerHeight;
var w = window.innerWidth;
When the height is larger the device is portrait and vice versa. Then size the video width to 100% and grab the actual pixels of the width of the video in javascript then divide the width by the ratio wanted to get the height.
I would use something like to detect change.
(function oriChange(window){
var h = window.innerHeight;
var w = window.innerWidth;
if(h > w){
//portait
}else{
//landscape
}
setTimeout(function(){oriChange},500)
}(window))
I've just started working with the html5 canvas element.
I'm using the latest firefox and chromium browsers. And so far, they're
responding alike.
What I'm trying to achieve is scaling of an image without having to
specify the canvas or image drawing sizes. I'd like the canvas to fill
the browser window, and for the image to fill the canvas without
specifying any sizes. And to readjust canvas and its image on the
fly when the user adjusts the browser's frame.
The mansion pic that I'm testing with is 4284x2844.
I've managed to achieve dynamic scaling, but there's a problem...
if I don't specify sizes the image becomes blurry.
This is my first stackoverflow question and I haven't conquered the
formatting. So, please take a look at the small amount of code over
at pastebin:
http://pastebin.com/88faqJUx
Thank you for your help.
I found the solution...
Adding two lines, with no other changes, did the trick, though at this point I'm not exactly sure
why it was originally failing, but thoroughly happy to move on...
<canvas id="taba_main_canvas">
Your browser does not support the canvas element.
</ canvas>
<script type="text/javascript">
var main_canvas=document.getElementById("taba_main_canvas");
var cxt=main_canvas.getContext("2d");
// adding these next two lines solved the blurriness issues
//Set the canvas width to the same as the browser
main_canvas.width = window.innerWidth;
main_canvas.height = window.innerHeight;
var img=new Image();
<!-- mansion pic 4284x2844 -->
img.src="images/mansion_3344.png";
img.onload = function()
{
<!-- use the graphics full size and scale the canvas in css -->
cxt.drawImage(img,0,0,main_canvas.width,main_canvas.height);
}
</script>
Just one tiny little problem, the vertical size of the image is apparently just a few lines taller
than the canvas and so I get a vertival scrollbar. Dragging the browser window taller, which normally
would eliminate the vertical scrollbar has no effect. I've tried manipulating the canvas or image height
in the code, but that didn't change anything.
Still, having the image look clean is a big win. I'm moving on for the moment and will revisit this
later.
The other way to do this is to latch on to the document onresize event and resize the canvas by using window.innerWidth and window.innerHeight or some such thing. I've used it that way myself, but that was for something which I didn't care about IE support - see W3C DOM Compatibility - CSS Object Model View at quirksmode for info about browser support. Note also that the scrollbar width is included in innerWidth and innerHeight; if your page may need scrolling, you may wish to do something like subtract 20 and pad the containing element with a suitable background colour.
I presume that you're not just trying to draw an image - if you were just doing that, <img> would be a much better match.
Edit: jQuery has $(document).width(); and $(document).height(); which seem to get the right figures. Another edit: actually they're wrong; they're the document width and height, not viewport width and height, so I think innerWidth and innerHeight may be all there is.