vue使用v-html渲染video不能播放？_v-html video

有个重构项目的需求，其中有个功能就是渲染后端返回的html字符串。

一般的标签展示出来没问题，但是在有video标签时出现了问题，此时控制台有一些403的报错

如果直接在网上找的视频，是可以直接使用的，但是调了接口就会出现403的报错

video标签加载出来了，但是不能进行控制播放

代码：

<div class="html_container text_start" ref="content" v-html='vHtml'></div>

<script>
export default {
	data(){
		return {
			vHtml:'<div>......</div>', // 假设vHtml为包含video的html字符串
		}
	}
}
</script>
1
2
3
4
5
6
7
8
9
10
11

猜测错误原因：

猜测1. v-html在渲染video时有问题

对应操作： 不使用v-html，改为element.append或者element.insertAdjacentHTML
代码：

<div class="html_container text_start" ref="content" id="content"></div>


<script>
export default {
	mounted(){
		let vHtml = '<div>......</div>'; // 假设vHtml为包含video的html字符串
		let element = document.getElementById('content');
		element.insertAdjacentHTML("beforeend", vHtml);
	},
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12

页面查看效果和之前用v-html的效果是一样的

猜测2. 为什么会有403

原因：Referer携带了我们自身网站的域名，第三方网站认为这是非法访问，所以报错403 forbidden，因此我们需要在自己项目中跳转第三方外链的时候，去掉Referer信息

这是本地使用v-html渲染video获取视频的请求:

直接在网页打开该视频链接获取事情的请求:

对应操作：
在html文件里添加一个meta标签

<meta name="referrer" content="never">
1

如此即可正常播放！！！