1.0.6 • Published 6 months ago
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
}
}
}