Importing OvenPlayer is undefined even though in debugger it is not.

[walsong]

When I import in vue OvenPlayer like this after installing it:

import { OvenPlayer } from 'OvenPlayer'

and then do OvenPlayer("player", {}), I get the error "Type Error: cannot read property create of undefined"
When I do console.log(OvenPlayer), I get 'undefined' also.

However, in the debugger I have access to OvenPlayer which is not undefined but this:
Object {playerList: Array(0), create:, getPlayerList:, ...}

Is the issue with webpack?

[SangwonOh]

@walsong Hi. Because OvenPlayer is not webpack modularized. Instead of module, OvenPlayer is property of window object. So you can access from debugger. and you can access it simply window.OvenPlayer.

[walsong]

@SangwonOh thank you,
I get the following error now:

Uncaught SyntaxError: Unexpected token '<'   ovenplayer.provider.DashProvider~ovenplayer.provider.HlsProvider~ovenplayer.provider.Html5~ovenplaye~2ec193ac-0.9.0.js:1
Error found is:
 {code: 100, message: "Can not load due to unknown reasons.", reason: "Can not load due to unknown reasons.", error: Error: Network error

when I do this: also note that in place of "player", I had this this.$refs.player which did not work either.

My code is as follows:

<div id="player" ref="player"> </div>

this.player = window.OvenPlayer.create("player", {
                sources: [
                {
                    "type": "dash",
                    "file": "https://Manifest300.mpd"
                }
            ]
            });
        this.player.on("error", function(error){
            console.log("Error found is:", error)
        })

[SangwonOh]

Hi. How did you include scripts? And did you include dashjs?

[walsong]

My imports currently look like this:

<script>
import dashjs from 'dashjs'
import { OvenPlayer } from 'OvenPlayer'
.... mounted hooks, destroy etc.
</script>

Also tried this import:
import Dash from '@/libs/dash.all.min.js'
Dash is before ovenplayer as per the documentation

[SangwonOh]

How about try using <script src='...'></script> in head element.

It seems webpack is not working properly.

http://demo.ovenplayer.com/

[walsong]

Same error when I tried this:

<template>
  <div>
        <div id="player"> </div>
    </div>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dashjs/2.9.3/dash.all.min.js"></script>
<script src="@/libs/ovenplayer.js"></script>
<script>
//import Dash from '@/libs/dash.all.min.js'
//import dashjs from 'dashjs'
//import { OvenPlayer } from 'OvenPlayer'
//var OpenPlayer = require('OvenPlayer').default;
export default {
    mounted() {
        /*
        if (document.getElementById('dash')) return;
        var scriptDash = document.createElement("script");
        scriptDash.src = "https://cdnjs.cloudflare.com/ajax/libs/dashjs/2.9.3/dash.all.min.js";
        scriptDash.id = "dash";
        document.getElementsByTagName('head')[0].appendChild(scriptTagDash);

        var scriptTagOven = document.createElement("script");
        scriptTagOven.src = "@/libs/ovenplayer.js";
        scriptTagOven.id = "my-oven";
        document.getElementsByTagName('head')[0].appendChild(scriptTagOven);
        */
        //Vue.loadScript("@/libs/dash.all.min.js")
        //Vue.loadScript("@/libs/ovenplayer.js")
        this.player = window.OvenPlayer.create("player", {
                sources: [
                {
                    "type": "dash",
                    "file": "https://Manifest100.mpd"
                }
            ]
            });
        this.player.on("error", function(error){
            console.log("Error found is:", error)
        })
    }
}
</script>

[SangwonOh]

@walsong Hi. Are you making any progress? We could't reproduce the problem.

Our demo page http://demo.ovenplayer.com/ uses the Vuejs partially.

Viewing the source code of demo page may help you to solve the problem.

[walsong]

Actually, I did not have too much time to spend on solving the problem. I decided to use another player instead. Thanks though, perhaps in a couple of weeks I will have a look again.

[SangwonOh]

Good luck @walsong . We hope you visit here soon. Thanks.

[timothybean]

@walsong Can you let me know what other player you used?

Thanks