Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@byteark/byteark-player-vue

Package Overview
Dependencies
Maintainers
0
Versions
40
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@byteark/byteark-player-vue - npm Package Compare versions

Comparing version 4.0.0 to 4.1.0

dist/@byteark/byteark-player-vue.d.ts
dist/@byteark/byteark-player-vue.js
dist/@byteark/byteark-player-vue.umd.cjs

99

package.json
{
"name": "@byteark/byteark-player-vue",
"version": "4.0.0",
"main": "dist/@byteark/byteark-player-vue.umd.js",
"description": "ByteArk Player Container for Vue.js",
"version": "4.1.0",
"description": "ByteArk Player Container for Vue",
"author": "byteark",
"license": "MIT",
"homepage": "https://byteark.github.io/byteark-player-vue",
"repository": {
"type": "git",
"url": "git+https://github.com/byteark/byteark-player-vue.git"
"url": "https://github.com/byteark/byteark-player-vue"
},
"scripts": {
"build": "vue-cli-service build",
"deploy": "gh-pages -d example/dist",
"lint": "vue-cli-service lint",
"make": "vue-cli-service build --target lib --name @byteark/byteark-player-vue ./src/main.js",
"predeploy": "cd example && yarn install && yarn build",
"prepublish": "yarn make",
"serve": "vue-cli-service serve"
"bugs": {
"url": "https://github.com/byteark/byteark-player-vue/issues"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.13",
"@vue/cli-service": "~4.5.13",
"@vue/compiler-sfc": "^3.1.5",
"core-js": "^3.15.2",
"gh-pages": "^3.2.3",
"sass": "^1.69.2",
"sass-loader": "^10.2.0",
"vue": "^3.1.5"
"main": "./dist/@byteark/byteark-player-vue.umd.cjs",
"module": "./dist/@byteark/byteark-player-vue.js",
"types": "./dist/@byteark/byteark-player-vue.d.ts",
"source": "./src/index.ts",
"engines": {
"node": ">=16"
},
"resolutions": {
"ssri": "^8.0.1",
"is-svg": "^4.2.2"
},
"type": "module",
"files": [
"dist"
],
"bugs": {
"url": "https://github.com/byteark/byteark-player-vue/issues"
"commitlint": {
"extends": [
"@commitlint/config-conventional"
]
},
"homepage": "https://byteark.github.io/byteark-player-vue/"
}
"dependencies": {
"lodash.omitby": "^4.6.0",
"remove": "^0.1.5",
"vue": "^3.5.12"
},
"peerDependencies": {
"@types/video.js": "^7.3.58"
},
"devDependencies": {
"@commitlint/cli": "^19.5.0",
"@commitlint/config-conventional": "^19.5.0",
"@eslint/js": "^9.14.0",
"@types/eslint__js": "^8.42.3",
"@types/lodash.omitby": "^4.6.9",
"@types/node": "^22.8.7",
"@types/video.js": "^7.3.58",
"@typescript-eslint/eslint-plugin": "^8.12.2",
"@typescript-eslint/parser": "^8.12.2",
"@vitejs/plugin-vue": "^5.1.4",
"@vue/babel-plugin-jsx": "^1.2.5",
"conventional-changelog-cli": "^5.0.0",
"eslint": "^9.14.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.2.1",
"eslint-plugin-vue": "^9.30.0",
"gh-pages": "^6.2.0",
"globals": "^15.12.0",
"husky": "^9.1.6",
"npm-run-all": "^4.1.5",
"prettier": "^3.3.3",
"rimraf": "^6.0.1",
"sass-embedded": "^1.80.6",
"typescript": "~5.6.2",
"vite": "^5.4.10",
"vite-plugin-dts": "^4.3.0",
"vue-router": "4",
"vue-tsc": "^2.1.8"
},
"scripts": {
"start": "npm run dev",
"clean": "rimraf ./dist",
"dev": "vite",
"deploy": "gh-pages -d dist/example",
"build": "vue-tsc --p ./tsconfig.build.json && vite build",
"lint": "eslint . --report-unused-disable-directives --max-warnings 0",
"prepublish": "run-s build",
"predeploy": "vue-tsc --p ./tsconfig.build.example.json && vite build --config ./vite.config.example.ts",
"preview": "vite preview",
"commitlint": "commitlint --edit",
"update-changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
"version": "npm run update-changelog && git add CHANGELOG.md"
}
}

453

README.md
# ByteArk Player Container for Vue.js
[![NPM](https://img.shields.io/npm/v/@byteark/byteark-player-vue.svg)](https://www.npmjs.com/package/@byteark/byteark-player-vue) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
[![NPM](https://img.shields.io/npm/v/@byteark/byteark-player-vue.svg)](https://www.npmjs.com/package/@byteark/byteark-player-vue)

@@ -9,9 +9,9 @@ Table of Contents

- [Features](#features)
- [Compatibility](#compatibility)
- [Installation](#installation)
- [Compatibility](#compatibility)
- [Usage](#usage)
- [Options prop](#options-prop)
- [ByteArkPlayerContainer Props](#bytearkplayercontainer-props)
- [ByteArk Player Options](#byteark-player-options)
- [Source Object](#source-object)
- [Event Handling](#event-handling)
- [Advanced Props](#advanced-props)
- [Advanced Usages](#advanced-usages)

@@ -36,12 +36,12 @@ - [Controlling Players](#controlling-players)

Since Vue 3 is not backward compatible, please make sure to install the correct ByteArk Player Container version based on your Vue version.
Since Vue 3 is not backward compatible, please make sure to install the correct ByteArk Player Container version based on your Vue version.
| Vue Version | Package Version |
|-------------|-----------------|
| 2.x | 3.x |
| 3.x | 4.x |
| Vue Version | Package Version | Branch |
|-------------|-----------------|--------|
| 2.x | 3.x | master |
| 3.x | 4.x | main |
## Installation
This library is distributed via NPM. You may install from NPM or Yarn.
This library is distributed via NPM. You may install from NPM, Yarn, PNPM.

@@ -53,2 +53,4 @@ ```bash

yarn add @byteark/byteark-player-vue
# For PNPM
pnpm add @byteark/byteark-player-vue
```

@@ -63,30 +65,22 @@

<ByteArkPlayerContainer
:options="playerOptions" />
:options="playerOptions"
/>
</template>
<script>
<script setup lang="ts">
import ByteArkPlayerContainer from '@byteark/byteark-player-vue';
import type { ByteArkPlayerOptions } from '@byteark/byteark-player-vue';
export default {
components: {
ByteArkPlayerContainer,
},
data() {
return {
playerOptions: {
autoplay: true,
fluid: true,
aspectRatio: '16:9',
poster: 'https://qoder.byteark.com/images/video-frames/1/GU/cg/1GUcgd3XwsmD-large.jpg',
sources: {
src: 'https://video.example.com/path/to/video/playlist.m3u8',
type: 'application/x-mpegURL',
// Optional
title: 'Video Title',
videoId: 'RI2PimuHxDXw',
poster: 'https://qoder.byteark.com/images/video-frames/1/GU/cg/1GUcgd3XwsmD-large.jpg',
},
},
};
},
const playerOptions: ByteArkPlayerOptions = {
autoplay: 'any',
fluid: true,
aspectRatio: '16:9',
poster: 'https://stream-image.byteark.com/image/video-cover-480p/7/K/7KPloVWgN.png',
sources: [{
src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8',
type: 'application/x-mpegURL',
title: 'Big Buck Bunny',
videoId: 'TZyZheqEJUwC',
poster: 'https://stream-image.byteark.com/image/video-cover-480p/7/K/7KPloVWgN.png',
}]
};

@@ -116,38 +110,50 @@ </script>

## Options prop
## ByteArkPlayerContainer Props
You have to pass `options` object to `ByteArkPlayerContainer`
Following properties are the properties that can be updated to the ByteArkPlayerContainer.
| Name | Type | Default | Description |
|--------------|--------------|---------|------------------------------------------------------------------------------|
| autoplay | Boolean | true | Autoplay the video after the player is created. |
| aspectRatio | String | '16:9' | Use with fluid layout mode, to inform expected video's aspect ratio |
| controls | Boolean | true | Show the controls bar. |
| customClass | String | - | Custom class name to be applied to the video container. |
| fill | Boolean | false | Use fill layout mode. |
| fluid | Boolean | true | Use fluid layout mode. |
| loop | Boolean | - | Replay the video after ending |
| muted | Boolean | - | Play the video without sounds. |
| playbackRate | Number | 1.0 | Playback speed. 1.0 means original speed. |
| playsinline | Boolean | true | Should be true so custom controls available on all platforms, including iOS. |
| poster | String | - | Image to show before playing the video. |
| preload | String | - | Preload the video before playing. (none / metadata / auto) |
| responsive | Boolean | - | Auto show/hide controls depending on the screen size. |
| sources | Object/Array | - | Source of videos (See [Source Object](#source-object)) |
| seekButtons | Boolean | false | Show 10 seconds seek buttons and allow double-tap to seek on mobile. |
| volume | Number | - | Video's volume between 0 and 1. |
| plugins | Array | - | Videojs's plugins |
| Name | Type | Default | Description |
|----------------------|------------------------------------------------------------------------------------------------------------------------------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| options | ByteArkPlayerOptions | - | An options pass to ByteArk Player (See [ByteArk Player Options Object](#byteark-player-options)) |
| customClass | String | - | Add custom css class to ByteArkPlayerContainer component |
| lazyload | Boolean | - | The player loads its asset files once it got rendered on the webpage. By passing this prop, the player then loads its asset files once the user clicked on the player instead. |
| playerEndpoint | String | - | Endpoint to the video player (without version part). |
| playerSlugId | String | - | SlugId of player created via api player server service |
| playerVersion | String | v2 | Custom version of the player. |
| playerJsFileName | String | | File name of player's JS. |
| playerCssFileName | String | | File name of player's CSS. |
| setupPlayerFunction | `(options: ByteArkPlayerOptions, loadScriptOrStyleFunction: (id: string, url: string, type: 'script' \| 'style') => Promise` | - | This function call to before create player function |
| createPlayerFunction | `(node: HTMLMediaElement, options: ByteArkPlayerOptions, onReady: () => void) => ByteArkPlayer` | - | This function should return a VideoJS's player instance. |
| onPlayerLoaded | `() => void` | - | Callback function to be called when loaded player's resources. |
| onPlayerLoadError | `(error: ByteArkPlayerContainerError, originalError: ByteArkPlayerError \| unknown) => void` | - | Callback function to be called when there're an error about loading player. |
| onPlayerSetup | `() => void` | - | Callback function to be called when player is setup. |
| onPlayerSetupError | `(error: ByteArkPlayerContainerError, originalError: ByteArkPlayerError \| unknown) => void` | - | Callback function to be called when there're an error when setup player. |
| onPlayerCreated | `(player: ByteArkPlayer) => void` | - | Callback function to be called when a player instance is created. |
| onPlayerReady | `(player: ByteArkPlayer) => void` | - | Callback function to be called when a player instance is ready. |
The following 5 properties can also be added to `options` for an advanced usage.
### ByteArk Player Options
| Name | Type | Description |
|---------------------------|----------|---------------------------------------------------------------------------------|
| playerSlugId | String | SlugId of player created via api player server service |
| playerVersion | String | Custom version of the player. (default: 'v1') |
| playerEndpoint | String | Endpoint to the video player (without version part and ending slash). |
| playerJsFileName | String | File name of player's JS. (default: 'byteark-player.min.js') |
| playerCssFileName | String | File name of player's CSS. (default: 'byteark-player.min.css') |
You have to pass `options` object to `ByteArkPlayerContainer` in order to create ByteArk Player instance.
| Name | Type | Default | Description |
|--------------|----------------|---------|-----------------------------------------------------------------------------------------------------------------------------------|
| autoplay | Boolean/String | - | Autoplay the video after the player is created. (Seee [VideoJS's autoplay options](https://videojs.com/guides/options/#autoplay)) |
| aspectRatio | String | - | Use with fluid layout mode, to inform expected video's aspect ratio |
| controls | Boolean | true | Show the controls bar. |
| fill | Boolean | - | Use fill layout mode. |
| fluid | Boolean | - | Use fluid layout mode. |
| loop | Boolean | - | Replay the video after ending |
| muted | Boolean | - | Play the video without sounds. |
| playbackRate | Number | 1.0 | Playback speed. 1.0 means original speed. |
| playsinline | Boolean | true | Should be true so custom controls available on all platforms, including iOS. |
| poster | String | - | Image to show before playing the video. |
| preload | String | - | Preload the video before playing. (none / metadata / auto) |
| responsive | Boolean | - | Auto show/hide controls depending on the screen size. |
| seekButtons | Boolean | - | Show 10 seconds seek buttons and allow double-tap to seek on mobile. |
| sources | Array | - | Array of video source object to be played. (See [Source Object](#source-object)) |
| volume | Number | - | Video's volume between 0 and 1. |
| plugins | Array | - | Videojs's plugins |
You can also use other props not listed here,
but appear as [VideoJS's options](https://docs.videojs.com/tutorial-options.html#playbackrates).
but appear as [VideoJS's options](https://videojs.com/guides/options/).
However, changing props will not effective after the player is created.

@@ -171,44 +177,30 @@

ByteArk Player emits events that you can use to trigger your custom functions.
ByteArkPlayerContainer emits events that you can use to trigger your custom functions.
| Event Name | Callback Parameters | Trigger Condition |
|-------------------------|-----------------------------------|-----------------------------------------------------------------------------|
| created | `(player)` | When the player instance was created. |
| error | `(originalError)` | When there was an error while loading player. |
| ready | `(player)` | When the player instance was ready to play. |
| firstplay | `(player)` | When the video played for the first time. |
| play | `(player, currentTime)` | When the video played or the user hit play. (Value of currentTime is a number in seconds) |
| pause | `(player, currentTime)` | When the video played or the user hit pause. (Value of currentTime is a number in seconds) |
| ended⁕ | `(player)` | When the video ended. |
| timeupdate | `(player, currentTime)` | When the current playback time changed. (Value of currentTime is a number in seconds) |
| seeking | `(player, currentTime)` | When the the user seeked the video. (Value of currentTime is a number in seconds) |
| waiting | `(player)` | When the player is waiting for the video. |
| fullscreenchange | `(player, isFullscreen)` | When the user entered or exited the full screen mode. (Value of isFullscreen is True or False) |
| volumechange | `(player, volume)` | When the user adjusted the volume. (Value of volume is between 0 - 1) |
| ratechange | `(player, playbackSpeed)` | When the user adjusted the playback speed. (Value of playbackSpeed is a number) |
| enterpictureinpicture | `(player)` | When the user entered Picture-in-Picture mode. |
| leavepictureinpicture | `(player)` | When the user exited Picture-in-Picture mode. |
| Event Name | Callback Parameters | Trigger Condition |
|-----------------------|--------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------|
| loaded | - | When loaded player's resources. |
| loaderror | `(error: ByteArkPlayerContainerError, originalError: ByteArkPlayerError \| unknown): void` | When there're an error about loading player's resources. |
| setup | - | When player is setup. |
| setuperror | `(error: ByteArkPlayerContainerError, originalError: ByteArkPlayerError \| unknown): void` | When there're an error when setup player. |
| created | `(player: ByteArkPlayer)` | When the player instance was created. |
| ready | `(player: ByteArkPlayer)` | When the player instance was ready to play. |
| firstplay | `(player: ByteArkPlayer)` | When the video played for the first time. |
| play | `(player: ByteArkPlayer, currentTime: number)` | When the video played or the user hit play. (Value of currentTime is a number in seconds) |
| pause | `(player: ByteArkPlayer, currentTime: number)` | When the video played or the user hit pause. (Value of currentTime is a number in seconds) |
| ended | `(player: ByteArkPlayer)` | When the video ended. |
| timeupdate | `(player: ByteArkPlayer, currentTime: number)` | When the current playback time changed. (Value of currentTime is a number in seconds) |
| seeking | `(player: ByteArkPlayer, currentTime: number)` | When the the user seeked the video. (Value of currentTime is a number in seconds) |
| seeked | `(player: ByteArkPlayer, currentTime: number)` | When the the user seeked the video. (Value of currentTime is a number in seconds) |
| waiting | `(player: ByteArkPlayer)` | When the player is waiting for the video. |
| stalled | `(player: ByteArkPlayer)` | When the player is waiting for the video. |
| fullscreenchange | `(player: ByteArkPlayer, isFullscreen: boolean)` | When the user entered or exited the full screen mode. (Value of isFullscreen is True or False) |
| volumechange | `(player: ByteArkPlayer, volume: number)` | When the user adjusted the volume. (Value of volume is between 0 - 1) |
| ratechange | `(player: ByteArkPlayer, playbackSpeed: number)` | When the user adjusted the playback speed. (Value of playbackSpeed is a number) |
| enterpictureinpicture | `(player: ByteArkPlayer)` | When the user entered Picture-in-Picture mode. |
| leavepictureinpicture | `(player: ByteArkPlayer)` | When the user exited Picture-in-Picture mode. |
| error | `(error: ByteArkPlayerError \| MediaError \| unknown \| null)` | When there was an error while loading player. |
⁕ You are reminded that [HTML5 video element fires a pause event whenever the playback stops](https://www.w3.org/2010/05/video/mediaevents.html), including at the end of the content.
For an example of implementing these events, please see [Controlling Players Section](#controlling-players).
## Advanced Props
We also provide ways to customize the player functions and behaviours by passing the following props to the player.
| Name | Type | Description |
|---------------------------|----------|---------------------------------------------------------------------------------|
| createPlayerFunction | Function | Custom video instance. This function should return a VideoJS's player instance. |
| lazyload | Boolean | The player loads its asset files once it got rendered on the webpage. By passing this prop, the player then loads its asset files once the user clicked on the player instead. |
| onPlayerSetup | Function | Inject your custom functions before creating a player instance. |
| onPlayerSetupError | Function | Inject your custom functions when there was an error during the setup. |
```vue
<template>
<ByteArkPlayerContainer
:options="options"
lazyload />
</template>
```
## Advanced Usages

@@ -218,4 +210,3 @@

You may access the player directly via `getPlayer()` method,
or using the player instance that sent from `onReady` callback.
You may access the player instance from onReady callback parameter.

@@ -231,4 +222,4 @@ ```vue

@timeupdate="onTimeUpdated"
@seeking="onVideoSeeked"
@waiting="onPlayerWaiting"
@seeking="onVideoSeeking"
@seeked="onVideoSeeked"
@fullscreenchange="onToggleFullScreen"

@@ -240,78 +231,82 @@ @volumechange="onVolumeChange"

:options="playerOptions" />
<button @click.stop="playerInstance.play()">Play</button>
<button @click.stop="playerInstance.pause()">Pause</button>
<button @click="player.value?.play()">Play</button>
<button @click="player.value?.pause()">Pause</button>
</template>
<script>
import ByteArkPlayerContainer from '@byteark/byteark-player-vue';
<script setup lang="ts">
import { ref } from 'vue'
import ByteArkPlayerContainer from '@byteark/byteark-player-vue'
import type { ByteArkPlayerOptions, ByteArkPlayer } from '@byteark/byteark-player-vue'
export default {
components: {
ByteArkPlayerContainer,
},
data() {
return {
playerInstance: null,
playerOptions: {
autoplay: true,
fluid: true,
sources: {
src: 'https://video.example.com/path/to/video/playlist.m3u8',
type: 'application/x-mpegURL',
// Optional
title: 'Video Title'
},
},
};
},
methods: {
doSomething() {
// Do something...
},
onReady(newPlayerInstance) {
this.playerInstance = newPlayerInstance;
this.doSomething();
},
onFirstPlay(playerInstance) {
this.doSomething();
},
onPlay(playerInstance, currentTime) {
this.doSomething();
},
onPause(playerInstance, currentTime) {
this.doSomething();
},
onVideoEnded(playerInstance) {
this.doSomething();
},
onTimeUpdated(playerInstance, currentTime) {
this.doSomething();
},
onVideoSeeked(playerInstance, currentTime) {
this.doSomething();
},
onPlayerWaiting(playerInstance) {
this.doSomething();
},
onToggleFullScreen(playerInstance, isFullscreen) {
this.doSomething();
},
onVolumeChange(playerInstance, volume) {
this.doSomething();
},
onPlaybackSpeedChanged(playerInstance, playbackSpeed) {
this.doSomething();
},
onPIPEntered(playerInstance) {
this.doSomething();
},
onPIPExited(playerInstance) {
this.doSomething();
},
},
};
const playerRef = ref<ByteArkPlayer | null>(null)
const playerOptions: ByteArkPlayerOptions = {
autoplay: 'any',
fluid: true,
aspectRatio: '16:9',
poster: 'https://stream-image.byteark.com/image/video-cover-480p/7/K/7KPloVWgN.png',
sources: [{
src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8',
type: 'application/x-mpegURL',
title: 'Big Buck Bunny',
videoId: 'TZyZheqEJUwC',
poster: 'https://stream-image.byteark.com/image/video-cover-480p/7/K/7KPloVWgN.png',
}]
}
const onReady = (player: ByteArkPlayer) => {
// The player is ready! save player instance
playerRef.value = player
}
const onFirstPlay = (player: ByteArkPlayer) => {
// Do something...
}
const onPlay = (player: ByteArkPlayer, currentTime: number) => {
// Do something...
}
const onPause = (player: ByteArkPlayer, currentTime: number) => {
// Do something...
}
const onVideoEnded = () => {
// Do something...
}
const onTimeUpdated = (player: ByteArkPlayer, currentTime: number) => {
// Do something...
}
const onVideoSeeking = (player: ByteArkPlayer, currentTime: number) => {
// Do something...
}
const onVideoSeeked = (player: ByteArkPlayer, currentTime: number) => {
// Do something...
}
const onToggleFullScreen = (player: ByteArkPlayer, isFullscreen: boolean) => {
// Do something...
}
const onVolumeChange = (player: ByteArkPlayer, volume: number) => {
// Do something...
}
const onPlaybackSpeedChanged = (player: ByteArkPlayer, playbackSpeed: number) => {
// Do something...
}
const onPIPEntered = (player: ByteArkPlayer,) => {
// Do something...
}
const onPIPExited = (player: ByteArkPlayer,) => {
// Do something...
}
</script>
```
### Using VideoJS Plugins

@@ -323,33 +318,28 @@

@ready="onReady"
:options="playerOptions" />
:options="playerOptions"
/>
</template>
<script>
import ByteArkPlayerContainer from '@byteark/byteark-player-vue';
<script setup lang="ts">
import ByteArkPlayerContainer from '@byteark/byteark-player-vue'
import type { ByteArkPlayerOptions, ByteArkPlayer } from '@byteark/byteark-player-vue'
export default {
components: {
ByteArkPlayerContainer,
},
data() {
return {
playerInstance: null,
playerOptions: {
autoplay: true,
fluid: true,
sources: {
src: 'https://video.example.com/path/to/video/playlist.m3u8',
type: 'application/x-mpegURL',
// Optional
title: 'Video Title'
},
},
};
},
methods: {
onReady(newPlayerInstance) {
// The player is ready! Initialize plugins here.
},
},
};
const playerOptions: ByteArkPlayerOptions = {
autoplay: 'any',
fluid: true,
aspectRatio: '16:9',
poster: 'https://stream-image.byteark.com/image/video-cover-480p/7/K/7KPloVWgN.png',
sources: [{
src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8',
type: 'application/x-mpegURL',
title: 'Big Buck Bunny',
videoId: 'TZyZheqEJUwC',
poster: 'https://stream-image.byteark.com/image/video-cover-480p/7/K/7KPloVWgN.png',
}]
}
const onReady = (player: ByteArkPlayer) => {
// The player is ready! Initialize plugins here.
player.somePlugin()
}
</script>

@@ -363,41 +353,30 @@ ```

<ByteArkPlayerContainer
@ready="onReady"
:options="playerOptions" />
:options="playerOptions"
/>
</template>
<script>
import ByteArkPlayerContainer from '@byteark/byteark-player-vue';
<script setup lang="ts">
import ByteArkPlayerContainer from '@byteark/byteark-player-vue'
import type { ByteArkPlayerOptions, ByteArkPlayer } from '@byteark/byteark-player-vue'
export default {
components: {
ByteArkPlayerContainer,
},
data() {
return {
playerInstance: null,
playerOptions: {
autoplay: true,
fluid: true,
sources: {
src: 'https://video.example.com/path/to/video/playlist.m3u8',
type: 'application/x-mpegURL',
// Optional
title: 'Video Title',
},
html5: {
hlsjs: {
xhrSetup: function(xhr, url) {
xhr.withCredentials = true;
},
},
},
const playerOptions: ByteArkPlayerOptions = {
autoplay: 'any',
fluid: true,
aspectRatio: '16:9',
poster: 'https://stream-image.byteark.com/image/video-cover-480p/7/K/7KPloVWgN.png',
sources: [{
src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8',
type: 'application/x-mpegURL',
title: 'Big Buck Bunny',
videoId: 'TZyZheqEJUwC',
poster: 'https://stream-image.byteark.com/image/video-cover-480p/7/K/7KPloVWgN.png',
}],
html5: {
hlsjs: {
xhrSetup: function(xhr, url) {
xhr.withCredentials = true;
},
};
},
methods: {
onReady(newPlayerInstance) {
// The player is ready! Initialize plugins here.
},
},
};
}
</script>

@@ -404,0 +383,0 @@ ```

dist/@byteark/byteark-player-vue.common.js
dist/@byteark/byteark-player-vue.common.js.map
dist/@byteark/byteark-player-vue.umd.js
dist/@byteark/byteark-player-vue.umd.js.map
dist/@byteark/byteark-player-vue.umd.min.js
dist/@byteark/byteark-player-vue.umd.min.js.map
dist/demo.html
dist/@byteark/byteark-player-vue.css

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc