JSFiddle - React, Tailwind, and code Playground

by mkennedy

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="slide">
  Slide {{currentSlide}}
  <br><br>
  <a href="#" @click="setCurrent(0)">Slide 0 (Video)</a>
  <a href="#" @click="setCurrent(1)">Slide 1 (Video)</a>
  <a href="#" @click="setCurrent(2)">Slide 2 (Image)</a>
  <br><br>
  <component :src="currentSlide.src" :is="current" :key="currentSlide"></component>
</div>

<template id="video-template">
  <video autoplay controls>
    <source :src="src" type="video/mp4">
  </video>
</template>

<template id="image-template">
  <img :src="src" width="350px" height="350px" alt="">
</template>

JavaScript

Vue.component('video-slide', {
  template: '#video-template',
  props: ['src']
})

Vue.component('image-slide', {
  template: '#image-template',
  props: ['src']
})

new Vue({
  el: '#slide',
  data: {
    current: 'video-slide',
    currentSlide: 0,
    slides:[
    	{
      	id: 0,
      	src: 'http://www.808.dk/vstreamer.asp?video=gizmo.mp4',
        time: 10,
        type: 3
      },
      {
      	id: 1,
      	src: 'http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4',
        time: 150,
        type: 3
      },
      {
      	id: 2,
      	src: 'http://placehold.it/350x350',
        time: 150,
        type: 2
      }
    ]
  },
  mounted: function(){
  	this.currentSlide = this.slides[0]
  },
  methods: {
  	setCurrent: function(index){
    	this.currentSlide = this.slides[index]
      
      switch(this.slides[index].type){
      	case 2:
        	this.current = 'image-slide'
          break
          
        case 3:
        	this.current = 'video-slide'
          break
          
        default:
        break
      }
    }
  }
})