使用XMLHttpRequest（原生AJAX）判断并自动选择视频平台

网站

介绍

这是使用XMLHttpRequest（原生AJAX）对YouTuBe进行连通性测试，以用于平台选择的判断，相比通过IP判断要简单的多。

逻辑：

访问YouTuBe

超时
选择其它平台

连通
选择YouTuBe

演示

【初音ミク MMD】スターナイトスノウ 星夜之雪 (YYB式初音ミク) | 零神 • ZEROKAMI STUDIO

外部JS

1
2
3
4
5
6
7
8
9
10
11
12
13
async function checkGoogle(t=1000) { //设置超时时间
    const c = new AbortController();
    setTimeout(() => c.abort(), t);
    try {
        await fetch('https://youtube.com', {
            mode: 'no-cors',
            signal: c.signal
        });
        return 1;
    } catch {
        return 0;
    }
}

以上内容我是以外部JS文件，用于判断环境。

备注：超过1秒后即为超时，超时时间可以根据自己的需要进行修改。超时则返回0，连通则返回1。

各位可以根据自己的需要选择内联脚本还是外部导入。

页面应用

这里videoContainer是视频容器，用于存放视频平台的外链播放器代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script src="/app.js"></script>
<script src="https://zerokami.cn/js/lib.js"></script>//由于我网站使用的是Jquery，下面也是对应使用Jquery的方式，这里我直接从我的网站引入它作为示范
<div id="videoContainer">
  <p>请稍等，正在根据您的网络加载播放器……</p>
</div>

<script>
  function loadBilibiliVideo() {
      const videoHtml = ``;//存放哔哩哔哩视频平台的外链播放器代码
      return videoHtml;}
  function loadYouTubeVideo() {
      const videoHtml = ``;//存放YouTuBe视频平台的外链播放器代码
      return videoHtml;}
  checkGoogle().then(status => {
  if (status === 0) {
        $("#videoContainer").html(loadBilibiliVideo());
  } else {
        $("#videoContainer").html(loadYouTubeVideo());
    }
  });
</script>

我这里使用loadBilibiliVideo和loadYouTubeVideo存放两个视频平台的外链播放器代码。

在通过checkGoogle进行判断后会选择合适的视频平台（外链播放器代码）存放在videoContainer视频容器中。

需要注意，由于我的网站使用的是Jquery，所以innerHtml是没法生效的，所以使用.html()代替此功能，各位需要根据自己的实际应用所更改使用方法，直接照抄可能无法使用。