こんにちは。普段は動的型付け言語でサーバーサイドを担当しています。
Vue3+video.jsの使い方を調べていたとき、TypeScriptでの実装例が見つからず苦労したことがありました。
その時調査がてら書いたものではありますが、Composition APIと<script setup>構文それぞれでの Vue3(TypeScript)+video.jsの実装例を紹介します。
vue3.3も出ており、熟成させすぎて多少旬を逃した感もありますが、参考になりましたら幸いです。
準備
- npm v8.19.2
- node v18.11.0
- vite v3.1.8
- vue v3.2.41
viteのインストールから起動まで
npm init vite@latest gaprot_vue3_sample -- --template vue-ts
cd gaprot_vue3_sample
npm install
npm run dev型チェック用プラグインのインストール
npm install vite-plugin-checkerNode.jsの型定義ファイルのインストール
npm install @types/node@18.8.0viteでimportのパスに@のエイリアスを利用できるようにするプラグインのインストール（お好みで）
npm install vite-tsconfig-pathsvideo.js本体と型定義ファイルのインストール
npm install video.js
npm install @types/video.jsそれでは実装します
pagesディレクトリとcomponentsディレクトリを用意します。
パラメーターの受け渡し部分をどのように実装するのかを確認するために、あえてファイルを2つに分けています。
styleは省略しますので別途調整してください。
CompositionAPI で書く場合
まずは、Vue3系から使えるようになった CompositionAPI を用いた場合の書き方例です。
<template>
<div>
<CompositionApiPlayer :options="videoOptions" />
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import CompositionApiPlayer from '@/components/CompositionApiPlayer.vue'
import { VideoJsPlayerOptions } from 'video.js'
export default defineComponent({
name: 'CompositionApi',
components: {
CompositionApiPlayer
},
setup: () => {
return {
videoOptions: {
autoplay: true,
controls: true,
sources: [
{
src: "./media/sample.mp4",
type: "video/mp4"
}
]
} as VideoJsPlayerOptions
}
}
})
</script><template>
<div>
<video ref="videoPlayer" class="video-js" @playing="playing"></video>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref, onMounted, onBeforeUnmount } from 'vue'
import videojs, { VideoJsPlayerOptions, VideoJsPlayer } from 'video.js'
import "video.js/dist/video-js.css"
export default defineComponent({
name: 'VideoPlayer',
props: {
options: {
type: Object as () => VideoJsPlayerOptions,
default() {
return {}
}
}
},
emits: {
startPlay: () => true
},
setup: (props, { emit }) => {
const videoPlayer: Ref<string | Element> = ref("")
let player: VideoJsPlayer
const playing = (): void => {
emit('startPlay')
}
onMounted(() => {
// playerの準備
player = videojs(videoPlayer.value, props.options, function onPlayerReady() {
console.log("compositionapi player mounted!")
})
})
onBeforeUnmount(() => {
if (player) {
player.dispose()
console.log("compositionapi player disposed!")
}
})
return {
videoPlayer,
playing
}
}
})
</script>
<style scoped>
</style><script setup> で書く場合
次にVue3.2から使えるようになった<script setup>構文を用いた場合の例です。
CompositionAPIを使った場合に比べて物凄くシンプルに書けます！
<script setup lang="ts">
import ScriptSetupPlayer from '@/components/ScriptSetupPlayer.vue'
import { VideoJsPlayerOptions } from 'video.js'
const videoOptions: VideoJsPlayerOptions = {
autoplay: true,
controls: true,
sources: [
{
src: "./media/sample.mp4",
type: "video/mp4"
}
]
}
</script>
<template>
<h2>ScriptSetup Player</h2>
<div class="contents">
<ScriptSetupPlayer :options="videoOptions" />
</div>
</template><script setup lang="ts">
import { ref, Ref, onMounted, onBeforeUnmount } from 'vue'
import videojs, { VideoJsPlayerOptions, VideoJsPlayer } from 'video.js'
import "video.js/dist/video-js.css"
interface Props {
options: VideoJsPlayerOptions
}
const props = defineProps<Props>()
const videoPlayer: Ref<string | Element> = ref("")
let player: VideoJsPlayer
onMounted(() => {
player = videojs(videoPlayer.value, props.options, function onPlayerReady() {
console.log("script setup player mounted!")
})
})
onBeforeUnmount(() => {
if (player) {
player.dispose()
console.log("script setup player disposed!")
}
})
</script>
<template>
<video id="video-player" ref="videoPlayer" class="video-js"></video>
</template>
<style scoped>
</style>自分は CompositionAPI の学習に結構苦労したので、<script setup> でずいぶん書きやすくなったと感じました。
両方書いてみて個人的にも勉強になりましたが、少しでもどなたかの参考になれば幸いです。
