ovlb

this.$vidContainer.setAttribute('controls', 'true')

ovlb

this.$vidContainer.addEventListener('ended', () => {
  VideoPlayerController.showImage(this.$imgContainer)
  
  // Hand back control to this class
  this.userControls = false
})

ovlb

static showImage($img) {
  $img.classList.remove('video-container__image--hidden')
}

ovlb

playVideo() {
  console.log('HLS – Playing video')
  VideoPlayerController.hideImage(this.$imgContainer)
  this.$vidContainer.play().then(() => {
    console.log('HLS - Video played')
  })
}

ovlb

parseHlsManifest() {
  console.log('HLS – Parsing video manifest')
  const { Hls } = window
  const hls = new Hls()
  const { src } = this.$vidContainer

  hls.loadSource(src)
  hls.attachMedia(this.$vidContainer)
  hls.on(Hls.Events.MANIFEST_PARSED, () => {
    this.parsed = true

ovlb

const path = require('path')

module.exports = {
  // outputDir: path.resolve(__dirname, 'dist-demo'),
  chainWebpack: config => {
  //  config
  //    .entry('app')
  //    .clear()
  //    .add('./demo/main.js')
    config.resolve.alias

ovlb

const path = require('path')

module.exports = {
  // outputDir: path.resolve(__dirname, 'dist-demo'),
  chainWebpack: config => {
    config
      .entry('app')
      .clear()
      .add('./demo/main.js')
  //   config.resolve.alias

ovlb

const path = require('path')

module.exports = {
  outputDir: path.resolve(__dirname, 'dist-demo'),
  // chainWebpack: config => {
  //   config
  //     .entry('app')
  //     .clear()
  //     .add('./demo/main.js')
  //   config.resolve.alias

ovlb

// vue.config.js

const path = require('path')

module.exports = {
  outputDir: path.resolve(__dirname, 'dist-demo'),
  chainWebpack: config => {
    config
      .entry('app')
      .clear()

ovlb

.video-container__image {
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0, 0.1, 0.3, 1);

    // Add play icon
    &::after {
        background-image: url('/images/icon_play_big.svg');
        background-position: center;
        // Play icon in large containers should be larger than in small ones
        background-size: calc(45px + 5%);