SOLVED: m3u8 streaming not working after build

[silo]

Hi

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

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

[surmon-china]

You can leave your text code, I tested locally.

[surmon-china]

@silo Sorry, I did not find the source of these two errors after my test, but I can be sure they are related to webpack compression plugin, you can refer to the discussion here, if the problem is solved, please leave your solution here Program, good luck!

[silo]

@surmon-china i havn't figured it out yet. i still have the problem after i run yarn build:mac. I will write here when/if i found a solution.

[godIsAProgrammer]

you can write noParse: [/videojs-contrib-hls/] in webpack.base.config.js . like this

[silo]

Hi @godIsAProgrammer , i have tried that. didn't work. I get the same error when i run yarn build:web and running it in a chrome browser. BUT it works in safari. Hmmm... Could it be something with the chrome browser engine or something?

[surmon-china]

@silo I guess, this is due to the packaged code, in strict mode, and different browsers for different modes of handling different, the corresponding answer to this link should be helpful to you. https://github.com/videojs/videojs-contrib-hls/issues/600

[silo]

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

[Jayant-Purohit]

@silo please provide specific details on how you solve this by https://github.com/Peer5/videojs-contrib-hls.js

facing the same problem with the same error message you posted

[silo]

@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