Closed walsong closed 4 years ago
@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.
@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)
})
Hi. How did you include scripts? And did you include dashjs?
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
How about try using <script src='...'></script>
in head
element.
It seems webpack is not working properly.
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>
@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.
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.
Good luck @walsong . We hope you visit here soon. Thanks.
@walsong Can you let me know what other player you used?
Thanks
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 doconsole.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?