Video.js integration with Vue3 - html

Question

I've a simple html page which displays an RTMP stream from nginx server and it works without any issue. Here is the working html code:
<div id="middlebox">
<h2>RTMP Stream</h2>
<video
id="uav1-video"
class="video-js"
controls
preload="auto"
width="640"
height="480"
data-setup="{}">
<source src="/hls/stream1.m3u8" type="application/vnd.apple.mpegurl" />
</video>
</div>
Now I want to integrate this functionality into Vue3 application. I added the following in <template> and <script> tag of a view component:
<template>
<div id="app" class="container">
<div>
<h2>RTMP Stream</h2>
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="320"
height="180"
data-setup="{}">
<source src="/hls/stream1.m3u8" type="application/vnd.apple.mpegurl" />
</video>
</div>
</div>
</template>
<script>
export default {
name : 'View',
data() {
return{
}
},
mounted() {
let videoScript = document.createElement('script')
videoScript.setAttribute('src', './js/video.js')
document.head.appendChild(videoScript)
},
}
</script>
With the above code only video player appears on the html page but I'm unable to play the stream. I don't see the big play button which I see in the html page.
When I check the html page in the browser, I see the following exception:
Uncaught SyntaxError: Unexpected token '<' js/video.js:1
I'm not sure how to resolve this issue. Can anyone please help. Thanks

Answer 1

Videojs has a pretty specific way of being setup. I haven’t been able to adapt it to fully customize in Vue3 yet. But, if you look at the videojs website and navigate to the Vue instructions follow them exactly as it says and setup a component then load that component into your page it will work.