MediaPlayer Overview

The MediaPlayer plays video files from static sources or streams online YouTube videos and provides dynamic content in a user-friendly interface.

It also delivers a styled video UI functionality by using the HTML5 <video> element and ships with a built-in toolbar, timeline slider, title bar, HD source support, and responsive layout.

The MediaPlayer wrapper for Vue is a client-side wrapper for the Kendo UI MediaPlayer widget.

The MediaPlayer Package is part of Kendo UI for Vue, a professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Basic Usage

The following example demonstrates how to initialize the MediaPlayer.

Example
View Source
Change Theme:

Installation

To initialize the MediaPlayer, either:

Initializing with Webpack

  1. Install Kendo UI and add a theme.

    npm install --save @progress/kendo-ui
    npm install --save @progress/kendo-theme-default
  2. Install the Kendo UI MediaPlayer package for Vue.

    npm install --save @progress/kendo-mediaplayer-vue-wrapper
  3. Import the Kendo UI packages to the App component. If you use the Kendo UI components more than once in your application, add all Kendo UI-related files to the main.js file. If you use the Kendo UI components once in your application, add the Kendo UI-related files the component where they will be referred.

    import '@progress/kendo-ui' // This will import the entire Kendo UI library
    // As an alternative, you could import only the scripts that are used by a specific widget:
    // import '@progress/kendo-ui/js/kendo.mediaplayer' // Imports only the MediaPlayer script and its dependencies

    import '@progress/kendo-theme-default/dist/all.css'

    import { MediaPlayer, MediaPlayerInstaller } from '@progress/kendo-mediaplayer-vue-wrapper'

    Vue.use(MediaPlayerInstaller)

    new Vue({
        el: '#app',
        components: {
            MediaPlayer
        }
    })

Functionality and Features

The MediaPlayer supports keyboard navigation.

Events

The following example demonstrates basic MediaPlayer events. You can subscribe to all MediaPlayer events by the handler name.

Example
View Source
Change Theme: