Question

单独使用<video>标记时，会添加crossorigin属性，如下所示：

<video src="blah" crossorigin="anonymous"></video>

但是，在使用多个视频源时，我无法找到“crossorigin”的正确位置，例如：

<video>
<source src="/somesource.mp4">
<source src="/somesource.webm">
</video>

您是否将'crossorigin'属性放在<video>代码或个别<source>代码上？

如果是后者，这是否意味着每个来源都可以在一个视频标签内进行单独的交叉原则处理？

Answer 1

Safari不支持

crossOrigin属性，另一种方法是使用ajax检索图像/视频数据base64版本并更改网址。

而不是写作：

<video controls crossorigin="anonymous" src="http://example.com/movie.mp4">

你会用

                    $.ajax({
                        type: 'get',
                        url : videoUrlFromAnotherDomain,
                        crossDomain: 'true',
                        success: function(data) {
                            // get a base64 version of the video!
                            var base64 = window.btoa(data);
                            // get a new url!
                            var newURL = 'data:video/mp4' + ';base64,' + base64;
                            // set the src on the video source element to the new url
                            video.find("source").attr("src", newURL);
                        }

Answer 2

您是否在标记或单个标记上添加了“crossorigin”属性？

W3C规范指定视频标记（或更确切地说是HTMLMediaElement）上的crossorigin属性，但不指定src元素（或更确切地说，HTMLSourceElement）。

因此，假设每个人都遵循规范，这总是一个轻率的假设 - 请参阅Margus的答案，你应该将cross origin属性放在视频标签而不是单个源标签上。

将<video>与<source />一起使用，在哪里添加crossorigin属性？

2 个答案: