浏览器兼容性 - <source src="{$log['content']}" type="video/mp4" > 标签里type被直接渲染出来了，咋搞？

Question

这是什么原因导致的，尝试了好几个浏览器都是这样，求大佬解答

尝试过增加结束标签

Answer 1

临时解决就是模板变量放到js变量上，用js操作dom 赋值。

let videoSrc = `{$log['content']}`;if(videoSrc){    let videoElem = document.getElementById('video');    if(videoElem){        let sourceElem = videoElem.getElementsByTagName('source');         if(sourceElem) {            sourceElem.setAttribute("src", videoSrc);        }    }}

注：ES6字符串模板“\`\`”不兼容IE。
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Refer...

Answer 2

因为你 log 的内容里有看起来像 html 标签的东西，或至少像 html 标签结束符，破坏了原来的语义。
对 log 的内容进行防 XSS 过滤就行了（怎么防上网搜一下）。

Answer 3

如果<source>标签的type属性被直接渲染出来，而不是被浏览器识别和应用，这通常意味着浏览器没有正确地解析该标签或者该标签所处的上下文不正确。<source>标签通常应该作为<video>或<audio>元素的子元素使用，用来指定媒体资源。

首先，请确保你的<source>标签是嵌套在<video>标签内部的，并且<video>标签有正确的结束标签</video>。例如：

<video width="320" height="240" controls>  <source src="{$log['content']}" type="video/mp4">  您的浏览器不支持Video标签。</video>

如果<source>标签是<video>标签的直接子元素，并且<video>标签也有正确的结束标签，但问题仍然存在，那么可能的原因包括：

1. 变量替换问题：如果{$log['content']}是某种模板引擎的变量替换语法，请确保它已经被正确地替换成了有效的视频资源URL。
2. 服务器问题：确保服务器支持所请求的MIME类型（在这个例子中是video/mp4），并且服务器响应头中的Content-Type也是正确的。
3. 浏览器支持问题：虽然大部分现代浏览器都支持<video>和<source>标签，但老旧的浏览器可能不支持。请确保你正在使用的浏览器是支持这些特性的最新版本。
4. 语法错误：检查整个HTML页面的其他部分，确保没有语法错误或遗漏的标签，这些错误可能会影响整个页面的解析。
5. 编码问题：确保HTML文件的编码是正确的，并且<source>标签的src属性值没有被错误地编码或转义。
6. 缓存问题：尝试清除浏览器缓存或使用无痕/隐私模式重新加载页面，以排除缓存导致的问题。
7. 浏览器开发者工具：使用浏览器的开发者工具（如Chrome的DevTools）来检查网络请求和元素，查看是否有错误信息或警告，以及确保资源请求是成功的。

如果以上方法都不能解决问题，你可能需要提供更详细的代码和上下文信息，以便进一步分析问题所在。