How to get self hosted video url in block preview?

Kirby 3 Solved ✅
1

Hi, how to get the video URL in blocks preview? I am trying to extend the default Video block to have self-hosted video as an option.
Whatever I do I get
can't access property "url", this.content.selfhostedVideo is undefined

This is my code, files field selfhostedVideo is working fine.

video: {
      computed: {
        captionMarks() {
          return this.field("caption", { marks: true }).marks;
        },

        video() {
          if (this.content.selfhostedVideo && this.content.selfhostedVideo.url) {
            return this.content.selfhostedVideo.url;
          }
          return false;
        }
      },

      template: `
      <template>
        <k-block-figure
          :caption="content.caption"
          :caption-marks="captionMarks"
          :empty-text="$t('field.blocks.video.placeholder') + ' …'"
          :is-empty="!video"
          empty-icon="video"
          @open="open"
          @update="update"
        >

          <k-aspect-ratio ratio="16/9">
            <video v-if="video" :src="video" />
          </k-aspect-ratio>
        </k-block-figure>
      </template>

      `

    }
2

selfhostedvideo is an array, so (simple example code):

<template>
  <ul @dblclick="open">
    <template v-if="content.videofile">
      <video>
        <source :src="videofile.url" mime="">
      </video>
    </template>
    <template v-else>
      <div>No file selected</div>
     
    </template>
  </ul>
</template>
<script>
export default {
  computed: {
    videofile() {
      return this.content.videofile[0] || {};
    },
  },
};
</script>
1 Like
3

Thanks! :pray:

4

I must add one thing, if someone else finds this thread in the future.

For this kind of preview is best to use all small caps for the field name. This name “videoFile” didn’t work, but this “videofile” does work.