Search the Community
Showing results for tags 'videobasetexture'.
Found 2 results
-
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
-
I'm a bit of a Pixi-noob, set with the task of maintaining a Pixi-based solution.From what I've read, upgrading from v2 to v3 should be a walk in the park. This has not been my experience so far (possibly because of my limited Pixi skills). The problem I'm encountering at the moment is getting a video to play. Using Pixi.VideoTexture worked fine. But when I attempt to use the new Pixi.VideoBaseTexture I get this for every call to render(). TypeError: this.children[i].updateTransform is not a functionat Container.23.Container.updateTransform (pixi.js:6904:26)at CanvasRenderer.43.CanvasRenderer.render (pixi.js:12408:12)at animate (index.html:31:15)Below is the simple test that does not work. I have tried using both fromVideo and fromUrl.Does anyone have any working samplecode for using VideoBaseTexture?The doc at http://pixijs.github.io/docs/PIXI.VideoBaseTexture.html points to "the 'deus' demo", which is a v2 sample using Pixi.VideoTexture, and so is every other sample I have found. <!doctype html><div id="samplevideo"></div><video id="videoelement" width="200" height="200" style="display: none;"> <source src="sample.mp4" type="video/mp4"></video><script src="pixi.js"></script><script>//var videoTexture = PIXI.VideoBaseTexture.fromUrl('sample.mp4', PIXI.SCALE_MODES.DEFAULT);var videoTexture = PIXI.VideoBaseTexture.fromVideo(document.getElementById("videoelement"), PIXI.SCALE_MODES.DEFAULT);var imageTexture = new PIXI.Sprite.fromImage("sample.jpg");var stage = new PIXI.Container();stage.addChild(videoTexture);var rendererOptions = { antialiasing:true, transparent:true, resolution:1};var renderer = new PIXI.CanvasRenderer(200, 200, rendererOptions);document.getElementById("samplevideo").appendChild(renderer.view);function animate() { requestAnimationFrame (animate); try { renderer.render(stage); } catch(err) { console.error(err); }}requestAnimationFrame (animate);</script>
