cineplayer v1.0.6

CinePlayer For Vue3

CinePlayer - Your Ultimate HTML5 Video Experience

Setup

In main.js file:

import { createApp } from 'vue'
import App from './App.vue'
import 'cineplayer/dist/cineplayer.css'
import CinePlayer from 'cineplayer/dist/cineplayer.es.js'

const Vue = createApp(App)
Vue.use(CinePlayer)

In Component Template:

<CinePlayer id="player" :options="options"></CinePlayer>

In Component Javascript Composition:

import {CinePlayer} from 'cineplayer/dist/cineplayer.es.js'

const options = ref(null)

options.value = {
    id: 'player',
    color: '#0000ff',// color of player
    width: '700x',// width of player (px or percent)
    height: '700px',// height of player (px or percent)
    key: '{API_KEY}',//api key player from https://cineplayer.eu
    videos: [
        {
            src: '{filepath}',// filepath src video. Support HLS Media
            type: 'hls',// if the src is HLS
            title: '{title}',//title of video
            image: '{image}',//thumbnail
            description: '{description}',//description
            subtitles: [
                {
                    src: '{filepath subtitle}',//source file for subtitle
                    lang: '{lang_code}',//e.x. en for english
                    label: '{label language}',//Label for Language
                    default: false //true if the subtitle is default else false
                },
            ],
            ads: {
                url: '{filepath ads}',//the filepath source for ads.Support VAST XML FILE
                //The times which you want to play the ads. Format HH:MM:SS
                times: [
                    '00:00:01',
                    '00:23:45',
                ]
            }
        },
        {
            //When the videos array has length > 1, then the video player enable playlist mode
        }
    ],
    events:
        {
            onEnded: () => {
                // function who trigger when end the video or playlist
            }
        }
}