6

crossoriginSafariがHTML5<video>タグの属性をサポートしているかどうか誰かが知っていますか？必要なすべてのCORSヘッダーで応答するサーバーからビデオを提供し、以下のマークアップを使用してビデオをページに埋め込みます。ページは別のドメインから提供されます。 

<video controls crossorigin="anonymous" src="http://example.com/movie.mp4">
toDataURL次に、ビデオをキャンバスに描画し、 API を使用してキャンバスから画像を取得します。crossoriginこれはChromeとFirefoxで機能しますが、Safariはビデオに属性がないかのようにセキュリティエラーをスローします。

何か案は？

4

4 に答える 4

1

Safariはcrossorgin属性をサポートしていないようですが、公式なものは見つかりません。このツイートhttps://twitter.com/sonnypiers/status/187513545397776384には画像の回避策がありますが、ビデオには役立たないと思います。

于 2012-12-24T07:58:51.850 に答える
0

私たちのテストから、safariはクロスドメインをサポートしていませんでした。オーディオリクエストでCORを使用するためにcrossorigin属性を追加しています（それがどのように行われるかを報告します）。

クロスドメインがhttpでは正常に機能しているように見えたが、httpsでは機能していないように見えたのはおかしい。オーディオ/ビデオタグ（メディアタグと呼ばれる）のw3仕様を読むと、クロスドメイン制限の対象であると言われています。

オーディオタグでのCORSのサポート： https ：//developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes

さて、他の興味深い事実は、safariがファイル拡張子に基づいてmymeタイプを選択していたことです（何？）。拡張子が*.mp4のファイルは正常に再生されました。同じファイルの名前が別の名前に変更されませんでした。

于 2013-07-22T18:01:15.990 に答える
0

ビデオの回避策は次のとおりです。

                         $.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);
                            }

newURLの「video/mp4」をビデオの種類に置き換えてください。

于 2014-07-25T19:08:46.720 に答える
-3

最初に、CORSが必要ですか？直接リンクするとサファリで動作するようです。htmlinstant.comを使って試してみました

<video src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" controls />

CORSが必要な場合は、次のページに、2011年5月にサポートが追加されたと記載されています。ただし、テストは行っていません。 https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes

キャンバス上のビデオの例については、次のリンクのセクション5.4を参照して ください。http ：//www.html5rocks.com/en/tutorials/video/basics/ テストしたところ、サファリで実行されました。

于 2012-08-12T06:49:23.790 に答える