Skip to main content

Vue.js

Try out Source Embedder in your Vue project.

Replit Example

index.html

Add the following script tag to your index.html file.

<script src="https://embed.sourcesync.io" defer></script>
SourceEmbedVideo.vue - An example video component powered by Source Embedder
<script setup lang="ts">
  import { ref, onMounted, onUnmounted, defineExpose } from 'vue'

  declare global {
    interface Window {
      SourceEmbedsLoader: {
        load: (opts?: { version?: string }) => Promise<any>
      }
    }
  }

  function getEmbedderAsync(baseSettings: any = {}, loaderOpts: any = {}) {
    return new Promise(async (resolve) => {
      const sourceEmbedder = await window.SourceEmbedsLoader.load(loaderOpts)
      const embedderInstance = sourceEmbedder.register(baseSettings)
      return resolve(embedderInstance)
    })
  }
  
  const videoEl = ref()
  let embedInstance
  const props = defineProps<{
    embedSettings: {
      distributionId: string
    } & any
  }>()


  onMounted(async () => {
    const embedder = await getEmbedderAsync()
    await embedder.embed({
      // recommended strategy for embedding
      strategy: "direct-iframeless",
      ...props.embedSettings,
      // target element
      el: videoEl.value,
    })
    embedInstance = embedder.getInstance(videoEl.value)
  })

  onUnmounted(() => {
    embedInstance?.destroy()
  })

  const show = () => embedInstance?.show?.()
  const hide = () => embedInstance?.hide?.()

  defineExpose({
    show,
    hide
  })
  
</script>

<template>
  <video ref="videoEl" v-bind="$attrs">
    <slot></slot>
  </video>
</template>

App.vue - An example usage of SourceEmbedVideo.vue
<script setup lang="ts">
  import { ref } from 'vue'
  import SourceEmbedVideo from './components/SourceEmbedVideo.vue'
  const embedVideoRef = ref<SourceEmbedVideo>()
</script>

<template>
  <source-embed-video 
    ref="embedVideoRef"
    src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
    style="width:100%;"
    controls
    :embed-settings="{
      distributionId: 'getting-started'
    }"
  />
  <div>
    <button @click="embedVideoRef.show()">show</button>
    <button @click="embedVideoRef.hide()">hide</button>
  </div>
</template>