Question

我的网站上有视频嵌入代码，但有时目标网址（视频主机）已关闭！在这些时刻，我的网站在很长一段时间内等待连接并且最终没有加载视频..这是一次糟糕的体验！

我可以从我的主机加载视频但由于某种原因我想嵌入该视频。但我想我可以用jquery检查目标网址，如果成功则添加嵌入代码并以其他方式在我的主机中附加视频。

这是我的嵌入代码（代码1）：

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

这是我自己的主题视频（代码2）：

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

这两个代码都是html（在wp上）

现在我想要这样的事情：

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

当网址检查超过2秒时，只需加载代码2。

任何人都可以提供帮助吗？！

Answer 1

您可以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>

编辑：JQuery不支持跨域ajax。所以你不能Ajax到另一个域。如果您需要crossDomain ajax权限，可以使用以下PHP代码（如果您的服务器端代码是PHP）：

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');

Answer 2

＆＃13;

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

＆＃13;

<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>

＆＃13;

编辑：正如Man Manam所注意到的那样，由于跨源问题，这可能会失败。如果愿意，可以通过调整服务器端CORS配置来解决此问题。

或者，仅限JavaScript的解决方案是使用此mod：https://github.com/padolsey-archive/jquery.fn/blob/master/cross-domain-ajax/jquery.xdomainajax.js。包含此脚本将有效解决跨源问题。

如何在jquery中根据我的url状态加载div

2 个答案: