@plutotcool/vue-freecaster
Advanced tools
Freecaster video player integration for vue.
pnpm install @plutotcool/vue-freecaster
The plugin loads the required freecaster scripts and globally
registers the FreecasterPlayer component in your vue app.
import Vue from 'vue';
import { FreecasterPlugin } from '@plutotcool/vue-freecaster'
Vue.use(FreecasterPlugin)
The usePlayer composable provide a reactive freecaster player instance
attached to an element ref.
<script setup lang="ts">
import { usePlayer } from '@plutotcool/vue-freecaster'
const { element, attributes, player } = usePlayer({
options: {
videoId: '...'
}
})
</script>
<template>
<div ref="element" v-bind="attributes"/>
</template>
The FreecasterPlayer component is a wrapper around the usePlayer composable.
It also provides models and slot props for the player state.
<script setup lang="ts">
import { FreecasterPlayer, type Player } from '@plutotcool/vue-freecaster'
const player = shallowRef<Player>()
const muted = ref(false)
const paused = ref(false)
const volume = ref(1)
const currentTime = ref(0)
const readyState = ref(0)
const fullscreen = ref(false)
const subtitles = ref<TextTrack[]>([])
const currentSubtitles = ref<TextTrack>()
</script>
<template>
<FreecasterPlayer
video-id="..."
v-model="player"
v-model:muted="muted"
v-model:paused="paused"
v-model:volume="volume"
v-model:current-time="currentTime"
v-model:ready-state="readyState"
v-model:fullscreen="fullscreen"
v-model:subtitles="subtitles"
v-model:current-subtitles="currentSubtitles"
/>
</template>
<script setup lang="ts">
import { FreecasterPlayer } from '@plutotcool/vue-freecaster'
</script>
<template>
<FreecasterPlayer
video-id="..."
#default="{
player,
muted,
paused,
volume,
currentTime,
readyState,
fullscreen,
subtitles,
currentSubtitles
}"
>
<!-- ... !-->
</FreecasterPlayer>
</template>
Out of the box, the freecaster player does not work well inside web components, there are especially two issues to overcome:
Automatic player initialization relies on the behavior of
document.getElementsByClassName('freecaster-player')which doesn't select elements through shadow doms.
[!TIP] vue-freecaster handles initialization by explicitly calling the global
window.fcloadmethod on the player element.
The player stylesheets are included using top-level
<link>elements in the<head>, thus css rules don't cascade into shadow doms.
[!TIP] vue-freecaster provides a
<FreecasterStyle/>component that can be added to the closest shadow root that contains your players (eg: your root<App/>component). It will look for freecaster stylesheets in the<head>, and import them inside the shadow dom:<script setup lang="ts"> import { FreecasterStyle } from '@plutotcool/vue-freecaster' </script> <template> <FreecasterStyle/> <!-- Rest of your app --> </template>
FAQs
Freecaster video player integration for vue
The npm package @plutotcool/vue-freecaster receives a total of 62 weekly downloads. As such, @plutotcool/vue-freecaster popularity was classified as not popular.
We found that @plutotcool/vue-freecaster demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket Firewall Enterprise is now available with flexible deployment, configurable policies, and expanded language support.
Security News
Open source dashboard CNAPulse tracks CVE Numbering Authorities’ publishing activity, highlighting trends and transparency across the CVE ecosystem.
Product
Detect malware, unsafe data flows, and license issues in GitHub Actions with Socket’s new workflow scanning support.