html5 中object标签的使用

Posted 2023-04-18

html5 中object标签的使用为什么我使用object标签和param标签配合时，param标签不起作用呢？
<object data=".mp4">
<param name="autostart" value=false>
</object>
还是会自动播放？
object一般只用于播放flash吗?

定义一个嵌入的对象。请使用此元素向您的 XHTML 页面添加多媒体。此元素运行您规定插入 HTML 文档中的对象的数据和参数，以及可用来显示和操作数据的代码。
object 元素可位于在 head 元素或 body 元素内部。<object> 与 </object> 之间的文本是替换文本，针对不支持此标签的浏览器。<param> 标签可定义用于对象的 run-time 设置。 参考技术A HTML5 有专门的播放视频的标签video 参考技术B 我见过的，一般是播放flash

如何将 SVG 嵌入到来自 Cross Origin url 的 html <object> 标签中（s3_url/image.svg）

【中文标题】如何将 SVG 嵌入到来自 Cross Origin url 的 html <object> 标签中（s3_url/image.svg）

【英文标题】：How to embed SVG in html <object> tag from Cross Origin url say (s3_url/image.svg)

【发布时间】：2018-12-24 01:24:58

【问题描述】：

我浏览了在 Internet、MDN、W3C 等上可以找到的所有可能资源，但我在任何地方都找不到有关 cors 的任何文档。

我正在尝试在 HTML 中嵌入 SVG。它在同源 URL 中工作正常

<object id="obj1" data="same_origin_url/image.svg"></object>

使用 cross_origin_url 时，无法嵌入 SVG。

<object id="obj2" data="cross_origin_url/image.svg"></object>

在第一种情况下，我可以使用以下代码访问 SVG 并在 SVG 上执行所需的操作（例如更改颜色）。

document.getElementById('obj1').contentDocument.getElementByTagName('svg')

在第二种情况下，它返回抛出一个错误，因为 obj2 的 contentDocument 返回 null。

document.getElementById('obj2').contentDocument.getElementByTagName('svg')

【参考方案1】：

在托管您的 svg 文件的网络服务器上，您必须设置响应 Access-Control-Allow-Origin 标头。例如对于 Apache 网络服务器，您必须启用 mod_headers 并在配置文件或 .htaccess 中为您的服务器配置它。

    <IfModule mod_headers.c>
        <FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css|js|gif|png|jpe?g|svg|svgz|ico|webp)$">
            Header set Access-Control-Allow-Origin "*"
        </FilesMatch>
    </IfModule>