phoboslab
commented
4 years ago If you create the Player in JS using new JSMpeg.Player() and attach it to an existing Canvas, it will not change the Canvas' style, but just the internal resolution. I.e. it will set width and height but not style.width or style.height, so you should be able to specify these yourself. I'm not sure why it isn't working for you. Do you have an example online somewhere?
Have a look at the JSMpeg demo page - I believe this does what you want. It just specifies width:100%; for the #video Canvas element.
Edit: reading your issue again: I think you're just missing #video-canvas { width: 100%; }
Hi All -
I'm looking for help creating a responsive JSMpeg player that can adapt to resizing of the browser window. I've tried using CSS to set the width of the video player's canvas to 100%; however, JSMpeg seems to change the size of the canvas as soon as it begins playing the video. From what I can tell digging through the code, it appears JSMpeg uses MPEG1.decodeSequenceHeader() to read the width and height of the incoming frame and then adjusts the canvas to match. Is it possible to scale the output based on the browser's size?
<canvas data-dojo-attach-point='videoNode' id='video-canvas' class='FMV_videoPanel'></canvas>.overwatch-f-m-v FMV_videoPanel { position: relative; width: 100%; height: auto; top: 0px; left: 0 px; background-color: blue; }A bit more about my configuration....I'm using ffmpeg to stream a previously recorded .TS file in its native resolution (1080x720p) to a Node.js server. In turn, this server creates a websocket connection to a web application running the JSMpeg player. I envision users accessing this web application from multiple platforms / browsers, and thus desire the scaling of the video to be responsive to their specific configuration.
What am I doing wrong? Thank you in advance for the help.