视频视口显示异常，video无法随id="mse"的宽高自动变化

[getongoing]

您使用的西瓜播放器版本是多少？ What version of xgplayer are you using? 3.0.17

您使用的操作系统和浏览器分别是？ What OS and browser are you using? win10+edge,F12模拟移动端

您期望的播放器正常行为是？ What did you expect to happen? 同官网examples，在video上面应该有一个h100%、w100%才对，但是实际video上面没有任何css属性（已经确定应用并生效index.min.css）。 导致： video的尺寸永远都是视频的真实尺寸，无法适配父元素宽度

尝试把“import 'xgplayer/dist/index.min.css';”改为 正常··· 尝试把“import 'xgplayer/dist/index.min.css';”改为 结果同js import 不正常···

[gemxx]

@getongoing js import的方式也不生效吗？ import 'xgplayer/dist/index.min.css'; 能否提供一个在线可复现的demo？目前不太好猜测问题所在

[getongoing]

@getongoing js import的方式也不生效吗？ 能否提供一个在线可复现的demo？目前不太好猜测问题所在import 'xgplayer/dist/index.min.css';

demo就是官方demo，没做任何变动，环境为uniapp H5，开启link就对了··· 尝试设置fitVideoSize或fluid都不行

UNIAPP-H5 代码 codes

<template>
    <!-- <link rel="stylesheet" href="https://unpkg.byted-static.com/xgplayer/3.0.10/dist/index.min.css"> -->
    <view class="player">
        <view id="mse"></view>
    </view>
</template>

<script setup>
    import Player from 'xgplayer';
    import 'xgplayer/dist/index.min.css';
    import {
        onMounted,
        onUnmounted,
        ref
    } from "vue";

    const xgplayer = ref(null)

    onMounted(() => {
        xgplayer.value = new Player({
            id: 'mse',
            url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4',
            width: '100%'
        })
    })

    onUnmounted(() => {
        xgplayer.value.destroy()
        xgplayer.value = null
    })
</script>

[getongoing]

demo运行结果： 开启link后：

[gemxx]

@getongoing UNiApp应该不支持JS中引入CSS，以官方的方式导入为准， UniApp应该是有自己的打包规则。xgplayer官网中的引入方式，支持rollup以及webpack

[getongoing]

@gemxx 我也是比较好奇，尝试了一下： 1.js import，除了video标签，其余标签/class的css是起作用的； 2.style import,，除了video标签，其余标签/class的css是起作用的； 3.内链link引入，一切正常； 4.style手动设置video css属性，不起作用； 5.js videoAttributes 设置video正常 #1235

[P2K0]

@gemxx我也是比较好奇，尝试了一下： 1.js导入，除了video标签，其余标签/class的css是工作的； 2.style导入，除了video标签，其余标签/class的css是工作的； 3.内链链接引入，一切正常； 4.style手动设置video css属性，不起作用； 5.js videoAttributes设置video正常#1235

我设置了 不生效

[liJie-wk]

uni的bug，改成这样就行了 // 创建一个新的style元素 var style = document.createElement('style');

            // 定义你的CSS规则
            var cssRules = `
                .xgplayer-rotate-parent .xgplayer-mobile video {
                    z-index: -1
                }
                .xgplayer.xgplayer-rotate-fullscreen.xgplayer-mobile video {
                    z-index: -1
                }
                .xgplayer video {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    outline: none
                }

                .xgplayer[data-xgfill=contain] video {
                    -o-object-fit: contain;
                    object-fit: contain
                }

                .xgplayer[data-xgfill=cover] video {
                    -o-object-fit: cover;
                    object-fit: cover
                }

                .xgplayer[data-xgfill=fill] video {
                    -o-object-fit: fill;
                    object-fit: fill
                }
            `;

            // 将CSS规则附加到style元素中
            if (style.styleSheet) { // IE
                style.styleSheet.cssText = cssRules;
            } else { // 其他浏览器
                style.appendChild(document.createTextNode(cssRules));
            }

            // 将style元素添加到head中
            document.head.appendChild(style);