search

videojs / video.js

Video.js - open source HTML5 video player
https://videojs.com
Other
38.09k stars 7.45k forks source link

VueJS with video.js #7889

Closed takeshicamilo closed 2 years ago

takeshicamilo commented 2 years ago

Description

Im try to create a tv app that consume stream video via hls and I decided to use video.js but I got a problem when a mix VueJS with videojs everything works well but the video is not load I only can hear audio and see controls but only load black screen

image

`head>

laaaaa 
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link href="https://vjs.zencdn.net/7.20.2/video-js.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
head>
<body>
    <div id="app">
            <video ref="videoPlayer" class="video-js"></video>

            <div class="center" v-if="loginPage">
                <img src="https://www.adobe.com/es/express/feature/image/media_16ad2258cac6171d66942b13b8cd4839f0b6be6f3.png?width=750&format=png&optimize=medium" alt="">
                <div class="contentCode">
                    <div class="code">
                        <div style="margin-bottom: 2px;">{{ device_code }}</div>
                        <button style="margin-bottom: 1px;" class="button" v-on:click="login" v-if="button">Validar</button>

                        <div v-for="error in errors" class="error">{{ error }}</div>

                        <div class="loader" v-if="loading"></div>
                    </div>

                </div>
            </div>

            <div class="box" v-if="!loginPage && !video">
                    <div class="box-header">
                        <p style="font-size: 30px;">
                            Lista de Canales
                        </p>
                    </div>
                    <ul class="list">
                        <li :class="[index == selector ? 'itemSelected' : 'item']" v-for="(tvChannels, index) in channels" :key="index" :id="'lista' + index">
                            <div style="display: flex; align-items: center;" >
                                <img :src="tvChannels.logo" alt="" style="width: 40px; height: 40px;">
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                {{tvChannels.name}}
                            </div>
                        </li>
                    </ul>
            </div>

    </div>`

Reduced test case

No response

Steps to reproduce

1.install vuejs 2.install videojs

  1. init videojs

Errors

No response

What version of Video.js are you using?

lastest

Video.js plugins used.

No response

What browser(s) including version(s) does this occur with?

tv tizen simulator and chrome

What OS(es) and version(s) does this occur with?

windodws 11

welcome[bot] commented 2 years ago

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. To help make it easier for us to investigate your issue, please follow the contributing guidelines.