先看效果

场景

• 有时候我们会在页面中手动写上video、img标签
• 也可能页面的内容是后端通过富文本传递给我们，我们使用v-html指令进行内容渲染而生成了video和图片

如果是手动写上的video那还好，直接使用video组件，组件会自动帮我们渲染未播放时的封面图，我们也可以设置video组件的宽高

同理，如果是手动写上的img标签那还好，我们可以设置img标签的宽高

但是如果是富文本生成的video，那就有可能出现无法显示未播放时的封面图，以及生成的video的宽度比我们页面上内容盒子的宽度还大的情况（后台插入video时没有限制或故意将video的宽度拉的很大）

同理，如果是富文本生成的图片也一样，可能后台插入图片时没有限制宽高，导致渲染到页面后图片的宽度超过了我们内容盒子的宽度

如下两张图：

该怎么解决 ？

问题一：视频未播放时未展示封面图

• 得到视频的第一帧后使用canvas画上封面图
• 直接将视频调至0.5s

不推荐使用第一种方法：因为代码较多而且也复杂 反之，第二种就简单多了：只需要获取到页面上所有的video组件，然后将每一个video组件的进度条改成0.5s即可

话不多说，上代码

HTML代码

<div class="richtext" v-html="articleData.content" ref="richTextContainer"></div>

JS代码

// 先调用获取富文本内容的接口
let res = await $get_data()
this.$nextTick(() => {
				const videoElements = this.$refs.richTextContainer.querySelectorAll('video');
				videoElements.forEach((videoElement) => {
					// 设置视频播放时间为0.5秒
                                        videoElement.currentTime = 0.5;
				});
		});

问题二：视频的宽高（自适应）

HTML代码

<div class="richtext" v-html="articleData.content" ref="richTextContainer"></div>

JS代码

// 先调用获取富文本内容的接口
let res = await $get_data()
this.$nextTick(() => {
					const videoElements = this.$refs.richTextContainer.querySelectorAll('video');
                                        // 获取richTextContainer容器的宽度
						let boxWidth = this.$refs.richTextContainer.offsetWidth;
					videoElements.forEach((videoElement) => {
						// 获取视频的宽高
						let videoWidth = Number(videoElement.offsetWidth);
						let videoHeight = Number(videoElement.offsetHeight);

						// 判断视频宽度是否超过容器的宽度 如果超过则将视频的宽高等比例缩放
						if (videoWidth > boxWidth) {
							let scale = videoWidth / boxWidth;
							videoWidth = boxWidth;
							videoHeight = videoHeight / scale;
							videoElement.style.width = videoWidth + 'px';
							videoElement.style.height = videoHeight + 'px';
						}
					});
			});

问题三：图片的宽高（自适应）

HTML代码

<div class="richtext" v-html="articleData.content" ref="richTextContainer" v-loading="loading"></div>

JS代码

loading : false , // 加载中

async getData(){
this.loading = true
// 先调用获取富文本内容的接口
let res = await $get_data()
this.$nextTick(() => {
					// 获取所有的图片元素
					const imgElements = this.$refs.richTextContainer.querySelectorAll('img');

					// 获取richTextContainer容器的宽度
					let boxWidth = this.$refs.richTextContainer.offsetWidth;

					// 处理图片
					imgElements.forEach((imgElement) => {
						// 获取图片的宽高
						let imgWidth = Number(imgElement.offsetWidth);
						let imgHeight = Number(imgElement.offsetHeight);

						// 判断图片宽度是否超过容器的宽度 如果超过则将图片的宽高等比例缩放
						if (imgWidth > boxWidth) {
							let scale = imgWidth / boxWidth;
							imgWidth = boxWidth;
							imgHeight = imgHeight / scale;
							imgElement.style.width = imgWidth + 'px';
							imgElement.style.height = imgHeight + 'px';
						}
					});
				});
this.loading = false;
}

解决两种问题的集合代码

HTML代码

<div class="richtext" v-html="articleData.content" ref="richTextContainer" v-loading="loading"></div>

JS代码

loading : false , // 加载中

async getData(){
this.loading = true
// 先调用获取富文本内容的接口
let res = await $get_data()
this.$nextTick(() => {
					// 获取所有的视频元素
					const videoElements = this.$refs.richTextContainer.querySelectorAll('video');
					// 获取所有的图片元素
					const imgElements = this.$refs.richTextContainer.querySelectorAll('img');

					// 获取richTextContainer容器的宽度
					let boxWidth = this.$refs.richTextContainer.offsetWidth;

					// 处理视频
					videoElements.forEach((videoElement) => {
						// 设置视频播放时间为0.5秒
						videoElement.currentTime = 0.5;

						// 获取视频的宽高
						let videoWidth = Number(videoElement.offsetWidth);
						let videoHeight = Number(videoElement.offsetHeight);

						// 判断视频宽度是否超过容器的宽度 如果超过则将视频的宽高等比例缩放
						if (videoWidth > boxWidth) {
							let scale = videoWidth / boxWidth;
							videoWidth = boxWidth;
							videoHeight = videoHeight / scale;
							videoElement.style.width = videoWidth + 'px';
							videoElement.style.height = videoHeight + 'px';
						}
					});

					// 处理图片
					imgElements.forEach((imgElement) => {
						// 获取图片的宽高
						let imgWidth = Number(imgElement.offsetWidth);
						let imgHeight = Number(imgElement.offsetHeight);

						// 判断图片宽度是否超过容器的宽度 如果超过则将图片的宽高等比例缩放
						if (imgWidth > boxWidth) {
							let scale = imgWidth / boxWidth;
							imgWidth = boxWidth;
							imgHeight = imgHeight / scale;
							imgElement.style.width = imgWidth + 'px';
							imgElement.style.height = imgHeight + 'px';
						}
					});
				});
this.loading = false;
}