Issue with Video displaying when Images and Videos both are passed

[asabri97]

Hello,

I am using vueper slides to show my slideshow that contains images and videos. I am getting the images and videos from the backend. The images are displayed, the slider fades and autoplays but the video content is not displayed. Can anyone help with this issue?

Thank you in advance.

This is my code:

<template>
  <div>
    <vueper-slides :slide-ratio="310 / 599" autoplay fade :touchable="false">
      <vueper-slide
        :class="'contentDisplaySize'"
        v-for="story in displaySlides"
        :key="story.src"
        :image="story.image ? story.src : undefined"
        :video="story.video ? story.src : undefined"
      />
    </vueper-slides>
  </div>
</template>

<script>
import { VueperSlides, VueperSlide } from "vueperslides";
import "vueperslides/dist/vueperslides.css";

export default {
  name: "storySlider",
  components: { VueperSlides, VueperSlide },
  props: {
    experience: Object,
  },
  computed: {
    displaySlides() {
      return this.experience.story_array.map((story) => {
        const isVideo = story.includes(".mov?") || story.includes(".mp4?");
        const isImage =
          story.includes(".jpg?") ||
          story.includes("jpeg?") ||
          story.includes("png") ||
          story.includes("webp");
        return {
          src: story,
          image: isImage,
          video: isVideo,
        };
      });
    },
  },
};
</script>

No video is displayed

Update: I found the videos are displayed in firefox but I have an issue in Chrome.

[eyesurewould]

Accepted video formats from the doc:

[String] webm, mp4, ogv, avi