Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

SOLVED: m3u8 streaming not working after build

See original GitHub issue

It works perfectly when i am running: yarn dev, but when i build it, it won’t work. Hope you guys can see what i do wrong, thanks in advance

console log on builded version screen shot 2018-01-29 at 13 56 30

Versions:

"videojs-contrib-hls": "^5.12.2",
"vue": "^2.3.3",
"vue-video-player": "^5.0.1"

Build script from package.json

"build:mac": "node .electron-vue/build.js && electron-builder -m",

wepback.main.config.js

  module: {
    noParse: [/videojs-contrib-hls/],

video.vue screen shot 2018-01-29 at 13 52 21

Issue Analytics

State:
Created 6 years ago
Comments:9 (3 by maintainers)

Top GitHub Comments

3reactions

silocommented, Feb 1, 2018

i solved it by using this : https://github.com/Peer5/videojs-contrib-hls.js

1reaction

silocommented, Oct 27, 2018

@Jayant-Purohit i have installed these packages:

“videojs-contrib-hls”: “^5.12.2”, “vue-video-player”: “^5.0.1”, <-- i don’t think this is involved in the solution

in my Video.vue file:

<script>
import videojs from 'video.js'
window.videojs = videojs
require('videojs-contrib-hls/dist/videojs-contrib-hls.js')

export default {
  name: 'VideoPage',
  data () {
    return {
      selected: '',
      tvList: {
        'TV 2': 'http://tv2danmark-tv2nord-live.hls.adaptive.level3.net/tv2danmark/tv2nord/master3200kbps.m3u8',
        'Folketinget': 'http://httpcache1.dna.qbrick.com/90042-httpcache2/smil:FT_stream_high/playlist.m3u8'
      },
      playerOptions: {
        autoplay: false,
        fluid: true,
        preload: 'auto',
        sources: [{
          withCredentials: false,
          type: 'application/x-mpegURL',
          src: this.tvUrl
        }],
        controlBar: {
          timeDivider: false,
          durationDisplay: false
        },
        flash: {hls: { withCredentials: false }},
        html5: {hls: { withCredentials: true }}
      }
    }
  },
  methods: {
    playerReadied (player) {
      var hls = player.tech({ IWillNotUseThisInPlugins: false }).hls
      console.log(hls)
      player.tech_.hls.xhr.beforeRequest = function (options) {
        // console.log(options)
        return options
      }
    },
    onChange () {
      console.log(this.selectedTv)
      this.src = this.selectedTv
    }
  },
  beforeCreate: function () {
    this.tvUrl = 'http://tv2danmark-tv2nord-live.hls.adaptive.level3.net/tv2danmark/tv2nord/master3200kbps.m3u8'
  }
}
</script>

I hope this helps