Search the Community

Showing results for tags 'video'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 90 results

  1. Hi everyone.. I'm here again with a fresh question... I'm trying to do create custom loading screen.. A lot of topic inside of the forum anf i have already read document about loading screen, and also i did some thing (you can find PG link below and if you want you can update it) but how we can add a video to the loading screen background i couldn't find a solution or sample, and also i can't count items on the scene... PG Link: https://playground.babylonjs.com/#WV4PLS Somebody can show me the way about this? Thanks in advance..
  2. Is there any way to pause a video immediately after creating the element with PIXI.Texture.fromVideo or fromVideoUrl? It looks like it might be bugged currently, because under some circumstances the paused flag is set but the video doesn't actually pause. I noticed in the fromVideoUrl function it will call play() before returning, and at one point console.log'ing the baseTexture.source element showed instead of the HTML tag, an object with a pixi_id or something. I'm not sure if that is relevant, but I haven't been able to repeat that, so I'm not sure if it was just a one off (but it makes me suspicious if that object is somehow messing with my .pause() calls? Maybe during the transition .pause() calls don't work properly, so the video keeps playing? I'm not sure how that would work, but I'm not sure what's going on there either.) This is the only code that I have been able to make that works, but I imagine it's fragile due to the bug? where sometimes .paused gets set to true even though the video is still playing. If the timeout is lower than 1000 it doesn't pause the video, but the paused flag gets set so it stops it's setTimeout loop. Also, it means the video plays for ~1 second before pausing which in my case is problematic. var renderer, stage, video, sprite;$(function() { renderer = new PIXI.autoDetectRenderer(1920, 1080); $('body').append(renderer.view); stage = new PIXI.Container(); video = PIXI.Texture.fromVideoUrl('720p_test_web.mp4'); sprite = new PIXI.Sprite(video); stage.addChild(sprite); animate(); pauseVideo(video.baseTexture.source);});function animate() { requestAnimationFrame(animate); renderer.render(stage);}function pauseVideo(el) { console.log(el); if (!el.paused) { el.pause(); setTimeout(pauseVideo, 1000, el); }}I tried passing the video element directly into PIXI.Texture.fromVideo() but the video still doesn't pause and just plays from load. var renderer, stage, video, sprite;$(function() { renderer = new PIXI.autoDetectRenderer(1920, 1080); $('body').append(renderer.view); stage = new PIXI.Container(); video = PIXI.Texture.fromVideo(Util.fromVideoUrl('720p_test_web.mp4')); sprite = new PIXI.Sprite(video); stage.addChild(sprite); animate(); video.baseTexture.source.pause();});function animate() { requestAnimationFrame(animate); renderer.render(stage);}var Util = Util || {};Util.fromVideoUrl = function(src) { var video = document.createElement("video"); video.preload = "auto"; video.loop = true; video.src = src; video.pause(); return video;}Any ideas?
  3. Hi everyone i'm new guy in here.. I have a problem.. I'm playing a video with videoTexture but i want to make when i clicked to videoTexture to pause video.. I followed this topic: http://www.babylonjs-playground.com/#CHQ4T#5 everyting well but when I click anywhere on the scene video stoping Here is my code var videomat = new BABYLON.StandardMaterial("Videomat", scene); var videoTexture = new BABYLON.VideoTexture("video", ["video/vexpovid.mp4", "video/vexpovid.webm"], scene, true,true); var videobox = BABYLON.MeshBuilder.CreateBox('videobox', optionsVideo, scene); videobox.position.x = -120; videobox.position.y = 300; videobox.position.z = 163; videobox.rotation.y =3.15; videobox.material = videomat; videomat.diffuseTexture = videoTexture; videobox.material = videomat; scene.onPointerDown = function () { //videoTexture.video.play(); if (videoTexture.video.paused){ videoTexture.video.play(); } else { videoTexture.video.pause();}
  4. I am working on a project where I am trying to create an animation of a watercolor effect to 'paint' in an image. The image is dynamic, so rather than using a simple video, I have created a video to use as an alpha mask to apply to the image via Pixi. The area around the visible image needs to be transparent, so I needed to use an alpha mask rather than just covering the image with white pixels. I have attached a full example file with all of the code that I have set up for this, but here's a quick summary of what I've done: Create a texture from video Create a sprite from image Add the image sprite to a container Set 'mask' property of container to be the video texture This worked beautifully, but the one concern that I have is of performance, as there will be other things going on on the page at the same time. A performance audit of the page while the animation is running shows that the main thread is being used for scripting for almost 100% of the time of the entire duration of the animation, which is slightly degrading the performance of things such as scrolling on the page while that is happening. I'm certainly willing to accept that this is simply a very performance intensive animation and that it doesn't get much better than what I've got, however this is my first time using Pixi, so I wanted to seek out some advice about whether I have done this the best way that I can, or if there is anything that I can do to help make this a bit more efficient. Thanks in advance for any help that anyone can offer! If I need to provide any more information or anything like that, just let me know, and I will do my best watercolor-test.html
  5. 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?
  6. yasuhiko

    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 http://pixijs.io/examples/?v=v4.6.2#/basics/video.js 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 http://pixijs.io/examples/?v=v4.6.2#/basics/video.js . ... function onPlayVideo() { // Don't need the button anymore button.destroy(); /// modify start // mp4 // (1) mp4 OK : video/audio played (#fvlivedemo.gnzo.com is my own server) // var texture = PIXI.Texture.fromVideo('http://fvlivedemo.gnzo.com/testVideo.mp4'); // (2) mp4 OK : video/audio played // var texture = PIXI.Texture.fromVideoUrl('http://fvlivedemo.gnzo.com/testVideo.mp4'); // HLS // (3) Not work : when play button pressed, loading m3u8 not started. // #http://184.72 ... is effective m3u8 stream // var texture = PIXI.Texture.fromVideo('http://184.72.239.149/vod/smil:BigBuckBunny.smil/playlist.m3u8'); // (4) Not work : when play button pressed, loading m3u8 not started. // var texture = PIXI.Texture.fromVideoUrl('http://184.72.239.149/vod/smil:BigBuckBunny.smil/playlist.m3u8'); // (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: 'http://184.72.239.149/vod/smil:BigBuckBunny.smil/playlist.m3u8', mime: 'application/vnd.apple.mpegurl' }); 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
  7. Hi guys, Im kinda new here but I need help with Phaser 2 (PhaserCE 2.10.3) and loading videos.. My code is : main.prototype = { preload: function(){ game.load.video("earth_1", "assets/video/earth_1.mp4"); }, create: function(){ var video = game.add.video("earth_1"); video.play(true); video.addToWorld(); var flare = spawner.spawn(g.sprites.flare) var ring = spawner.spawn(g.sprites.ring) var highly_recommended = spawner.spawn(g.sprites.highly_recommended) var logo = spawner.spawn(g.sprites.logo) ... it works fine when I run it in web using a local server.. but when I compile it with cocoon using canvas+, i get an error. using the cocoon developer app i get the errors attached.. i tried my best to google it out and also look at the https://photonstorm.github.io/phaser-ce/ docs as well as the main site but i just cant crack this running out of ideas.. does the video resolution have an effect? im using an .mp4 video as an animated background
  8. Doug

    Video game object

    Hi All Forgive me if I've missed this, but I can't seem to find any examples or reference to being able to create video game objects / textures. Is this possible please? I am thinking of mp4 or ogg video playing on a game object within the game. Mainly for use in things like interactive product tours etc. I note that the Phaser.Device namespace has a "video" member. I also note that Rich mentioned the video.OnComplete event handler in one of his posts too. So I am wondering if there is support for actual playback too? Thanks very much!
  9. AdamRyanGameDev

    Coding Train Tutorial

    Found this and was curious if it-d be Phas3r or not.... unfortunately this doesn't state that it is actually Phas3r... but yeah it is! Anyways posting because there are not that many video tutorials out there
  10. Hi everyone, Video (mp4 or webm) doesn't play on firefox android -> "NS_ERROR_NOT_AVAILABLE" I use Phaser CE v2.10.0 and CANVAS , I unlock the videos before. does not work on examples either : https://phaser.io/examples/v2/video/play-video Thank you in advance !
  11. I'm trying to get video textures to work on mobile devices and I seem to be running into an issue where the video won't autoplay because it doesn't meet the requirements that Apple has laid out here: https://webkit.org/blog/6784/new-video-policies-for-ios/ This can be seen in this playground: http://www.babylonjs-playground.com/#1X8NRY Is there a way to pass custom attributes to the video element that is contained within the video texture? My hypothesis is the absence of the playsinline data attribute on the video element is preventing this from working correctly. @Deltakosh any insight here?
  12. Loonride

    Coding Slither.io in One Week

    Check out my new video about my one week Slither.io project with JavaScript and Phaser!
  13. charlie_says

    (pre)Load video issue

    I'm having some issues loading videos... I can get them load ok, but, as I've got a number of separate videos that I need to sequence together seamlessly (or as close as possible to) I'm preloading them, or trying to... ...but, despite the texture appearing to have loaded, there's a delay in starting playback. I've tried a number of things, but would welcome any ideas that anyone has to getting an accurate idea of how much is loaded? I did have an idea that I could load a video as a blob, but I couldn't find an example of loading an item as a blob and then converting it, any leads on that would be welcome.
  14. charlie_says

    PIXI cache on repeated loads?

    Hi, I'm certain there will be a way of doing this, but having looked through the docs I'm not seeing the answer... I'm loading some videos like this: const videoPathAndName: string = pathTo+'video/'+level+'/video/'+name; let videotexture = PIXI.VideoBaseTexture.fromUrls([ { src: videoPathAndName+'.webm', mime: 'video/webm' }, { src: videoPathAndName+'.mp4', mime: 'video/mp4' }, { src: videoPathAndName+'.ogv', mime: 'video/ogv' } ]); videotexture.autoPlay = false; this._texture = new PIXI.Texture(videotexture); this._texture.baseTexture.on('loaded',this._checkLoaded); which works fine. But, what I wondered was: as I repeat various sections whether I could check whether the video was already in the cache before trying to load? This would save repeated loads. Or does the loader handle this already? Thanks!
  15. askerpro

    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.
  16. 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): https://www.youtube.com/watch?v=AlAmXXNz5ac 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!!
  17. Hi BabylonJs lovers, Now you can apply transparent background on videos with chromakey (green background). Check the demo here: http://www.babylonjs-playground.com/#P75330 Enjoy...
  18. 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
  19. igitz

    HeightMap Video

    Any way to create an animated terrain using CreateGroundFromHeightMap with a VideoTexture instead of a static image?
  20. 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.
  21. 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?
  22. Blobfister

    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!
  23. Priffy

    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.
  24. Stunt Pixels

    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: https://phaser.io/examples/v2/video/play-video Cheers