视频视口显示异常，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);

[github-actions[bot]]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 30 days.

[github-actions[bot]]

This issue has been automatically closed after a period of inactivity. If it is still present in the latest release, please create a new issue with up-to-date information. Thank you!