how use autoSetup?? #8678

startjava · 2024-04-05T12:27:45Z

startjava
Apr 5, 2024

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：

why autoSetup=true and autoSetup=false result same？

how use autoSetup？？

thank you !

Reduced test case

?

Steps to reproduce

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?

_

2024-04-05T12:27:48Z

welcome[bot]
bot Apr 5, 2024

👋 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.

0 replies

mister-ben · 2024-04-05T14:19:14Z

mister-ben
Apr 5, 2024
Maintainer

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`.

0 replies

startjava · 2024-04-05T14:21:43Z

startjava
Apr 5, 2024
Author

@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

0 replies

startjava · 2024-04-05T14:35:04Z

startjava
Apr 5, 2024
Author

<!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?

0 replies

startjava · 2024-04-05T15:27:38Z

startjava
Apr 5, 2024
Author

@axten

0 replies

startjava · 2024-04-06T02:05:35Z

startjava
Apr 6, 2024
Author

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

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

@mister-ben

1 reply

mister-ben Apr 11, 2024
Maintainer

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. autoSetup: false means don't do that, and all players must be initialed with videojs('myplayer').
When initialising a player with videojs('myplayer', options) the options in data-setup attribute are merged onto the options object.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

how use autoSetup?? #8678

{{title}}

Replies: 6 comments 1 reply

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

how use autoSetup?? #8678

startjava Apr 5, 2024

Description

Reduced test case

Steps to reproduce

Errors

What version of Video.js are you using?

Video.js plugins used.

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

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

Replies: 6 comments · 1 reply

welcome[bot] bot Apr 5, 2024

mister-ben Apr 5, 2024 Maintainer

startjava Apr 5, 2024 Author

startjava Apr 5, 2024 Author

startjava Apr 5, 2024 Author

startjava Apr 6, 2024 Author

mister-ben Apr 11, 2024 Maintainer

startjava
Apr 5, 2024

Replies: 6 comments 1 reply

welcome[bot]
bot Apr 5, 2024

mister-ben
Apr 5, 2024
Maintainer

startjava
Apr 5, 2024
Author

startjava
Apr 5, 2024
Author

startjava
Apr 5, 2024
Author

startjava
Apr 6, 2024
Author

mister-ben Apr 11, 2024
Maintainer