---
title: LivePhotosKit.Player
framework: livephotoskitjs
role: symbol
role_heading: Class
path: livephotoskitjs/livephotoskit.player
---

# LivePhotosKit.Player

A player for Live Photos.

## Declaration

```data
interface LivePhotosKit.Player
```

## Overview

Overview This class provides a default native control allowing users to play Live Photos. On a desktop browser, when the user moves the pointer over the native control badge, the video starts playing until the user moves the pointer away from the badge or the video ends. If the user moves the pointer before the video ends, the video stops. On a mobile device, when the user presses the Live Photo, the video starts playing until the user stops pressing or the video ends. Player Events During the life cycle of a player, several events are generated.  Adding an event listener to the player allows reaction to these events. videoload The player emits a videoload event after the video component of the Live Photo has finished loading but before the minimum number of frames necessary for smooth playback are decoded. Under normal circumstances, the canplay event is emitted after the videoload event. The event handler is then passed an Event object. The Player reference is accessible from the event’s target member. player.addEventListener('videoload', (ev) => {     // Handle event. }) photoload The player emits a photoload event when the photo component of the Live Photo has finished loading. The event handler is then passed an Event object. The Player reference is accessible from the event’s target member. player.addEventListener('photoload', (ev) => {     // Handle event. }) canplay The player emits a canplay event when the Player has obtained just enough video frames and is obtaining them quickly enough for smooth playback. The event handler is then passed an Event object. The Player reference is accessible from the event’s target member. player. addEventListener('canplay', (ev) => {     // Handle event. }) ended The player emits an ended event when playback of the Live Photo has completed. The event handler is then passed an Event object. The Player reference is accessible from the event’s target member. player.addEventListener('ended', (ev) => {     // Handle event. }) error The player emits an error event when loading of either the photo or video components of the Live Photo has failed. The event handler is then passed an Event object, which has a detail member containing error information. If LivePhotosKit JS cannot interpret an internal exception, the error member of detail will be the exception object. The Player reference may be obtained from the event’s target member. player.addEventListener('error', (ev) => {     if (typeof ev.detail.errorCode === 'number') {         switch (ev.detail.errorCode) {         case LivePhotosKit.Errors.IMAGE_FAILED_TO_LOAD:             // Do something             break;         case LivePhotosKit.Errors.VIDEO_FAILED_TO_LOAD:             // Do something             break;         }     } else {         // Extract Error object.         console.error(ev.detail.error);     } })

## Topics

### Initializers

- [LivePhotosKit.Player](livephotoskitjs/livephotoskit.player/livephotoskit.player.md)

### Instance Properties

- [currentTime](livephotoskitjs/livephotoskit.player/currenttime.md)
- [duration](livephotoskitjs/livephotoskit.player/duration.md)
- [photoHeight](livephotoskitjs/livephotoskit.player/photoheight.md)
- [photoTime](livephotoskitjs/livephotoskit.player/phototime.md)
- [photoWidth](livephotoskitjs/livephotoskit.player/photowidth.md)
- [canPlay](livephotoskitjs/livephotoskit.player/canplay.md)
- [errors](livephotoskitjs/livephotoskit.player/errors.md)
- [frameTimes](livephotoskitjs/livephotoskit.player/frametimes.md)
- [isPlaying](livephotoskitjs/livephotoskit.player/isplaying.md)
- [loadProgress](livephotoskitjs/livephotoskit.player/loadprogress.md)
- [metadataVideoSrc](livephotoskitjs/livephotoskit.player/metadatavideosrc.md)
- [photo](livephotoskitjs/livephotoskit.player/photo.md)
- [photoMimeType](livephotoskitjs/livephotoskit.player/photomimetype.md)
- [photoSrc](livephotoskitjs/livephotoskit.player/photosrc.md)
- [playbackStyle](livephotoskitjs/livephotoskit.player/playbackstyle.md)
- [proactivelyLoadsVideo](livephotoskitjs/livephotoskit.player/proactivelyloadsvideo.md)
- [renderedTime](livephotoskitjs/livephotoskit.player/renderedtime.md)
- [showsNativeControls](livephotoskitjs/livephotoskit.player/showsnativecontrols.md)
- [video](livephotoskitjs/livephotoskit.player/video.md)
- [videoHeight](livephotoskitjs/livephotoskit.player/videoheight.md)
- [videoMimeType](livephotoskitjs/livephotoskit.player/videomimetype.md)
- [videoRotation](livephotoskitjs/livephotoskit.player/videorotation.md)
- [videoSrc](livephotoskitjs/livephotoskit.player/videosrc.md)
- [videoWidth](livephotoskitjs/livephotoskit.player/videowidth.md)
- [wantsToPlay](livephotoskitjs/livephotoskit.player/wantstoplay.md)
- [autoplay](livephotoskitjs/livephotoskit.player/autoplay.md)
- [effectType](livephotoskitjs/livephotoskit.player/effecttype.md)

### Instance Methods

- [beginFinishingPlaybackEarly](livephotoskitjs/livephotoskit.player/beginfinishingplaybackearly.md)
- [pause](livephotoskitjs/livephotoskit.player/pause.md)
- [play](livephotoskitjs/livephotoskit.player/play.md)
- [stop](livephotoskitjs/livephotoskit.player/stop.md)
- [toggle](livephotoskitjs/livephotoskit.player/toggle.md)
- [updateSize](livephotoskitjs/livephotoskit.player/updatesize.md)

## See Also

### Classes

- [LivePhotosKit](livephotoskitjs/livephotoskit.md)