为什么只有数据链接添加预告片

背景

在实际开发中，我们经常需要在网页、移动端应用等场景中添加预告片，以增加用户的体验和吸引用户的注意力。但是，开发人员常常会发现，在添加预告片时，只有数据链接能够生效，而其他类型的链接（如视频链接、外链等）却无法正常播放。

原因

这是因为现代浏览器的安全策略限制了来自外部源（如外部视频资源）的跨域请求。这意味着，如果你在你的网页中添加了一个来自其他域的视频链接，浏览器将会拒绝这个请求，并且不允许在你的页面中加载该资源。

为了解决这个问题，很多开发人员选择使用数据链接来展示预告片，因为数据链接可以直接将资源编码为字符串，并将其嵌入到HTML文件中，从而避免了跨域请求的问题。

数据链接

数据链接（data URI scheme）是一种URL方案，它允许用户在文档中包含数据，而不必在单独的文件中引用它们。具体来说，数据链接是一种特殊的URL格式，它包含一个scheme（data:），后跟可选的MIME类型、编码方式和数据本身。例如，下面的代码片段中展示了一个MPEG格式的视频资源的数据链接：

<video src="
data:video/mpeg;charset=utf-8;base64,
AAAAHGZ0eXBpc29tAAACAGlzb21pc
..... 
"/>

该链接包含base64加密的视频数据，MIME类型为video/mpeg。

数据链接的优缺点

虽然使用数据链接可以避免跨域请求的问题，但是它也有一些不足之处：

1. 体积较大

由于将资源以base64的方式编码在HTML文件中，数据链接的体积通常比实际资源大3倍以上，这会增加页面的加载时间和带宽消耗。

2. 难以维护

由于资源被编码成字符串并嵌入到HTML文件中，所以当我们需要对资源进行更新或维护时，需要重新编码并更新HTML文件。这会增加开发的复杂性和管理难度。

3. 兼容性问题

不是所有浏览器都支持数据链接，尤其是在移动设备上。因此，使用数据链接可能会导致一些兼容性问题。

结论

虽然数据链接解决了跨域请求的问题，但由于其体积较大、难以维护和兼容性问题等缺点，我们建议开发人员在实际应用中，根据实际情况选择合适的预告片展示方式。如果可以，最好将预告片文件部署在同一个域下，或者使用现成的视频库来展示预告片，这样可以避免跨域请求的问题，同时也可以减少对HTML文件的占用体积和开发维护的复杂性。