Vues Multimedia Sequence Component - NOT TESTED / POC - Vue Component has a few subcomponents - and recieves props from parent component. All configured through JSON!

media-sequence-func.js

// Build A MultiMedia sequence
// TO DO - Set API For Transitions ETC.
export default function mediaSequenceFunc (playState) {
  let i = 0,
      v = 0,
      slideArray = [],
      slide = document.querySelectorAll('.sequence-slide'),
      transitionTimer = () => {}
  const slideCount = slide.length
  // Store Slides in Object
  while(v < slideCount) {
    slideArray.push(slide[v])
    v++
  }
  // Run the Slideshow if we Have Play = true
  if(playState === true) {
    const slideShow = () => {
      if (i === (slideCount)) {
        transitionTimer = () => {
          return false
        }
      } else {
        const transitionTimerFunc = (timeoutGap) => {
          transitionTimer(
            setTimeout(() => {
              slideShow()
            }, (timeoutGap))
          )
        }
        // Set Timeout on slide transition.
        let slideNo = slideArray[i]
        let slideType = slideNo.dataset.slideType
        slideNo.classList.add('slide-visible')
        if (slideType === 'video') {
          let video = slideNo.children[0].lastChild
          transitionTimerFunc(Math.floor(video.duration * 1000))
          video.play()          
        } else if (slideType === 'static') {
          // TO DO - Be Specific about DataSet Property
          transitionTimerFunc(slideNo.children[0].attributes[1].nodeValue)
        }
        i++
      }
    }
    slideShow()
  } else if (playState === false) {
    return false
  }
}

MultiMediaSequence.vue

<template lang="pug">
  section#multi-media-sequence-container(:data-transition-length="transition")
    ul#multi-media-sequence-wrapper
      li.sequence-slide(v-for="(slide, index) in sequencesrc" :id="'sequence-frame-' + index" :data-slide-type="slide.type")
        .static-container(v-if="slide.type == 'static'" :data-timeout-length="slide.content.timeout_length")
          SequenceStatic(:staticslide="slide.content" :transitiontime="transition" :index="index")
        .video-container(v-if="slide.type == 'video'" )
          VideoPlayer(:videourl="slide.src" :transitiontime="transition" :index="index")
</template>

<script>
  import mediaSequenceFunc from '../js/media-sequence-func'
  import VideoPlayer from './VideoPlayer.vue'
  import SequenceStatic from './SequenceStatic.vue'
  export default {
    name: 'multi-media-sequence',
    props: [
      'sequencesrc',
      'transition'
    ],
    components: {
      VideoPlayer,
      SequenceStatic
    },
    mounted: function () {
      console.log('multi media sequence mounted')
      setTimeout(() => {
        setTimeout(() => { mediaSequenceFunc(true) }, 500)
      }, 2000)
    },
    destroyed: function () {
      console.log('multi media sequence destroyed')
      mediaSequenceFunc(false)
    }
  }
</script>

<style lang="sass" scoped>
  @import "../_sass/_utilities.sass"
  section#multi-media-sequence-container,
  ul#multi-media-sequence-wrapper,
  li.sequence-slide
    +full-size
  // SlideShow
  .slide-visible
    *
      opacity: 1
  .slide-hidden
    opacity: 0
</style>

sequence.json

{
  "subhead": "Education is a five letter word...",
  "copy": "Lorem ipsum dolor sit amet. The Education is an important factor.",
  "media": "true",
  "media_player": "multi-media-sequence",
  "transition_time": "1250",
  "sequence": [
    {
      "type": "video",
      "src": "https://s3-us-west-2.amazonaws.com/14-forty/iaw/ally-long.mp4"
    },{
      "type": "static",
      "content": {
        "slide_class": "full-slide",
        "headline": "Slide 2",
        "copy": "Lorem Ipsum Dolor dodladfsfsdfa.",
        "background": "https://s3-us-west-2.amazonaws.com/14-forty/iaw/homeless-tents.jpg",
        "timeout_length": "2000"
      }
    },{
      "type": "video",
      "src": "https://s3-us-west-1.amazonaws.com/db13/satisfying/sv-01.mp4"
    }
  ]
}