jqueryのURLステータスに応じてdivをロードする方法

Question

私のサイトにはビデオ埋め込みコードがありますが、ターゲットURL（ビデオホスト）がダウンしていることがあります。これらの瞬間に私のサイトは長い時間で接続を待っていて、最後にビデオをロードしません。これは悪い経験です！

ホストからビデオを読み込むことはできますが、なんらかの理由でそのビデオを埋め込みたいとします。成功した場合はjQueryでターゲットURLを確認してから埋め込みコードを追加し、それ以外の場合はホストにビデオを追加できます。

<div id="14750915864459730"> 
<script type="text/JavaScript" src="https://www.example.com/embed/dl4ue?data[rnddiv]=14750915864459730&data[responsive]=yes"></script> 
</div> 

これは私ownhostedビデオである（コード2）：

[video width="1920" height="1080" mp4="http://www.mywebsite.com/wp-content/uploads/2016/09/americ.mp4"][/video] 

コードの両方（WPに）HTMLである

この

は私の埋め込みコード（コード1）であります

今私はこのようなものが欲しい：

if https://www.example/... is reachable 
then: load code 1 
else: load code 2 

また、URLチェックに2秒以上かかる場合は、コード2をロードするだけです。

誰でも手伝ってもらえますか？マンManamが気づいたように、これはproblablyクロスオリジンの問題が原因で動作しません。

EDIT

Answer 1

$.ajax({ 
 
    // This tries to access the external video 
 
    url: 'https://www.example.com/embed/dl4ue?data[rnddiv]=14750915864459730&data[responsive]=yes', 
 
    error: function(result) { 
 
    // External video is not available, use this one instead: 
 
    $('#14750915864459730').replaceWith('<video width="1920" height="1080" mp4="http://www.mywebsite.com/wp-content/uploads/2016/09/americ.mp4">'); 
 
    }, 
 
    timeout: 2000 // Stops trying after 2 seconds 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="14750915864459730"> 
 
    <script type="text/JavaScript" src="https://www.example.com/embed/dl4ue?data[rnddiv]=14750915864459730&data[responsive]=yes"></script> 
 
</div>

。必要に応じて、サーバー側のCORS構成を調整することでこれを解決できます。

また、JavaScriptのみのソリューションは、このモデムを使用することです：https://github.com/padolsey-archive/jquery.fn/blob/master/cross-domain-ajax/jquery.xdomainajax.js。このスクリプトを含めると、クロスオリジンの問題を効果的に解決できます。

Answer 2

サーバーにpingを実行し、その結果を使用してサーバーが使用可能かどうかを確認できます。 これを試してみてください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script> 
function ping(){ 
    $.ajax({ 
    type: 'GET', 
    dataType: "json", 
    url: "https://www.example.com/embed/dl4ue?data[rnddiv]=14750915864459730&data[responsive]=yes", 
    success: function (responseData, textStatus, jqXHR) { 
     //server is NOT down. So embed your video 
     // Code1 here 
    }, 
    error: function (responseData, textStatus, errorThrown) { 
     alert('POST failed.'); // server is down 
     // Code2 here 
    } 
    }); 
} 
</script> 

EDIT：jQueryのは、クロスドメインAJAXをサポートしていません。だからあなたは別のドメインにAjaxすることはできません。 jQueryのクロスオリジン・リクエストを許可していないので、

header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS'); 
header('Access-Control-Max-Age: 1000'); 
header('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');