Search the Community

Showing results for tags 'video'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 78 results

  1. Hello! I wasn't sure what to call it but I am working on a game with my husband (terrible idea, he's a designer..) and he asked if I could create a menu screen that plays out a little scene or something. He showed me this video as an example of Mario Kart SNES (only watch the first 35 seconds of so): I am aware of how to use states and all but, I only just started using Phaser and I was trying to think out how I would create something similar to the scene played out in the example (Maybe something not so complex), also if this is possible how would I loop this scene, since a user might leave the scene playing to see the end of it? Thank you in advance for all of your help!!
  2. Hi BabylonJs lovers, Now you can apply transparent background on videos with chromakey (green background). Check the demo here: Enjoy...
  3. HeightMap Video

    Any way to create an animated terrain using CreateGroundFromHeightMap with a VideoTexture instead of a static image?
  4. basic demo "Video" for HLS source

    Hi, I am trying to draw HLS video stream over PIXI video texture on iOS safari browser (iOS 11.2) referring but not succeeded. (Sorry for poor English as I am Japanese) When I set mp4 video as source, the demo code worked over iPhone + mobile safari (OS: 11.2). But when I set url of HLS (m3u8) and tapped play button, video did not drawn. I tried some change but not succeeded to play HLS stream over PIXI video texture. Below is my code, modified part of . ... function onPlayVideo() { // Don't need the button anymore button.destroy(); /// modify start // mp4 // (1) mp4 OK : video/audio played ( is my own server) // var texture = PIXI.Texture.fromVideo(''); // (2) mp4 OK : video/audio played // var texture = PIXI.Texture.fromVideoUrl(''); // HLS // (3) Not work : when play button pressed, loading m3u8 not started. // #http://184.72 ... is effective m3u8 stream // var texture = PIXI.Texture.fromVideo(''); // (4) Not work : when play button pressed, loading m3u8 not started. // var texture = PIXI.Texture.fromVideoUrl(''); // (5) Not work : when play button pressed, loading m3u8 started and audio play started. but video is not drawn on canvas. let baseVideoTexture = PIXI.VideoBaseTexture.fromUrl({ src: '', mime: 'application/' }); var texture = PIXI.Texture.from(baseVideoTexture); /// modify end // create a new Sprite using the video texture (yes it's that easy) var videoSprite = new PIXI.Sprite(texture); ... Please help/guide me regarding right way/manner to play HLS stream over video texture of PIXI. (i.e. how to fix above code) entire HTML which I modified is attached (pixi_video_hls.html) If more information needed for answer, let me know. Thank you in advance. pixi_video_hls.html
  5. Hi everybody: We are starting a VR project and, as we want it to be as cross-platform as possible with a unique base code, I'm thinking on giving a chance to BJS (maybe this is not the best case of use for this awesome engine). This is, indeed, not a genuine 3D Engine development, in terms of 3D scenes with different assets into it (characters, props, effects, ...), but a theatrical experience where the user sees an omni-directional stereo (ODS) pre-renderized CG animation, walking on the streets of a medieval village, going downhill from the cathedral to the palace. We need this approach in order to have high-quality CGs. As said we are not looking for a pseudo-VR, consisting in a planar projection of a 360º video on the inner side of a sphere, but a real VR video experience. Under this assumption we'll need a different video stream for each eye, in order to give the user a sense of depth as you look around in every direction. Near things look near, far things look far. Of course we'll be rendering texts and other CG effects overlays on the video streams. I'm searching through the docs and this forum for a starting point on all this, but I'm only finding pseudo-VR approachs. Is this type of "dual-camera" planned to be incorporated to BJS in future versions? Best regards.
  6. Is there a way to pass a video texture to a shader using a similar way as the one used to pass an image texture? shaderMaterial.setTexture("textureSampler", new BABYLON.Texture(imgTexture, scene)); i'm wondering if there are more ways to use video textures in babylon, i have seen that i can set a BABYLON.VideoTexture as a diffuseTexture of a material, but that seems limiting. What if i want to manipulate an object which has a material with a video texture, in the vertex + fragment shaders?
  7. extract image array from video

    I have an mp4 video file (H264 encoded). I want to create a PIXI.extras.AnimatedSprite from this video to be able not lagging reversed animation play; If I splice this video to image sequence the size becoming huge (about 8Mb vs 500kb of mp4). I want to load low size mp4 file and extract image array from it to create an Animated Sprite. Reverse playing directly from <video> by changing video.currentTime is lagging. I want to create something like hover/unhover animation.
  8. Interactive Video

    Hello everbody, I am new to this Forum. So please forgive me if I posted in the wrong thread. I am developing an Interactive visual novel made out of videos and video loops. Build up: - play video, go to loop; - choose dialog in loop; - play video, then go to action loop; - play mini game in action loop; - if won, repeat same process in different level, or game over. There are two things that I am struggling with: 1. How do I play an loop, after an video has been played? 2. I want to add an button during the loop, that will switch to an different video, depending on if it has been clicked fast enough in an certain time or not. I would be grateful for tipps. Thank you in advance!
  9. Video playback on ios devices.

    The video plays for few seconds and freezes with the audio on ios devices. Is there any workaround for this? If someone can help me with this it will be appreciated.
  10. What is the best way to record/screencast a video of your html5 game? I'm trying out some stuff so I can upload something to YouTube or Vimeo, here is what I've found useful so far. OBS Studio (Open Broadcaster Software) is a fully fledged suite for typical game-streaming stuff, there's a pretty advanced scene builder to arrange game + webcam + chatfeed etc. But it can also simply record a browser window to file as FLV/AVI/MP4. It works great with FireFox, although it seems a little resource intensive. ShotCut can do some simple video editing and the final rendering. It's pretty intuitive and it can do transitions, text/png overlays and even green-screen effects, but no fancy animated titles or sliding an image intro frame AFAIK. Btw I haven't tried Story Remix yet, which is Microsoft's replacement for Windows Movie Maker Has anyone else got any experience with recording their JavaScript game, for a promotional video or something like that?
  11. Shower visualization

    Hi everybody: These days I'm starting with a development involving the visualization of a shower. The software must run in desktop and mobile (this last by means of an hybrid app). In order to show the (falling) water I'm considering two strategies: chroma-keyed video with the water falling (I'm using both a mp4 and a webm containers); particles (I'm afraid of As I am concerned about the performance penalty of using particles (it needs 30,000+ and motion blur in order to resemble a "real" shower), we are tackling first the video way. Running a raw example from server, over Chrome (Win) and Safari (OSX), shows the alpha 100% clear: With Firefox (Developer Edition / 56.0b1) the alpha channel is instead shown with a degree of opacity: Do you think is possible to obtain a correct alpha in this last browser? Best regards.
  12. Video won't play on Chrome Android

    Hello, I'm doing a project with Phaser (v2.7.5) and I have some issues trying to play videos with Chrome on Android (58.0). I've tried with several different tablets, it does not seem the problem is related to the device. The same code is working on desktop (Chrome & Firefox) and on Firefox Android. This is basically my code : var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create}); function preload() {'videodemo', 'video/reward.mp4'); } function create() { var videodemo ='videodemo'); videodemo.addToWorld(game.height/2, game.width/2, 0.5, 0.5);; } I've tried the following workaround, which I found on another topic. The video plays on Android if I test the code with codepen but for some reason it doesn't if I upload it on my own server. Any ideas ? Thanks
  13. Hello! Video tutorials are not available anymore. For example: shows "Page Not found". Could you please fix that as video tutorials were very helpful! Thank you!
  14. Scrub video cleanly

    I've built some custom controls for videos in Phaser. The scrub bar works fine, except the video flashes black while I scrub. I would have thought it was a caching issue, except this happens with already cached videos too. Scrubbing is done via a simple: function setTime( t ) { video.currentTime = t } Anyone got an idea how to lose the black flashes?
  15. Alpha Map in Video

    I'm trying to use a video to set the alpha information on a standard material. The video displays fine(passed into the diffuse) but can't figure out how to pass this into the alpha with correct results. My code.. Ref: scene.seaPlane = BABYLON.Mesh.CreateGround("ground1", 36,36, 2, scene); var mat = new BABYLON.StandardMaterial("mat", scene); var videoTexture = new BABYLON.VideoTexture("video", ["textures/waterRing.mp4"], scene, true, true); mat.diffuseTexture = videoTexture; mat.diffuseTexture.hasAlpha = true; mat.useAlphaFromDiffuseTexture = true; scene.seaPlane.material = mat;; There is no explicit alpha channel in my video file, so perhaps this is where I'm going wrong? Maybe it's better to render the video out as a sequence of pngs Thanks,
  16. Hi all! I've tried to mix and match between two very basic phaser tutorials about playing a video and putting game fullscreen. My results are not what I expected: Can you please suggest me a tutorial that can let me understand how to make my video fill its container? Thanks for your time and kind help
  17. Load many videos efficiently

    Hi there community, I will be building a video-playlist player. And I was wondering, what is the most efficient way to play the videos without consuming the RAM memory. Imagine we have 30 large videos. Obviously loading them to memory at the beginning of the game will kill the memory. So what do you recommend to play them and not break the experience with looooong 'Loading' screens every time the next video is played, or the user presses the next button or selects from the scroll. This is for a museum, so the idea is that users can switch thru the videos fast and easily,
  18. Hi, Is it possible to draw video onto the canvas element of the dynamic texture? Thanks - Raghavender Mylagary
  19. Hello! New Babylon user here--also new to 3D graphics and visual programming in general. I'm making a 3D visualization in Babylon and am a little stuck. Searched this forum for relevant topics but wasn't really even sure what to look for, tbh. WHAT I HAVE SO FAR A very simple visualization that uses the Solid Particle System. I add 1,000 shapes to it (flat triangles) and arrange them into 10 flat 10x10 (x, z) grids, all at the same initial y coordinate, and all initially invisible. Every few seconds, I take an invisible 10x10 grid make all 100 of its particles visible. My `SPS.updateParticle` just tests if `isVisible` is true, and if so, rotates it a little bit, and moves it down a little bit (decreases `position.y`). It also tests if the particle's y position is below a certain threshold--if it is, it calls `recycleParticle` on it, which simply makes it invisible again and sets its y position back to original starting height. It thus looks like an infinite series of 10x10 grids of flat triangles, appearing in thin air at a particular location, falling downwards, and then disappearing. At any given point there are maybe 6 or 7 grids visible simultaneously, all falling within the imaginary 3D rectangular prism defined by their (x, z) borders and their downward y motion. WHAT I HAVEN'T BEEN ABLE TO FIGURE OUT: I want to project a video onto the visible particles, like a moving, shifting projector screen. The projector could be at a fixed position, or it could be behind the camera, whatever's easiest at this point. My instinct was to make each particle translucent, and just place the video on the opposite side of the particles from the camera such that it plays "through" the translucent particles. But I can't figure out a way to have the video ONLY be visible through the particles, and not just look like a TV screen with a bunch of triangles in front of it. Let me know if any of that is unclear. Trying to get a playground up at some point but it's simple enough I thought I'd just ask. Thanks in advance for all your help, and for building such an awesome tool! I've had a lot of fun learning how to use it!
  20. Phaser video on iOS borked?

    Hey, can anyone confirm if video works on iOS 10.2? I've tried on a number of comps and devices, and they all get the same behaviour. The video looks to preload fine, but when you touch it to play, the video is good for the first 1-2 seconds then freezes with the audio playing through. This is with local dev on both 2.6.2 and CE 2.7.3. All the Safari console says is 'An error occurred trying to load the resource.' This also occurs with the Phaser demos, ie: Cheers
  21. IE11 webgl video is black on 4.2.2

    I'm experiencing a strange issue with IE11 webgl video where it only renders a black square, I still get audio just no video. What is odd is that webgl video works great in ie10 and ms edge just not in ie11. I'm getting this error on ie11 but I'm not sure if this is related. WEBGL11072: INVALID_VALUE: textImage2D: This texture source is not supported GLTexture.js(98,1) Any ideas?
  22. Hey, I have some videos I need manual control over. For non iOS devices, they're working fine. But with iOS devices the videos all automatically play simultaneously on user interaction (which is touch unlocking them). Is there a clean way to flag off autoplay on touch unlocking? Cheers
  23. Video Texture with HTML5 control buttons

    Hi, I am displaying a video onto a plane using the video texture. Now I want to display the HTML5 video controls in the below format. Is there any way I can do it? I tried to setup the video controls in the below method but its not working //TV var tv = BABYLON.Mesh.CreatePlane("plane", 20.0, scene); tv.position.y = 20; tv.position.z = 9; //TV material and textures var mat = new BABYLON.StandardMaterial("mat", scene); var mat1 = new BABYLON.StandardMaterial("mat", scene); var videoTexture = new BABYLON.VideoTexture("video", [], scene, true, false); mat.diffuseTexture = videoTexture; tv.material = mat; var htmlVideo =; htmlVideo.setAttribute("controls", "true"); htmlVideo.setAttribute("src", "Video3.mp4");
  24. Error while Loading an Video in a Texture

    Hi, I am trying to embed a TV into the room i have created. I have created a Cube and then i am loading the video in the form of texture on the cube. Below is the screenshot of the error. @gryff can you help me with this error NewsRoom.rar
  25. Can't display video

    Hi, I'm having some issues trying to load and display an MP4 video in a sprite, which also need to loop endlessly. I'm using the loader class in order to be sure that the video is loaded. The video is loaded and I don't get any errors, but the video is not showing. Then I try using the code from the samples page and I can hear the video, but I can't see it (codepen sample line 53 through 78, comment out the other code first). Also I want to loop the video and I used the code I found in this issue: But this code doesn't returns the HTML video element: var video = texture.baseTexture.source; So it doesn't have a loop property on it. To confuse me even more, I tried the loader code with a newest version (currently working with 4.0.3) and from version 4.1.0 and up I'm getting errors when I try to create the video texture: Uncaught TypeError: source.addEventListener is not a function(…) pixi.js:23585 In that case all I have in the loader callback is this: function loaderComplete(){ console.log( videoLoader.resources.testVideo ); // on load complete create the video texture var videoTexture = PIXI.Texture.fromVideo(videoLoader.resources.testVideo); } And also tried to create a video base texture but I get the same error. Here is a simple codepen sample: As you can see I'm not getting any errors on loading the video, and the video is actually loading. In fact I added an image to the loader and I had no problems with that. The issue appears with the video. Thanks, Rodrigo.