mirror of
https://github.com/photonstorm/phaser
synced 2024-11-27 15:12:18 +00:00
2563 lines
73 KiB
HTML
2563 lines
73 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Phaser Source: src/gameobjects/Video.js</title>
|
|
|
|
<!--[if lt IE 9]>
|
|
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
|
<![endif]-->
|
|
|
|
<link type="text/css" rel="stylesheet" href="styles/default.css">
|
|
|
|
<link type="text/css" rel="stylesheet" href="styles/sunlight.default.css">
|
|
|
|
|
|
<link type="text/css" rel="stylesheet" href="styles/site.cerulean.css">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="container-fluid">
|
|
<div class="navbar navbar-fixed-top navbar-inverse">
|
|
<div style="position: absolute; width: 143px; height: 31px; right: 10px; top: 10px; z-index: 1050"><a href="http://phaser.io"><img src="img/phaser.png" border="0" /></a></div>
|
|
<div class="navbar-inner">
|
|
<a class="brand" href="index.html">Phaser API</a>
|
|
<ul class="nav">
|
|
|
|
|
|
<li class="dropdown">
|
|
<a href="namespaces.list.html" class="dropdown-toggle" data-toggle="dropdown">Namespaces<b
|
|
class="caret"></b></a>
|
|
|
|
<ul class="dropdown-menu ">
|
|
|
|
<li class="class-depth-0">
|
|
<a href="Phaser.html">Phaser</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="Phaser.KeyCode.html">KeyCode</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="PIXI.html">PIXI</a>
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="dropdown">
|
|
<a href="classes.list.html" class="dropdown-toggle" data-toggle="dropdown">Classes<b
|
|
class="caret"></b></a>
|
|
|
|
<ul class="dropdown-menu ">
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Animation.html">Animation</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.AnimationManager.html">AnimationManager</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.AnimationParser.html">AnimationParser</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.ArraySet.html">ArraySet</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.ArrayUtils.html">ArrayUtils</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.AudioSprite.html">AudioSprite</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.BitmapData.html">BitmapData</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.BitmapText.html">BitmapText</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Button.html">Button</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Cache.html">Cache</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Camera.html">Camera</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Canvas.html">Canvas</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Circle.html">Circle</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Color.html">Color</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Component.Angle.html">Angle</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Component.Animation.html">Animation</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Component.AutoCull.html">AutoCull</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Component.Bounds.html">Bounds</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Component.BringToTop.html">BringToTop</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Component.Core.html">Core</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Component.Crop.html">Crop</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Component.Delta.html">Delta</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Component.Destroy.html">Destroy</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Component.FixedToCamera.html">FixedToCamera</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Component.Health.html">Health</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Component.InCamera.html">InCamera</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Component.InputEnabled.html">InputEnabled</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Component.InWorld.html">InWorld</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Component.LifeSpan.html">LifeSpan</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Component.LoadTexture.html">LoadTexture</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Component.Overlap.html">Overlap</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Component.PhysicsBody.html">PhysicsBody</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Component.Reset.html">Reset</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Component.ScaleMinMax.html">ScaleMinMax</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Component.Smoothed.html">Smoothed</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Create.html">Create</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Creature.html">Creature</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Device.html">Device</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.DeviceButton.html">DeviceButton</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.DOM.html">DOM</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Easing.html">Easing</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Easing.Back.html">Back</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Easing.Bounce.html">Bounce</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Easing.Circular.html">Circular</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Easing.Cubic.html">Cubic</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Easing.Elastic.html">Elastic</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Easing.Exponential.html">Exponential</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Easing.Linear.html">Linear</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Easing.Quadratic.html">Quadratic</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Easing.Quartic.html">Quartic</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Easing.Quintic.html">Quintic</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Easing.Sinusoidal.html">Sinusoidal</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Ellipse.html">Ellipse</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Events.html">Events</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Filter.html">Filter</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.FlexGrid.html">FlexGrid</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.FlexLayer.html">FlexLayer</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Frame.html">Frame</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.FrameData.html">FrameData</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Game.html">Game</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.GameObjectCreator.html">GameObjectCreator</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.GameObjectFactory.html">GameObjectFactory</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Gamepad.html">Gamepad</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Graphics.html">Graphics</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Group.html">Group</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Image.html">Image</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.ImageCollection.html">ImageCollection</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Input.html">Input</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.InputHandler.html">InputHandler</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Key.html">Key</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Keyboard.html">Keyboard</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Line.html">Line</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.LinkedList.html">LinkedList</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Loader.html">Loader</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.LoaderParser.html">LoaderParser</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Math.html">Math</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Matrix.html">Matrix</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Mouse.html">Mouse</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.MSPointer.html">MSPointer</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Net.html">Net</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Particle.html">Particle</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Particles.html">Particles</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Particles.Arcade.html">Arcade</a>
|
|
</li>
|
|
|
|
<li class="class-depth-3">
|
|
<a href="Phaser.Particles.Arcade.Emitter.html">Emitter</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Physics.html">Physics</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Physics.Arcade.html">Arcade</a>
|
|
</li>
|
|
|
|
<li class="class-depth-3">
|
|
<a href="Phaser.Physics.Arcade.Body.html">Body</a>
|
|
</li>
|
|
|
|
<li class="class-depth-3">
|
|
<a href="Phaser.Physics.Arcade.TilemapCollision.html">TilemapCollision</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Physics.Ninja.html">Ninja</a>
|
|
</li>
|
|
|
|
<li class="class-depth-3">
|
|
<a href="Phaser.Physics.Ninja.AABB.html">AABB</a>
|
|
</li>
|
|
|
|
<li class="class-depth-3">
|
|
<a href="Phaser.Physics.Ninja.Body.html">Body</a>
|
|
</li>
|
|
|
|
<li class="class-depth-3">
|
|
<a href="Phaser.Physics.Ninja.Circle.html">Circle</a>
|
|
</li>
|
|
|
|
<li class="class-depth-3">
|
|
<a href="Phaser.Physics.Ninja.Tile.html">Tile</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Physics.P2.html">P2</a>
|
|
</li>
|
|
|
|
<li class="class-depth-3">
|
|
<a href="Phaser.Physics.P2.Body.html">Body</a>
|
|
</li>
|
|
|
|
<li class="class-depth-3">
|
|
<a href="Phaser.Physics.P2.BodyDebug.html">BodyDebug</a>
|
|
</li>
|
|
|
|
<li class="class-depth-3">
|
|
<a href="Phaser.Physics.P2.CollisionGroup.html">CollisionGroup</a>
|
|
</li>
|
|
|
|
<li class="class-depth-3">
|
|
<a href="Phaser.Physics.P2.ContactMaterial.html">ContactMaterial</a>
|
|
</li>
|
|
|
|
<li class="class-depth-3">
|
|
<a href="Phaser.Physics.P2.DistanceConstraint.html">DistanceConstraint</a>
|
|
</li>
|
|
|
|
<li class="class-depth-3">
|
|
<a href="Phaser.Physics.P2.FixtureList.html">FixtureList</a>
|
|
</li>
|
|
|
|
<li class="class-depth-3">
|
|
<a href="Phaser.Physics.P2.GearConstraint.html">GearConstraint</a>
|
|
</li>
|
|
|
|
<li class="class-depth-3">
|
|
<a href="Phaser.Physics.P2.InversePointProxy.html">InversePointProxy</a>
|
|
</li>
|
|
|
|
<li class="class-depth-3">
|
|
<a href="Phaser.Physics.P2.LockConstraint.html">LockConstraint</a>
|
|
</li>
|
|
|
|
<li class="class-depth-3">
|
|
<a href="Phaser.Physics.P2.Material.html">Material</a>
|
|
</li>
|
|
|
|
<li class="class-depth-3">
|
|
<a href="Phaser.Physics.P2.PointProxy.html">PointProxy</a>
|
|
</li>
|
|
|
|
<li class="class-depth-3">
|
|
<a href="Phaser.Physics.P2.PrismaticConstraint.html">PrismaticConstraint</a>
|
|
</li>
|
|
|
|
<li class="class-depth-3">
|
|
<a href="Phaser.Physics.P2.RevoluteConstraint.html">RevoluteConstraint</a>
|
|
</li>
|
|
|
|
<li class="class-depth-3">
|
|
<a href="Phaser.Physics.P2.RotationalSpring.html">RotationalSpring</a>
|
|
</li>
|
|
|
|
<li class="class-depth-3">
|
|
<a href="Phaser.Physics.P2.Spring.html">Spring</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Plugin.html">Plugin</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.PluginManager.html">PluginManager</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Point.html">Point</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Pointer.html">Pointer</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.PointerMode.html">PointerMode</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Polygon.html">Polygon</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.QuadTree.html">QuadTree</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.RandomDataGenerator.html">RandomDataGenerator</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Rectangle.html">Rectangle</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.RenderTexture.html">RenderTexture</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.RequestAnimationFrame.html">RequestAnimationFrame</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.RetroFont.html">RetroFont</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Rope.html">Rope</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.RoundedRectangle.html">RoundedRectangle</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.ScaleManager.html">ScaleManager</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Signal.html">Signal</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.SignalBinding.html">SignalBinding</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.SinglePad.html">SinglePad</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Sound.html">Sound</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.SoundManager.html">SoundManager</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Sprite.html">Sprite</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.SpriteBatch.html">SpriteBatch</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Stage.html">Stage</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.State.html">State</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.StateManager.html">StateManager</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Text.html">Text</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Tile.html">Tile</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Tilemap.html">Tilemap</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.TilemapLayer.html">TilemapLayer</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.TilemapParser.html">TilemapParser</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Tileset.html">Tileset</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.TileSprite.html">TileSprite</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Time.html">Time</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Timer.html">Timer</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.TimerEvent.html">TimerEvent</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Touch.html">Touch</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Tween.html">Tween</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.TweenData.html">TweenData</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.TweenManager.html">TweenManager</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Utils.html">Utils</a>
|
|
</li>
|
|
|
|
<li class="class-depth-2">
|
|
<a href="Phaser.Utils.Debug.html">Debug</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.Video.html">Video</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="Phaser.World.html">World</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="PIXI.AbstractFilter.html">AbstractFilter</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="PIXI.BaseTexture.html">BaseTexture</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="PIXI.CanvasBuffer.html">CanvasBuffer</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="PIXI.CanvasGraphics.html">CanvasGraphics</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="PIXI.CanvasMaskManager.html">CanvasMaskManager</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="PIXI.CanvasPool.html">CanvasPool</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="PIXI.CanvasRenderer.html">CanvasRenderer</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="PIXI.CanvasTinter.html">CanvasTinter</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="PIXI.ComplexPrimitiveShader.html">ComplexPrimitiveShader</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="PIXI.DisplayObject.html">DisplayObject</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="PIXI.DisplayObjectContainer.html">DisplayObjectContainer</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="PIXI.EarCut.html">EarCut</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="PIXI.Event.html">Event</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="PIXI.EventTarget.html">EventTarget</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="PIXI.FilterTexture.html">FilterTexture</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="PIXI.Graphics.html">Graphics</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="PIXI.GraphicsData.html">GraphicsData</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="PIXI.PIXI.html">PIXI</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="PIXI.PixiFastShader.html">PixiFastShader</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="PIXI.PixiShader.html">PixiShader</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="PIXI.PolyK.html">PolyK</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="PIXI.PrimitiveShader.html">PrimitiveShader</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="PIXI.RenderTexture.html">RenderTexture</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="PIXI.Rope.html">Rope</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="PIXI.Sprite.html">Sprite</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="PIXI.SpriteBatch.html">SpriteBatch</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="PIXI.Strip.html">Strip</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="PIXI.StripShader.html">StripShader</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="PIXI.Texture.html">Texture</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="PIXI.TilingSprite.html">TilingSprite</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="PIXI.WebGLBlendModeManager.html">WebGLBlendModeManager</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="PIXI.WebGLFastSpriteBatch.html">WebGLFastSpriteBatch</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="PIXI.WebGLFilterManager.html">WebGLFilterManager</a>
|
|
</li>
|
|
|
|
<li class="class-depth-1">
|
|
<a href="PIXI.WebGLRenderer.html">WebGLRenderer</a>
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="dropdown">
|
|
<a href="global.html" class="dropdown-toggle" data-toggle="dropdown">Global<b
|
|
class="caret"></b></a>
|
|
|
|
<ul class="dropdown-menu ">
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#AUTO">AUTO</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#BITMAPDATA">BITMAPDATA</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#BITMAPTEXT">BITMAPTEXT</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#blendModes">blendModes</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#BUTTON">BUTTON</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#CANVAS">CANVAS</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#CANVAS_FILTER">CANVAS_FILTER</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#CIRCLE">CIRCLE</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#CREATURE">CREATURE</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#DOWN">DOWN</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#ELLIPSE">ELLIPSE</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#EMITTER">EMITTER</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#GAMES">GAMES</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#GRAPHICS">GRAPHICS</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#GROUP">GROUP</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#HEADLESS">HEADLESS</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#IMAGE">IMAGE</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#LEFT">LEFT</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#LINE">LINE</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#MATRIX">MATRIX</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#NONE">NONE</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#PENDING_ATLAS">PENDING_ATLAS</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#POINT">POINT</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#POINTER">POINTER</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#POLYGON">POLYGON</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#RECTANGLE">RECTANGLE</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#RENDERTEXTURE">RENDERTEXTURE</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#RETROFONT">RETROFONT</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#RIGHT">RIGHT</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#ROPE">ROPE</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#ROUNDEDRECTANGLE">ROUNDEDRECTANGLE</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#scaleModes">scaleModes</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#SPRITE">SPRITE</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#SPRITEBATCH">SPRITEBATCH</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#TEXT">TEXT</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#TILEMAP">TILEMAP</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#TILEMAPLAYER">TILEMAPLAYER</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#TILESPRITE">TILESPRITE</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#UP">UP</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#VERSION">VERSION</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#VIDEO">VIDEO</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#WEBGL">WEBGL</a>
|
|
</li>
|
|
|
|
<li class="class-depth-0">
|
|
<a href="global.html#WEBGL_FILTER">WEBGL_FILTER</a>
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Core<b class="caret"></b></a>
|
|
<ul class="dropdown-menu ">
|
|
<li class="class-depth-1"><a href="Phaser.Game.html">Game</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.Group.html">Group</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.World.html">World</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.Loader.html">Loader</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.Cache.html">Cache</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.Time.html">Time</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.Camera.html">Camera</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.StateManager.html">State Manager</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.TweenManager.html">Tween Manager</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.SoundManager.html">Sound Manager</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.Input.html">Input Manager</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.ScaleManager.html">Scale Manager</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Game Objects<b class="caret"></b></a>
|
|
<ul class="dropdown-menu ">
|
|
<li class="class-depth-1"><a href="Phaser.GameObjectFactory.html">Factory (game.add)</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.GameObjectCreator.html">Creator (game.make)</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.Sprite.html">Sprite</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.Image.html">Image</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.Sound.html">Sound</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.Video.html">Video</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.Particles.Arcade.Emitter.html">Particle Emitter</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.Particle.html">Particle</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.Text.html">Text</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.Tween.html">Tween</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.BitmapText.html">BitmapText</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.Tilemap.html">Tilemap</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.BitmapData.html">BitmapData</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.RetroFont.html">RetroFont</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.Button.html">Button</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.Animation.html">Animation</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.Graphics.html">Graphics</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.RenderTexture.html">RenderTexture</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.TileSprite.html">TileSprite</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Geometry<b class="caret"></b></a>
|
|
<ul class="dropdown-menu ">
|
|
<li class="class-depth-1"><a href="Phaser.Circle.html">Circle</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.Ellipse.html">Ellipse</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.Line.html">Line</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.Matrix.html">Matrix</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.Point.html">Point</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.Polygon.html">Polygon</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.Rectangle.html">Rectangle</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.RoundedRectangle.html">Rounded Rectangle</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Physics<b class="caret"></b></a>
|
|
<ul class="dropdown-menu ">
|
|
<li class="class-depth-1"><a href="Phaser.Physics.Arcade.html">Arcade Physics</a></li>
|
|
<li class="class-depth-2"><a href="Phaser.Physics.Arcade.Body.html">Body</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.Physics.P2.html">P2 Physics</a></li>
|
|
<li class="class-depth-2"><a href="Phaser.Physics.P2.Body.html">Body</a></li>
|
|
<li class="class-depth-2"><a href="Phaser.Physics.P2.Spring.html">Spring</a></li>
|
|
<li class="class-depth-2"><a href="Phaser.Physics.P2.CollisionGroup.html">CollisionGroup</a></li>
|
|
<li class="class-depth-2"><a href="Phaser.Physics.P2.ContactMaterial.html">ContactMaterial</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.Physics.Ninja.html">Ninja Physics</a></li>
|
|
<li class="class-depth-2"><a href="Phaser.Physics.Body.html">Body</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Input<b class="caret"></b></a>
|
|
<ul class="dropdown-menu ">
|
|
<li class="class-depth-1"><a href="Phaser.InputHandler.html">Input Handler</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.Pointer.html">Pointer</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.DeviceButton.html">Device Button</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.Mouse.html">Mouse</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.Keyboard.html">Keyboard</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.Key.html">Key</a></li>
|
|
<li class="class-depth-1"><a href="Phaser.Gamepad.html">Gamepad</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Community<b class="caret"></b></a>
|
|
<ul class="dropdown-menu ">
|
|
<li class="class-depth-1"><a href="http://phaser.io">Phaser Web Site</a></li>
|
|
<li class="class-depth-1"><a href="https://github.com/photonstorm/phaser">Phaser Github</a></li>
|
|
<li class="class-depth-1"><a href="http://phaser.io/examples">Phaser Examples</a></li>
|
|
<li class="class-depth-1"><a href="https://github.com/photonstorm/phaser-plugins">Phaser Plugins</a></li>
|
|
<li class="class-depth-1"><a href="http://www.html5gamedevs.com/forum/14-phaser/">Forum</a></li>
|
|
<li class="class-depth-1"><a href="http://stackoverflow.com/questions/tagged/phaser-framework">Stack Overflow</a></li>
|
|
<li class="class-depth-1"><a href="http://phaser.io/learn">Tutorials</a></li>
|
|
<li class="class-depth-1"><a href="https://confirmsubscription.com/h/r/369DE48E3E86AF1E">Newsletter</a></li>
|
|
<li class="class-depth-1"><a href="http://phaser.io/community/twitter">Twitter</a></li>
|
|
<li class="class-depth-1"><a href="http://phaser.io/community/irc">IRC</a></li>
|
|
<li class="class-depth-1"><a href="https://www.codeandweb.com/texturepacker/phaser">Texture Packer</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row-fluid">
|
|
|
|
|
|
<div class="span12">
|
|
|
|
<div id="main">
|
|
|
|
|
|
|
|
<h1 class="page-title">Source: src/gameobjects/Video.js</h1>
|
|
|
|
<section>
|
|
<article>
|
|
<pre class="sunlight-highlight-javascript linenums">/**
|
|
* @author Richard Davey <rich@photonstorm.com>
|
|
* @copyright 2015 Photon Storm Ltd.
|
|
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
|
|
*/
|
|
|
|
/**
|
|
* A Video object that takes a previously loaded Video from the Phaser Cache and handles playback of it.
|
|
*
|
|
* Alternatively it takes a getUserMedia feed from an active webcam and streams the contents of that to
|
|
* the Video instead (see `startMediaStream` method)
|
|
*
|
|
* The video can then be applied to a Sprite as a texture. If multiple Sprites share the same Video texture and playback
|
|
* changes (i.e. you pause the video, or seek to a new time) then this change will be seen across all Sprites simultaneously.
|
|
*
|
|
* Due to a bug in IE11 you cannot play a video texture to a Sprite in WebGL. For IE11 force Canvas mode.
|
|
*
|
|
* If you need each Sprite to be able to play a video fully independently then you will need one Video object per Sprite.
|
|
* Please understand the obvious performance implications of doing this, and the memory required to hold videos in RAM.
|
|
*
|
|
* On some mobile browsers such as iOS Safari, you cannot play a video until the user has explicitly touched the screen.
|
|
* This works in the same way as audio unlocking. Phaser will handle the touch unlocking for you, however unlike with audio
|
|
* it's worth noting that every single Video needs to be touch unlocked, not just the first one. You can use the `changeSource`
|
|
* method to try and work around this limitation, but see the method help for details.
|
|
*
|
|
* Small screen devices, especially iPod and iPhone will launch the video in its own native video player,
|
|
* outside of the Safari browser. There is no way to avoid this, it's a device imposed limitation.
|
|
*
|
|
* @class Phaser.Video
|
|
* @constructor
|
|
* @param {Phaser.Game} game - A reference to the currently running game.
|
|
* @param {string|null} [key=null] - The key of the video file in the Phaser.Cache that this Video object will play. Set to `null` or leave undefined if you wish to use a webcam as the source. See `startMediaStream` to start webcam capture.
|
|
* @param {string|null} [url=null] - If the video hasn't been loaded then you can provide a full URL to the file here (make sure to set key to null)
|
|
*/
|
|
Phaser.Video = function (game, key, url) {
|
|
|
|
if (key === undefined) { key = null; }
|
|
if (url === undefined) { url = null; }
|
|
|
|
/**
|
|
* @property {Phaser.Game} game - A reference to the currently running game.
|
|
*/
|
|
this.game = game;
|
|
|
|
/**
|
|
* @property {string} key - The key of the Video in the Cache, if stored there. Will be `null` if this Video is using the webcam instead.
|
|
* @default null
|
|
*/
|
|
this.key = key;
|
|
|
|
/**
|
|
* @property {number} width - The width of the video in pixels.
|
|
* @default
|
|
*/
|
|
this.width = 0;
|
|
|
|
/**
|
|
* @property {number} height - The height of the video in pixels.
|
|
* @default
|
|
*/
|
|
this.height = 0;
|
|
|
|
/**
|
|
* @property {number} type - The const type of this object.
|
|
* @default
|
|
*/
|
|
this.type = Phaser.VIDEO;
|
|
|
|
/**
|
|
* @property {boolean} disableTextureUpload - If true this video will never send its image data to the GPU when its dirty flag is true. This only applies in WebGL.
|
|
*/
|
|
this.disableTextureUpload = false;
|
|
|
|
/**
|
|
* @property {boolean} touchLocked - true if this video is currently locked awaiting a touch event. This happens on some mobile devices, such as iOS.
|
|
* @default
|
|
*/
|
|
this.touchLocked = false;
|
|
|
|
/**
|
|
* @property {Phaser.Signal} onPlay - This signal is dispatched when the Video starts to play. It sends 3 parameters: a reference to the Video object, if the video is set to loop or not and the playback rate.
|
|
*/
|
|
this.onPlay = new Phaser.Signal();
|
|
|
|
/**
|
|
* @property {Phaser.Signal} onChangeSource - This signal is dispatched if the Video source is changed. It sends 3 parameters: a reference to the Video object and the new width and height of the new video source.
|
|
*/
|
|
this.onChangeSource = new Phaser.Signal();
|
|
|
|
/**
|
|
* @property {Phaser.Signal} onComplete - This signal is dispatched when the Video completes playback, i.e. enters an 'ended' state. Videos set to loop will never dispatch this signal.
|
|
*/
|
|
this.onComplete = new Phaser.Signal();
|
|
|
|
/**
|
|
* @property {Phaser.Signal} onAccess - This signal is dispatched if the user allows access to their webcam.
|
|
*/
|
|
this.onAccess = new Phaser.Signal();
|
|
|
|
/**
|
|
* @property {Phaser.Signal} onError - This signal is dispatched if an error occurs either getting permission to use the webcam (for a Video Stream) or when trying to play back a video file.
|
|
*/
|
|
this.onError = new Phaser.Signal();
|
|
|
|
/**
|
|
* This signal is dispatched if when asking for permission to use the webcam no response is given within a the Video.timeout limit.
|
|
* This may be because the user has picked `Not now` in the permissions window, or there is a delay in establishing the LocalMediaStream.
|
|
* @property {Phaser.Signal} onTimeout
|
|
*/
|
|
this.onTimeout = new Phaser.Signal();
|
|
|
|
/**
|
|
* @property {integer} timeout - The amount of ms allowed to elapsed before the Video.onTimeout signal is dispatched while waiting for webcam access.
|
|
* @default
|
|
*/
|
|
this.timeout = 15000;
|
|
|
|
/**
|
|
* @property {integer} _timeOutID - setTimeout ID.
|
|
* @private
|
|
*/
|
|
this._timeOutID = null;
|
|
|
|
/**
|
|
* @property {HTMLVideoElement} video - The HTML Video Element that is added to the document.
|
|
*/
|
|
this.video = null;
|
|
|
|
/**
|
|
* @property {MediaStream} videoStream - The Video Stream data. Only set if this Video is streaming from the webcam via `startMediaStream`.
|
|
*/
|
|
this.videoStream = null;
|
|
|
|
/**
|
|
* @property {boolean} isStreaming - Is there a streaming video source? I.e. from a webcam.
|
|
*/
|
|
this.isStreaming = false;
|
|
|
|
/**
|
|
* When starting playback of a video Phaser will monitor its readyState using a setTimeout call.
|
|
* The setTimeout happens once every `Video.retryInterval` ms. It will carry on monitoring the video
|
|
* state in this manner until the `retryLimit` is reached and then abort.
|
|
* @property {integer} retryLimit
|
|
* @default
|
|
*/
|
|
this.retryLimit = 20;
|
|
|
|
/**
|
|
* @property {integer} retry - The current retry attempt.
|
|
* @default
|
|
*/
|
|
this.retry = 0;
|
|
|
|
/**
|
|
* @property {integer} retryInterval - The number of ms between each retry at monitoring the status of a downloading video.
|
|
* @default
|
|
*/
|
|
this.retryInterval = 500;
|
|
|
|
/**
|
|
* @property {integer} _retryID - The callback ID of the retry setTimeout.
|
|
* @private
|
|
*/
|
|
this._retryID = null;
|
|
|
|
/**
|
|
* @property {boolean} _codeMuted - Internal mute tracking var.
|
|
* @private
|
|
* @default
|
|
*/
|
|
this._codeMuted = false;
|
|
|
|
/**
|
|
* @property {boolean} _muted - Internal mute tracking var.
|
|
* @private
|
|
* @default
|
|
*/
|
|
this._muted = false;
|
|
|
|
/**
|
|
* @property {boolean} _codePaused - Internal paused tracking var.
|
|
* @private
|
|
* @default
|
|
*/
|
|
this._codePaused = false;
|
|
|
|
/**
|
|
* @property {boolean} _paused - Internal paused tracking var.
|
|
* @private
|
|
* @default
|
|
*/
|
|
this._paused = false;
|
|
|
|
/**
|
|
* @property {boolean} _pending - Internal var tracking play pending.
|
|
* @private
|
|
* @default
|
|
*/
|
|
this._pending = false;
|
|
|
|
/**
|
|
* @property {boolean} _autoplay - Internal var tracking autoplay when changing source.
|
|
* @private
|
|
* @default
|
|
*/
|
|
this._autoplay = false;
|
|
|
|
/**
|
|
* @property {function} _endCallback - The addEventListener ended function.
|
|
* @private
|
|
*/
|
|
this._endCallback = null;
|
|
|
|
/**
|
|
* @property {function} _playCallback - The addEventListener playing function.
|
|
* @private
|
|
*/
|
|
this._playCallback = null;
|
|
|
|
if (key && this.game.cache.checkVideoKey(key))
|
|
{
|
|
var _video = this.game.cache.getVideo(key);
|
|
|
|
if (_video.isBlob)
|
|
{
|
|
this.createVideoFromBlob(_video.data);
|
|
}
|
|
else
|
|
{
|
|
this.video = _video.data;
|
|
}
|
|
|
|
this.width = this.video.videoWidth;
|
|
this.height = this.video.videoHeight;
|
|
}
|
|
else if (url)
|
|
{
|
|
this.createVideoFromURL(url, false);
|
|
}
|
|
|
|
/**
|
|
* @property {PIXI.BaseTexture} baseTexture - The PIXI.BaseTexture.
|
|
* @default
|
|
*/
|
|
if (this.video && !url)
|
|
{
|
|
this.baseTexture = new PIXI.BaseTexture(this.video);
|
|
this.baseTexture.forceLoaded(this.width, this.height);
|
|
}
|
|
else
|
|
{
|
|
this.baseTexture = new PIXI.BaseTexture(PIXI.TextureCache['__default'].baseTexture.source);
|
|
this.baseTexture.forceLoaded(this.width, this.height);
|
|
}
|
|
|
|
/**
|
|
* @property {PIXI.Texture} texture - The PIXI.Texture.
|
|
* @default
|
|
*/
|
|
this.texture = new PIXI.Texture(this.baseTexture);
|
|
|
|
/**
|
|
* @property {Phaser.Frame} textureFrame - The Frame this video uses for rendering.
|
|
* @default
|
|
*/
|
|
this.textureFrame = new Phaser.Frame(0, 0, 0, this.width, this.height, 'video');
|
|
|
|
this.texture.setFrame(this.textureFrame);
|
|
|
|
this.texture.valid = false;
|
|
|
|
if (key !== null && this.video)
|
|
{
|
|
this.texture.valid = this.video.canplay;
|
|
}
|
|
|
|
/**
|
|
* A snapshot grabbed from the video. This is initially black. Populate it by calling Video.grab().
|
|
* When called the BitmapData is updated with a grab taken from the current video playing or active video stream.
|
|
* If Phaser has been compiled without BitmapData support this property will always be `null`.
|
|
*
|
|
* @property {Phaser.BitmapData} snapshot
|
|
* @readOnly
|
|
*/
|
|
this.snapshot = null;
|
|
|
|
if (Phaser.BitmapData)
|
|
{
|
|
this.snapshot = new Phaser.BitmapData(this.game, '', this.width, this.height);
|
|
}
|
|
|
|
if (!this.game.device.cocoonJS && (this.game.device.iOS || this.game.device.android) || (window['PhaserGlobal'] && window['PhaserGlobal'].fakeiOSTouchLock))
|
|
{
|
|
this.setTouchLock();
|
|
}
|
|
else
|
|
{
|
|
if (_video)
|
|
{
|
|
_video.locked = false;
|
|
}
|
|
}
|
|
|
|
};
|
|
|
|
Phaser.Video.prototype = {
|
|
|
|
/**
|
|
* Connects to an external media stream for the webcam, rather than using a local one.
|
|
*
|
|
* @method Phaser.Video#connectToMediaStream
|
|
* @param {HTMLVideoElement} video - The HTML Video Element that the stream uses.
|
|
* @param {MediaStream} stream - The Video Stream data.
|
|
* @return {Phaser.Video} This Video object for method chaining.
|
|
*/
|
|
connectToMediaStream: function (video, stream) {
|
|
|
|
if (video && stream)
|
|
{
|
|
this.video = video;
|
|
this.videoStream = stream;
|
|
|
|
this.isStreaming = true;
|
|
this.baseTexture.source = this.video;
|
|
this.updateTexture(null, this.video.videoWidth, this.video.videoHeight);
|
|
|
|
this.onAccess.dispatch(this);
|
|
}
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
/**
|
|
* Instead of playing a video file this method allows you to stream video data from an attached webcam.
|
|
*
|
|
* As soon as this method is called the user will be prompted by their browser to "Allow" access to the webcam.
|
|
* If they allow it the webcam feed is directed to this Video. Call `Video.play` to start the stream.
|
|
*
|
|
* If they block the webcam the onError signal will be dispatched containing the NavigatorUserMediaError
|
|
* or MediaStreamError event.
|
|
*
|
|
* You can optionally set a width and height for the stream. If set the input will be cropped to these dimensions.
|
|
* If not given then as soon as the stream has enough data the video dimensions will be changed to match the webcam device.
|
|
* You can listen for this with the onChangeSource signal.
|
|
*
|
|
* @method Phaser.Video#startMediaStream
|
|
* @param {boolean} [captureAudio=false] - Controls if audio should be captured along with video in the video stream.
|
|
* @param {integer} [width] - The width is used to create the video stream. If not provided the video width will be set to the width of the webcam input source.
|
|
* @param {integer} [height] - The height is used to create the video stream. If not provided the video height will be set to the height of the webcam input source.
|
|
* @return {Phaser.Video} This Video object for method chaining or false if the device doesn't support getUserMedia.
|
|
*/
|
|
startMediaStream: function (captureAudio, width, height) {
|
|
|
|
if (captureAudio === undefined) { captureAudio = false; }
|
|
if (width === undefined) { width = null; }
|
|
if (height === undefined) { height = null; }
|
|
|
|
if (!this.game.device.getUserMedia)
|
|
{
|
|
this.onError.dispatch(this, 'No getUserMedia');
|
|
return false;
|
|
}
|
|
|
|
if (this.videoStream !== null)
|
|
{
|
|
if (this.videoStream['active'])
|
|
{
|
|
this.videoStream.active = false;
|
|
}
|
|
else
|
|
{
|
|
this.videoStream.stop();
|
|
}
|
|
}
|
|
|
|
this.removeVideoElement();
|
|
|
|
this.video = document.createElement("video");
|
|
this.video.setAttribute('autoplay', 'autoplay');
|
|
|
|
if (width !== null)
|
|
{
|
|
this.video.width = width;
|
|
}
|
|
|
|
if (height !== null)
|
|
{
|
|
this.video.height = height;
|
|
}
|
|
|
|
// Request access to the webcam
|
|
|
|
this._timeOutID = window.setTimeout(this.getUserMediaTimeout.bind(this), this.timeout);
|
|
|
|
try {
|
|
navigator.getUserMedia(
|
|
{ "audio": captureAudio, "video": true },
|
|
this.getUserMediaSuccess.bind(this),
|
|
this.getUserMediaError.bind(this)
|
|
);
|
|
}
|
|
catch (error)
|
|
{
|
|
this.getUserMediaError(error);
|
|
}
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
/**
|
|
* @method Phaser.Video#getUserMediaTimeout
|
|
* @private
|
|
*/
|
|
getUserMediaTimeout: function () {
|
|
|
|
clearTimeout(this._timeOutID);
|
|
|
|
this.onTimeout.dispatch(this);
|
|
|
|
},
|
|
|
|
/**
|
|
* @method Phaser.Video#getUserMediaError
|
|
* @private
|
|
*/
|
|
getUserMediaError: function (event) {
|
|
|
|
clearTimeout(this._timeOutID);
|
|
|
|
this.onError.dispatch(this, event);
|
|
|
|
},
|
|
|
|
/**
|
|
* @method Phaser.Video#getUserMediaSuccess
|
|
* @private
|
|
*/
|
|
getUserMediaSuccess: function (stream) {
|
|
|
|
clearTimeout(this._timeOutID);
|
|
|
|
// Attach the stream to the video
|
|
this.videoStream = stream;
|
|
|
|
// Set the source of the video element with the stream from the camera
|
|
if (this.video.mozSrcObject !== undefined)
|
|
{
|
|
this.video.mozSrcObject = stream;
|
|
}
|
|
else
|
|
{
|
|
this.video.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
|
|
}
|
|
|
|
var self = this;
|
|
|
|
this.video.onloadeddata = function () {
|
|
|
|
var retry = 10;
|
|
|
|
function checkStream () {
|
|
|
|
if (retry > 0)
|
|
{
|
|
if (self.video.videoWidth > 0)
|
|
{
|
|
// Patch for Firefox bug where the height can't be read from the video
|
|
var width = self.video.videoWidth;
|
|
var height = self.video.videoHeight;
|
|
|
|
if (isNaN(self.video.videoHeight))
|
|
{
|
|
height = width / (4/3);
|
|
}
|
|
|
|
self.video.play();
|
|
|
|
self.isStreaming = true;
|
|
self.baseTexture.source = self.video;
|
|
self.updateTexture(null, width, height);
|
|
self.onAccess.dispatch(self);
|
|
}
|
|
else
|
|
{
|
|
window.setTimeout(checkStream, 500);
|
|
}
|
|
}
|
|
else
|
|
{
|
|
console.warn('Unable to connect to video stream. Webcam error?');
|
|
}
|
|
|
|
retry--;
|
|
}
|
|
|
|
checkStream();
|
|
|
|
};
|
|
|
|
},
|
|
|
|
/**
|
|
* Creates a new Video element from the given Blob. The Blob must contain the video data in the correct encoded format.
|
|
* This method is typically called by the Phaser.Loader and Phaser.Cache for you, but is exposed publicly for convenience.
|
|
*
|
|
* @method Phaser.Video#createVideoFromBlob
|
|
* @param {Blob} blob - The Blob containing the video data: `Blob([new Uint8Array(data)])`
|
|
* @return {Phaser.Video} This Video object for method chaining.
|
|
*/
|
|
createVideoFromBlob: function (blob) {
|
|
|
|
var _this = this;
|
|
|
|
this.video = document.createElement("video");
|
|
this.video.controls = false;
|
|
this.video.setAttribute('autoplay', 'autoplay');
|
|
this.video.addEventListener('loadeddata', function (event) { _this.updateTexture(event); }, true);
|
|
this.video.src = window.URL.createObjectURL(blob);
|
|
this.video.canplay = true;
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
/**
|
|
* Creates a new Video element from the given URL.
|
|
*
|
|
* @method Phaser.Video#createVideoFromURL
|
|
* @param {string} url - The URL of the video.
|
|
* @param {boolean} [autoplay=false] - Automatically start the video?
|
|
* @return {Phaser.Video} This Video object for method chaining.
|
|
*/
|
|
createVideoFromURL: function (url, autoplay) {
|
|
|
|
if (autoplay === undefined) { autoplay = false; }
|
|
|
|
// Invalidate the texture while we wait for the new one to load (crashes IE11 otherwise)
|
|
if (this.texture)
|
|
{
|
|
this.texture.valid = false;
|
|
}
|
|
|
|
this.video = document.createElement("video");
|
|
this.video.controls = false;
|
|
|
|
if (autoplay)
|
|
{
|
|
this.video.setAttribute('autoplay', 'autoplay');
|
|
}
|
|
|
|
this.video.src = url;
|
|
|
|
this.video.canplay = true;
|
|
|
|
this.video.load();
|
|
|
|
this.retry = this.retryLimit;
|
|
|
|
this._retryID = window.setTimeout(this.checkVideoProgress.bind(this), this.retryInterval);
|
|
|
|
this.key = url;
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
/**
|
|
* Called automatically if the video source changes and updates the internal texture dimensions.
|
|
* Then dispatches the onChangeSource signal.
|
|
*
|
|
* @method Phaser.Video#updateTexture
|
|
* @param {object} [event] - The event which triggered the texture update.
|
|
* @param {integer} [width] - The new width of the video. If undefined `video.videoWidth` is used.
|
|
* @param {integer} [height] - The new height of the video. If undefined `video.videoHeight` is used.
|
|
*/
|
|
updateTexture: function (event, width, height) {
|
|
|
|
var change = false;
|
|
|
|
if (width === undefined || width === null) { width = this.video.videoWidth; change = true; }
|
|
if (height === undefined || height === null) { height = this.video.videoHeight; }
|
|
|
|
this.width = width;
|
|
this.height = height;
|
|
|
|
if (this.baseTexture.source !== this.video)
|
|
{
|
|
this.baseTexture.source = this.video;
|
|
}
|
|
|
|
this.baseTexture.forceLoaded(width, height);
|
|
|
|
this.texture.frame.resize(width, height);
|
|
|
|
this.texture.width = width;
|
|
this.texture.height = height;
|
|
|
|
this.texture.valid = true;
|
|
|
|
if (this.snapshot)
|
|
{
|
|
this.snapshot.resize(width, height);
|
|
}
|
|
|
|
if (change && this.key !== null)
|
|
{
|
|
this.onChangeSource.dispatch(this, width, height);
|
|
|
|
if (this._autoplay)
|
|
{
|
|
this.video.play();
|
|
this.onPlay.dispatch(this, this.loop, this.playbackRate);
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
* Called when the video completes playback (reaches and ended state).
|
|
* Dispatches the Video.onComplete signal.
|
|
*
|
|
* @method Phaser.Video#complete
|
|
*/
|
|
complete: function () {
|
|
|
|
this.onComplete.dispatch(this);
|
|
|
|
},
|
|
|
|
/**
|
|
* Starts this video playing if it's not already doing so.
|
|
*
|
|
* @method Phaser.Video#play
|
|
* @param {boolean} [loop=false] - Should the video loop automatically when it reaches the end? Please note that at present some browsers (i.e. Chrome) do not support *seamless* video looping.
|
|
* @param {number} [playbackRate=1] - The playback rate of the video. 1 is normal speed, 2 is x2 speed, and so on. You cannot set a negative playback rate.
|
|
* @return {Phaser.Video} This Video object for method chaining.
|
|
*/
|
|
play: function (loop, playbackRate) {
|
|
|
|
if (loop === undefined) { loop = false; }
|
|
if (playbackRate === undefined) { playbackRate = 1; }
|
|
|
|
if (this.game.sound.onMute)
|
|
{
|
|
this.game.sound.onMute.add(this.setMute, this);
|
|
this.game.sound.onUnMute.add(this.unsetMute, this);
|
|
|
|
if (this.game.sound.mute)
|
|
{
|
|
this.setMute();
|
|
}
|
|
}
|
|
|
|
this.game.onPause.add(this.setPause, this);
|
|
this.game.onResume.add(this.setResume, this);
|
|
|
|
this._endCallback = this.complete.bind(this);
|
|
|
|
this.video.addEventListener('ended', this._endCallback, true);
|
|
|
|
if (loop)
|
|
{
|
|
this.video.loop = 'loop';
|
|
}
|
|
else
|
|
{
|
|
this.video.loop = '';
|
|
}
|
|
|
|
this.video.playbackRate = playbackRate;
|
|
|
|
if (this.touchLocked)
|
|
{
|
|
this._pending = true;
|
|
}
|
|
else
|
|
{
|
|
this._pending = false;
|
|
|
|
if (this.key !== null)
|
|
{
|
|
if (this.video.readyState !== 4)
|
|
{
|
|
this.retry = this.retryLimit;
|
|
this._retryID = window.setTimeout(this.checkVideoProgress.bind(this), this.retryInterval);
|
|
}
|
|
else
|
|
{
|
|
this._playCallback = this.playHandler.bind(this);
|
|
this.video.addEventListener('playing', this._playCallback, true);
|
|
}
|
|
}
|
|
|
|
this.video.play();
|
|
|
|
this.onPlay.dispatch(this, loop, playbackRate);
|
|
}
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
/**
|
|
* Called when the video starts to play. Updates the texture.
|
|
*
|
|
* @method Phaser.Video#playHandler
|
|
* @private
|
|
*/
|
|
playHandler: function () {
|
|
|
|
this.video.removeEventListener('playing', this._playCallback, true);
|
|
|
|
this.updateTexture();
|
|
|
|
},
|
|
|
|
/**
|
|
* Stops the video playing.
|
|
*
|
|
* This removes all locally set signals.
|
|
*
|
|
* If you only wish to pause playback of the video, to resume at a later time, use `Video.paused = true` instead.
|
|
* If the video hasn't finished downloading calling `Video.stop` will not abort the download. To do that you need to
|
|
* call `Video.destroy` instead.
|
|
*
|
|
* If you are using a video stream from a webcam then calling Stop will disconnect the MediaStream session and disable the webcam.
|
|
*
|
|
* @method Phaser.Video#stop
|
|
* @return {Phaser.Video} This Video object for method chaining.
|
|
*/
|
|
stop: function () {
|
|
|
|
if (this.game.sound.onMute)
|
|
{
|
|
this.game.sound.onMute.remove(this.setMute, this);
|
|
this.game.sound.onUnMute.remove(this.unsetMute, this);
|
|
}
|
|
|
|
this.game.onPause.remove(this.setPause, this);
|
|
this.game.onResume.remove(this.setResume, this);
|
|
|
|
// Stream or file?
|
|
|
|
if (this.isStreaming)
|
|
{
|
|
if (this.video.mozSrcObject)
|
|
{
|
|
this.video.mozSrcObject.stop();
|
|
this.video.src = null;
|
|
}
|
|
else
|
|
{
|
|
this.video.src = "";
|
|
|
|
if (this.videoStream['active'])
|
|
{
|
|
this.videoStream.active = false;
|
|
}
|
|
else
|
|
{
|
|
this.videoStream.stop();
|
|
}
|
|
}
|
|
|
|
this.videoStream = null;
|
|
this.isStreaming = false;
|
|
}
|
|
else
|
|
{
|
|
this.video.removeEventListener('ended', this._endCallback, true);
|
|
this.video.removeEventListener('playing', this._playCallback, true);
|
|
|
|
if (this.touchLocked)
|
|
{
|
|
this._pending = false;
|
|
}
|
|
else
|
|
{
|
|
this.video.pause();
|
|
}
|
|
}
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
/**
|
|
* Updates the given Display Objects so they use this Video as their texture.
|
|
* This will replace any texture they will currently have set.
|
|
*
|
|
* @method Phaser.Video#add
|
|
* @param {Phaser.Sprite|Phaser.Sprite[]|Phaser.Image|Phaser.Image[]} object - Either a single Sprite/Image or an Array of Sprites/Images.
|
|
* @return {Phaser.Video} This Video object for method chaining.
|
|
*/
|
|
add: function (object) {
|
|
|
|
if (Array.isArray(object))
|
|
{
|
|
for (var i = 0; i < object.length; i++)
|
|
{
|
|
if (object[i]['loadTexture'])
|
|
{
|
|
object[i].loadTexture(this);
|
|
}
|
|
}
|
|
}
|
|
else
|
|
{
|
|
object.loadTexture(this);
|
|
}
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
/**
|
|
* Creates a new Phaser.Image object, assigns this Video to be its texture, adds it to the world then returns it.
|
|
*
|
|
* @method Phaser.Video#addToWorld
|
|
* @param {number} [x=0] - The x coordinate to place the Image at.
|
|
* @param {number} [y=0] - The y coordinate to place the Image at.
|
|
* @param {number} [anchorX=0] - Set the x anchor point of the Image. A value between 0 and 1, where 0 is the top-left and 1 is bottom-right.
|
|
* @param {number} [anchorY=0] - Set the y anchor point of the Image. A value between 0 and 1, where 0 is the top-left and 1 is bottom-right.
|
|
* @param {number} [scaleX=1] - The horizontal scale factor of the Image. A value of 1 means no scaling. 2 would be twice the size, and so on.
|
|
* @param {number} [scaleY=1] - The vertical scale factor of the Image. A value of 1 means no scaling. 2 would be twice the size, and so on.
|
|
* @return {Phaser.Image} The newly added Image object.
|
|
*/
|
|
addToWorld: function (x, y, anchorX, anchorY, scaleX, scaleY) {
|
|
|
|
scaleX = scaleX || 1;
|
|
scaleY = scaleY || 1;
|
|
|
|
var image = this.game.add.image(x, y, this);
|
|
|
|
image.anchor.set(anchorX, anchorY);
|
|
image.scale.set(scaleX, scaleY);
|
|
|
|
return image;
|
|
|
|
},
|
|
|
|
/**
|
|
* If the game is running in WebGL this will push the texture up to the GPU if it's dirty.
|
|
* This is called automatically if the Video is being used by a Sprite, otherwise you need to remember to call it in your render function.
|
|
* If you wish to suppress this functionality set Video.disableTextureUpload to `true`.
|
|
*
|
|
* @method Phaser.Video#render
|
|
*/
|
|
render: function () {
|
|
|
|
if (!this.disableTextureUpload && this.playing)
|
|
{
|
|
this.baseTexture.dirty();
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
* Internal handler called automatically by the Video.mute setter.
|
|
*
|
|
* @method Phaser.Video#setMute
|
|
* @private
|
|
*/
|
|
setMute: function () {
|
|
|
|
if (this._muted)
|
|
{
|
|
return;
|
|
}
|
|
|
|
this._muted = true;
|
|
|
|
this.video.muted = true;
|
|
|
|
},
|
|
|
|
/**
|
|
* Internal handler called automatically by the Video.mute setter.
|
|
*
|
|
* @method Phaser.Video#unsetMute
|
|
* @private
|
|
*/
|
|
unsetMute: function () {
|
|
|
|
if (!this._muted || this._codeMuted)
|
|
{
|
|
return;
|
|
}
|
|
|
|
this._muted = false;
|
|
|
|
this.video.muted = false;
|
|
|
|
},
|
|
|
|
/**
|
|
* Internal handler called automatically by the Video.paused setter.
|
|
*
|
|
* @method Phaser.Video#setPause
|
|
* @private
|
|
*/
|
|
setPause: function () {
|
|
|
|
if (this._paused || this.touchLocked)
|
|
{
|
|
return;
|
|
}
|
|
|
|
this._paused = true;
|
|
|
|
this.video.pause();
|
|
|
|
},
|
|
|
|
/**
|
|
* Internal handler called automatically by the Video.paused setter.
|
|
*
|
|
* @method Phaser.Video#setResume
|
|
* @private
|
|
*/
|
|
setResume: function () {
|
|
|
|
if (!this._paused || this._codePaused || this.touchLocked)
|
|
{
|
|
return;
|
|
}
|
|
|
|
this._paused = false;
|
|
|
|
if (!this.video.ended)
|
|
{
|
|
this.video.play();
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
* On some mobile browsers you cannot play a video until the user has explicitly touched the video to allow it.
|
|
* Phaser handles this via the `setTouchLock` method. However if you have 3 different videos, maybe an "Intro", "Start" and "Game Over"
|
|
* split into three different Video objects, then you will need the user to touch-unlock every single one of them.
|
|
*
|
|
* You can avoid this by using just one Video object and simply changing the video source. Once a Video element is unlocked it remains
|
|
* unlocked, even if the source changes. So you can use this to your benefit to avoid forcing the user to 'touch' the video yet again.
|
|
*
|
|
* As you'd expect there are limitations. So far we've found that the videos need to be in the same encoding format and bitrate.
|
|
* This method will automatically handle a change in video dimensions, but if you try swapping to a different bitrate we've found it
|
|
* cannot render the new video on iOS (desktop browsers cope better).
|
|
*
|
|
* When the video source is changed the video file is requested over the network. Listen for the `onChangeSource` signal to know
|
|
* when the new video has downloaded enough content to be able to be played. Previous settings such as the volume and loop state
|
|
* are adopted automatically by the new video.
|
|
*
|
|
* @method Phaser.Video#changeSource
|
|
* @param {string} src - The new URL to change the video.src to.
|
|
* @param {boolean} [autoplay=true] - Should the video play automatically after the source has been updated?
|
|
* @return {Phaser.Video} This Video object for method chaining.
|
|
*/
|
|
changeSource: function (src, autoplay) {
|
|
|
|
if (autoplay === undefined) { autoplay = true; }
|
|
|
|
// Invalidate the texture while we wait for the new one to load (crashes IE11 otherwise)
|
|
this.texture.valid = false;
|
|
|
|
this.video.pause();
|
|
|
|
this.retry = this.retryLimit;
|
|
|
|
this._retryID = window.setTimeout(this.checkVideoProgress.bind(this), this.retryInterval);
|
|
|
|
this.video.src = src;
|
|
|
|
this.video.load();
|
|
|
|
this._autoplay = autoplay;
|
|
|
|
if (!autoplay)
|
|
{
|
|
this.paused = true;
|
|
}
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
/**
|
|
* Internal callback that monitors the download progress of a video after changing its source.
|
|
*
|
|
* @method Phaser.Video#checkVideoProgress
|
|
* @private
|
|
*/
|
|
checkVideoProgress: function () {
|
|
|
|
// if (this.video.readyState === 2 || this.video.readyState === 4)
|
|
if (this.video.readyState === 4)
|
|
{
|
|
// We've got enough data to update the texture for playback
|
|
this.updateTexture();
|
|
}
|
|
else
|
|
{
|
|
this.retry--;
|
|
|
|
if (this.retry > 0)
|
|
{
|
|
this._retryID = window.setTimeout(this.checkVideoProgress.bind(this), this.retryInterval);
|
|
}
|
|
else
|
|
{
|
|
console.warn('Phaser.Video: Unable to start downloading video in time', this.isStreaming);
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
* Sets the Input Manager touch callback to be Video.unlock.
|
|
* Required for mobile video unlocking. Mostly just used internally.
|
|
*
|
|
* @method Phaser.Video#setTouchLock
|
|
*/
|
|
setTouchLock: function () {
|
|
|
|
this.game.input.touch.addTouchLockCallback(this.unlock, this);
|
|
this.touchLocked = true;
|
|
|
|
},
|
|
|
|
/**
|
|
* Enables the video on mobile devices, usually after the first touch.
|
|
* If the SoundManager hasn't been unlocked then this will automatically unlock that as well.
|
|
* Only one video can be pending unlock at any one time.
|
|
*
|
|
* @method Phaser.Video#unlock
|
|
*/
|
|
unlock: function () {
|
|
|
|
this.touchLocked = false;
|
|
|
|
this.video.play();
|
|
|
|
this.onPlay.dispatch(this, this.loop, this.playbackRate);
|
|
|
|
if (this.key)
|
|
{
|
|
var _video = this.game.cache.getVideo(this.key);
|
|
|
|
if (_video && !_video.isBlob)
|
|
{
|
|
_video.locked = false;
|
|
}
|
|
}
|
|
|
|
return true;
|
|
|
|
},
|
|
|
|
/**
|
|
* Grabs the current frame from the Video or Video Stream and renders it to the Video.snapshot BitmapData.
|
|
*
|
|
* You can optionally set if the BitmapData should be cleared or not, the alpha and the blend mode of the draw.
|
|
*
|
|
* If you need more advanced control over the grabbing them call `Video.snapshot.copy` directly with the same parameters as BitmapData.copy.
|
|
*
|
|
* @method Phaser.Video#grab
|
|
* @param {boolean} [clear=false] - Should the BitmapData be cleared before the Video is grabbed? Unless you are using alpha or a blend mode you can usually leave this set to false.
|
|
* @param {number} [alpha=1] - The alpha that will be set on the video before drawing. A value between 0 (fully transparent) and 1, opaque.
|
|
* @param {string} [blendMode=null] - The composite blend mode that will be used when drawing. The default is no blend mode at all. This is a Canvas globalCompositeOperation value such as 'lighter' or 'xor'.
|
|
* @return {Phaser.BitmapData} A reference to the Video.snapshot BitmapData object for further method chaining.
|
|
*/
|
|
grab: function (clear, alpha, blendMode) {
|
|
|
|
if (clear === undefined) { clear = false; }
|
|
if (alpha === undefined) { alpha = 1; }
|
|
if (blendMode === undefined) { blendMode = null; }
|
|
|
|
if (this.snapshot === null)
|
|
{
|
|
console.warn('Video.grab cannot run because Phaser.BitmapData is unavailable');
|
|
return;
|
|
}
|
|
|
|
if (clear)
|
|
{
|
|
this.snapshot.cls();
|
|
}
|
|
|
|
this.snapshot.copy(this.video, 0, 0, this.width, this.height, 0, 0, this.width, this.height, 0, 0, 0, 1, 1, alpha, blendMode);
|
|
|
|
return this.snapshot;
|
|
|
|
},
|
|
|
|
/**
|
|
* Removes the Video element from the DOM by calling parentNode.removeChild on itself.
|
|
* Also removes the autoplay and src attributes and nulls the reference.
|
|
*
|
|
* @method Phaser.Video#removeVideoElement
|
|
*/
|
|
removeVideoElement: function () {
|
|
|
|
if (!this.video)
|
|
{
|
|
return;
|
|
}
|
|
|
|
if (this.video.parentNode)
|
|
{
|
|
this.video.parentNode.removeChild(this.video);
|
|
}
|
|
|
|
while (this.video.hasChildNodes())
|
|
{
|
|
this.video.removeChild(this.video.firstChild);
|
|
}
|
|
|
|
this.video.removeAttribute('autoplay');
|
|
this.video.removeAttribute('src');
|
|
|
|
this.video = null;
|
|
|
|
},
|
|
|
|
/**
|
|
* Destroys the Video object. This calls `Video.stop` and then `Video.removeVideoElement`.
|
|
* If any Sprites are using this Video as their texture it is up to you to manage those.
|
|
*
|
|
* @method Phaser.Video#destroy
|
|
*/
|
|
destroy: function () {
|
|
|
|
this.stop();
|
|
|
|
this.removeVideoElement();
|
|
|
|
if (this.touchLocked)
|
|
{
|
|
this.game.input.touch.removeTouchLockCallback(this.unlock, this);
|
|
}
|
|
|
|
if (this._retryID)
|
|
{
|
|
window.clearTimeout(this._retryID);
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
/**
|
|
* @name Phaser.Video#currentTime
|
|
* @property {number} currentTime - The current time of the video in seconds. If set the video will attempt to seek to that point in time.
|
|
*/
|
|
Object.defineProperty(Phaser.Video.prototype, "currentTime", {
|
|
|
|
get: function () {
|
|
|
|
return (this.video) ? this.video.currentTime : 0;
|
|
|
|
},
|
|
|
|
set: function (value) {
|
|
|
|
this.video.currentTime = value;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* @name Phaser.Video#duration
|
|
* @property {number} duration - The duration of the video in seconds.
|
|
* @readOnly
|
|
*/
|
|
Object.defineProperty(Phaser.Video.prototype, "duration", {
|
|
|
|
get: function () {
|
|
|
|
return (this.video) ? this.video.duration : 0;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* @name Phaser.Video#progress
|
|
* @property {number} progress - The progress of this video. This is a value between 0 and 1, where 0 is the start and 1 is the end of the video.
|
|
* @readOnly
|
|
*/
|
|
Object.defineProperty(Phaser.Video.prototype, "progress", {
|
|
|
|
get: function () {
|
|
|
|
return (this.video) ? (this.video.currentTime / this.video.duration) : 0;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* @name Phaser.Video#mute
|
|
* @property {boolean} mute - Gets or sets the muted state of the Video.
|
|
*/
|
|
Object.defineProperty(Phaser.Video.prototype, "mute", {
|
|
|
|
get: function () {
|
|
|
|
return this._muted;
|
|
|
|
},
|
|
|
|
set: function (value) {
|
|
|
|
value = value || null;
|
|
|
|
if (value)
|
|
{
|
|
if (this._muted)
|
|
{
|
|
return;
|
|
}
|
|
|
|
this._codeMuted = true;
|
|
this.setMute();
|
|
}
|
|
else
|
|
{
|
|
if (!this._muted)
|
|
{
|
|
return;
|
|
}
|
|
|
|
this._codeMuted = false;
|
|
this.unsetMute();
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* Gets or sets the paused state of the Video.
|
|
* If the video is still touch locked (such as on iOS devices) this call has no effect.
|
|
*
|
|
* @name Phaser.Video#paused
|
|
* @property {boolean} paused
|
|
*/
|
|
Object.defineProperty(Phaser.Video.prototype, "paused", {
|
|
|
|
get: function () {
|
|
|
|
return this._paused;
|
|
|
|
},
|
|
|
|
set: function (value) {
|
|
|
|
value = value || null;
|
|
|
|
if (this.touchLocked)
|
|
{
|
|
return;
|
|
}
|
|
|
|
if (value)
|
|
{
|
|
if (this._paused)
|
|
{
|
|
return;
|
|
}
|
|
|
|
this._codePaused = true;
|
|
this.setPause();
|
|
}
|
|
else
|
|
{
|
|
if (!this._paused)
|
|
{
|
|
return;
|
|
}
|
|
|
|
this._codePaused = false;
|
|
this.setResume();
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* @name Phaser.Video#volume
|
|
* @property {number} volume - Gets or sets the volume of the Video, a value between 0 and 1. The value given is clamped to the range 0 to 1.
|
|
*/
|
|
Object.defineProperty(Phaser.Video.prototype, "volume", {
|
|
|
|
get: function () {
|
|
|
|
return (this.video) ? this.video.volume : 1;
|
|
|
|
},
|
|
|
|
set: function (value) {
|
|
|
|
if (value < 0)
|
|
{
|
|
value = 0;
|
|
}
|
|
else if (value > 1)
|
|
{
|
|
value = 1;
|
|
}
|
|
|
|
if (this.video)
|
|
{
|
|
this.video.volume = value;
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* @name Phaser.Video#playbackRate
|
|
* @property {number} playbackRate - Gets or sets the playback rate of the Video. This is the speed at which the video is playing.
|
|
*/
|
|
Object.defineProperty(Phaser.Video.prototype, "playbackRate", {
|
|
|
|
get: function () {
|
|
|
|
return (this.video) ? this.video.playbackRate : 1;
|
|
|
|
},
|
|
|
|
set: function (value) {
|
|
|
|
if (this.video)
|
|
{
|
|
this.video.playbackRate = value;
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* Gets or sets if the Video is set to loop.
|
|
* Please note that at present some browsers (i.e. Chrome) do not support *seamless* video looping.
|
|
* If the video isn't yet set this will always return false.
|
|
*
|
|
* @name Phaser.Video#loop
|
|
* @property {boolean} loop
|
|
*/
|
|
Object.defineProperty(Phaser.Video.prototype, "loop", {
|
|
|
|
get: function () {
|
|
|
|
return (this.video) ? this.video.loop : false;
|
|
|
|
},
|
|
|
|
set: function (value) {
|
|
|
|
if (value && this.video)
|
|
{
|
|
this.video.loop = 'loop';
|
|
}
|
|
else if (this.video)
|
|
{
|
|
this.video.loop = '';
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* @name Phaser.Video#playing
|
|
* @property {boolean} playing - True if the video is currently playing (and not paused or ended), otherwise false.
|
|
* @readOnly
|
|
*/
|
|
Object.defineProperty(Phaser.Video.prototype, "playing", {
|
|
|
|
get: function () {
|
|
|
|
return !(this.video.paused && this.video.ended);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
Phaser.Video.prototype.constructor = Phaser.Video;
|
|
</pre>
|
|
</article>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="clearfix"></div>
|
|
<footer>
|
|
|
|
|
|
<span class="copyright">
|
|
Phaser Copyright © 2012-2015 Photon Storm Ltd.
|
|
</span>
|
|
<br />
|
|
|
|
<span class="jsdoc-message">
|
|
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.2</a>
|
|
on Wed Feb 17 2016 13:24:45 GMT+0000 (GMT Standard Time) using the <a href="https://github.com/terryweiss/docstrap">DocStrap template</a>.
|
|
</span>
|
|
</footer>
|
|
</div>
|
|
|
|
|
|
<br clear="both">
|
|
</div>
|
|
|
|
</div>
|
|
<script src="scripts/sunlight.js"></script>
|
|
<script src="scripts/sunlight.javascript.js"></script>
|
|
<script src="scripts/sunlight-plugin.doclinks.js"></script>
|
|
<script src="scripts/sunlight-plugin.linenumbers.js"></script>
|
|
<script src="scripts/sunlight-plugin.menu.js"></script>
|
|
<script src="scripts/jquery.min.js"></script>
|
|
<script src="scripts/jquery.scrollTo.js"></script>
|
|
<script src="scripts/jquery.localScroll.js"></script>
|
|
<script src="scripts/bootstrap-dropdown.js"></script>
|
|
<script src="scripts/toc.js"></script>
|
|
|
|
<script> Sunlight.highlightAll({lineNumbers:true, showMenu: true, enableDoclinks :true}); </script>
|
|
|
|
<script>
|
|
$( function () {
|
|
$( "#toc" ).toc( {
|
|
anchorName : function(i, heading, prefix) {
|
|
return $(heading).attr("id") || ( prefix + i );
|
|
},
|
|
selectors : "h1,h2,h3,h4",
|
|
showAndHide : false,
|
|
scrollTo : 60
|
|
} );
|
|
$( "#toc>ul" ).addClass( "nav nav-pills nav-stacked" );
|
|
$( "#main span[id^='toc']" ).addClass( "toc-shim" );
|
|
|
|
} );
|
|
</script>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|