Отображение видео в каучуковом компоненте Nuxt - PullRequest
Новая
       6

Отображение видео в каучуковом компоненте Nuxt

0 голосов
/ 30 апреля 2019

enter image description here

Я работаю с Nuxt и хотел бы отобразить видео в карусельном компоненте рядом с изображениями jpeg и png, которые у меня есть в статической папке. Вы можете увидеть статическое содержимое папки на скриншоте. Карусельная составляющая: 

<template>
<section>
<v-card
    class="mx-auto"
    color="#26c6da"
    dark
    max-width="1200"
>

<v-carousel>
    <v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item>
</v-carousel>

</v-card>

</section>
</template>


<script>
var cache = {};
// const images = require.context('../static/', false, /\.png$|\.jpg/);
const images = require.context('../static/', false, /\.png$|\.jpg|\.mp4/);
var imagesArray = Array.from(images.keys());
// const images = ["./52lv.PNG", "./Capture1.PNG", "./maps.PNG"]
console.log(images.keys());
var constructed = [];
function constructItems(fileNames, constructed) {
    fileNames.forEach(fileName => {
    constructed.push({
        'src': fileName.substr(1)
    })
    });
    return constructed;
}
console.log('items ');
console.log(imagesArray);
// At build-time cache will be populated with all required modules. 
var res = constructItems(imagesArray, constructed);
console.log(res);
export default {
    data: function() {
    return {
        items: res
    };
    }
}

Это нормально работает для изображений jpg, но я вижу пустой экран для видеофайла. Что я тут не так делаю.

EDIT:

следуя инструкциям ниже, я заменил следующее. К сожалению, видео не будет воспроизводиться, и я получаю пустой слайд. Все изображения JPG работают, хотя. Что я делаю не так? 

export default {
  data() {
    return {
      items: [  {
id: '1',
content: '<iframe width="560" height="315" ' +
  'src="https://www.youtube.com/embed/zjcVPZCG4sM" ' +
  'frameborder="0" allow="autoplay; encrypted-media" ' +
  'allowfullscreen></iframe>'
 },
        {
          src: "https://cdn.vuetifyjs.com/images/carousel/sky.jpg"
        },
        {
          src: "https://cdn.vuetifyjs.com/images/carousel/bird.jpg"
        },
        {
          src: "https://cdn.vuetifyjs.com/images/carousel/planet.jpg"
        }
      ]
    };
  }

};

1 Ответ

1 голос
/ 30 апреля 2019

Похоже, это может быть проблема vuetify.Текущее решение, похоже, заключается в использовании iframes.Просто измените src в iframe и сделайте ширину и высоту автоматически.оформить заказ на github: https://github.com/vuetifyjs/vuetify/issues/5063.

codepen: 

items: [{
  id: "1",
  content: '<iframe width="560" height="315" src="https://www.youtube.com/embed/zjcVPZCG4sM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>'},
        { id: "2",
  content: '<iframe width="560" height="315" src="https://www.youtube.com/embed/zjcVPZCG4sM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>'}
]

ссылка: https://codepen.io/anon/pen/MqBEqb

...