search

videojs / video.js

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

how use autoSetup?? #8668

Closed startjava closed 7 months ago

startjava commented 7 months ago

Description

html code：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="module" src="autoSetup.js"></script>
    </head>
    <body>
        <div id="mydiv">
            <video id="myvideo1" class="video-js" data-setup='{"width": "300px", "height": "300px", "controls":true}'>
            </video>
            &nbsp;&nbsp;
            <video id="myvideo2" class="video-js" data-setup='{"width": "300px", "height": "300px", "controls":true}'>
            </video>
            &nbsp;&nbsp;
            <video id="myvideo3" class="video-js" data-setup='{"width": "300px", "height": "300px", "controls":true}'>
            </video>
        </div>
    </body>
</html>

js code：

import videojs from "video.js";
import "video.js/dist/video-js.css"

import {createApp, onMounted} from 'vue';

createApp({
    setup() {
        let player1;
        let player2;
        let player3;

        const videoOptions2 = {
            width: "200px",
            height: "200px",
            autoSetup: true,
            sources: [
                {
                    src: '../demo-720p.mp4',
                    type: 'video/mp4'
                }
            ]
        };

        const videoOptions3 = {
            width: "200px",
            height: "200px",
            autoSetup: false,
            sources: [
                {
                    src: '../demo-720p.mp4',
                    type: 'video/mp4'
                }
            ]
        };

        onMounted(() => {
            player1 = videojs("myvideo1");
            player2 = videojs("myvideo2", videoOptions2);
            player3 = videojs("myvideo3", videoOptions3);
        })

        return {}
    }
}).mount("#mydiv");

run result： image

why autoSetup=true and autoSetup=false result same？

how use autoSetup？？

thank you !

Reduced test case

?

Steps to reproduce

1. 2. 3.

Errors

??

What version of Video.js are you using?

last new

Video.js plugins used.

_

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

chrome

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

_

welcome[bot] commented 7 months 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.

mister-ben commented 7 months ago

With auto setup, Video.js will init any player embeds when the script lands, or on the window's load event, that have a valid data-setup attribute. It is disabled if videojs.options.autoSetup is false.autoSetupis not a player option so setting it astrueorfalsethere has no effect. Generally it's best not to mix using both options indata-setupand options passed tovideojs(el, options). If the player has already been set up by auto setup,videojs(el, options)just returns the player and does not apply those options. If usingvideojs(el, options)put all the options there and don't usedata-setup`.

startjava commented 7 months ago

@mister-ben

thank you !

but But I'm still not going to use the autoSetup property, is there any demo code? I searched for the code in the github repository and did not find the corresponding demo code.

You can see the difference between True and false values from the run effect, thanks

startjava commented 7 months ago 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="module" src="autoSetup.js"></script>
    </head>
    <body>
        <div id="mydiv">
            <video id="myvideo1" class="video-js" data-setup='{"width": "300px", "height": "300px", "controls":true}'>
                <source src="../demo-720p.mp4" type="video/mp4">
            </video>
            &nbsp;&nbsp;
            <video id="myvideo2" class="video-js" data-setup='{"width": "300px", "height": "300px", "controls":true}'>
                <source src="../demo-720p.mp4" type="video/mp4">
            </video>
            &nbsp;&nbsp;
            <video id="myvideo3" class="video-js">
            </video>
        </div>
    </body>
</html>
import videojs from "video.js";
import "video.js/dist/video-js.css"
import {createApp, onMounted} from 'vue';

createApp({
    setup() {
        let player1;
        let player2;
        let player3;

        onMounted(() => {
            videojs.options.autoSetup = false;

            player1 = videojs("myvideo1");
            player2 = videojs("myvideo2");
            player3 = videojs("myvideo3");
        })

        return {}
    }
}).mount("#mydiv");

The above code should be 300px wide and 300px high for both players 1 and 2, but I've disabled autoSetup, so why isn't it working?

startjava commented 7 months ago

@axten

startjava commented 7 months ago

https://codepen.io/csalmeida/pen/ZEbxzeq

image

Is autoSetup option valid? What is the function of it?

@mister-ben