video-audio-loop-fader.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<div class="video-container">
  <video id="v1" width="100%" src="out2.mp4" autoplay="true" loop="true"></video>
  <video id="v2" width="100%" src="out2.mp4"  loop="true"></video>
</div>
<style>
#v2 {
  opacity: 0;
}
video {
  position: absolute;
}
</style>

<script>
video1 = $("#v1")
video2 = $("#v2")
inTransition = false
currentVideo = null
otherVideo = null

function switchVideos() {
  if (currentVideo === video1) {
    console.log('switch from v1 to v2')
    currentVideo = video2
    otherVideo = video1
    otherVideo[0].removeEventListener('timeupdate', videoHandler)
    currentVideo[0].addEventListener('timeupdate', videoHandler)
  } else {
    console.log('switch from v2 to v1')
    currentVideo = video1
    otherVideo = video2
    otherVideo[0].removeEventListener('timeupdate', videoHandler)
    currentVideo[0].addEventListener('timeupdate', videoHandler)
  }
}

switchVideos()

function videoHandler(e) {
  if (currentVideo[0].currentTime > 29.5 && !inTransition) {
    inTransition = true
    console.log('fading out', currentVideo.attr('id'))
    var timeout = parseInt(1000 * (currentVideo[0].duration - currentVideo[0].currentTime))
    console.log('timeout', timeout)
    currentVideo.css('z-index', 1)
    otherVideo.css('opacity', 1)
    otherVideo.css('z-index', -1)
    otherVideo[0].volume = 0
    otherVideo[0].currentTime = 0
    console.log('play', otherVideo.attr('id'))
    otherVideo[0].play()
    otherVideo.animate({volume: 1 }, timeout)
    currentVideo.animate({ opacity: 0, volume: 0 }, timeout)
    setTimeout(function() {
      inTransition = false
      switchVideos()
    }, timeout)
  }
}
</script>