Skip to main content
Version: 4.x


Enables loading, playing and controlling media files via the HTML5 MediaElement API. This is used internally by the vime-audio and vime-video components, which are the preferred components to use for loading file-based media.

You don't interact with this component for passing player properties, controlling playback, listening to player events and so on, that is all done through the vime-player component.


autoPiPauto-pipEXPERIMENTAL: Whether the browser should automatically toggle picture-in-picture mode as the user switches back and forth between this document and another document or application.boolean ∣ undefinedundefined
controlsListcontrols-listDetermines what controls to show on the media element whenever the browser shows its own set of controls (e.g. when the controls attribute is specified).string ∣ undefinedundefined
crossOrigincross-originWhether to use CORS to fetch the related image. See MDN for more information."" ∣ "anonymous" ∣ "use-credentials" ∣ undefinedundefined
disablePiPdisable-pipEXPERIMENTAL: Prevents the browser from suggesting a picture-in-picture context menu or to request picture-in-picture automatically in some cases.boolean ∣ undefinedundefined
disableRemotePlaybackdisable-remote-playbackEXPERIMENTAL: Whether to disable the capability of remote playback in devices that are attached using wired (HDMI, DVI, etc.) and wireless technologies (Miracast, Chromecast, DLNA, AirPlay, etc).boolean ∣ undefinedundefined
mediaTitlemedia-titleThe title of the current media.string ∣ undefinedundefined
playbackRates--The playback rates that are available for this media.number[][0.25, 0.5, 0.75, 1, 1.25, 1.5, 2]
posterposterA URL for an image to be shown while the video is downloading. If this attribute isn't specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame.string ∣ undefinedundefined
preloadpreloadProvides a hint to the browser about what the author thinks will lead to the best user experience with regards to what content is loaded before the video is played. See MDN for more information."" ∣ "auto" ∣ "metadata" ∣ "none" ∣ undefined'metadata'
viewTypeview-typeWhether to use an audio or video element to play the media.ViewType.Audio ∣ ViewType.Video ∣ undefinedundefined


vMediaElChangeEmitted when the underlying media element changes.CustomEvent<HTMLAudioElement ∣ HTMLVideoElement ∣ undefined>
vSrcSetChangeEmitted when the child <source /> elements are modified.CustomEvent<MediaResource[]>


Pass <source> and <track> elements to the underlying HTML5 media player.


Used by#


graph TD;
vime-audio --> vime-file
vime-video --> vime-file
style vime-file fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS