根据您是否在中国,在优酷和YouTube之间切换

Dan*_*ohn 15 javascript youtube video great-firewall-of-china youku

我正在主持一个会议网站,如果你在中国,我想嵌入一个优酷视频,否则就是YouTube视频.会议网站通过长城防火墙内的CDN提供服务.我被给了下面的代码来切换优酷的内部和外部版本.

不幸的是,在防火墙内部似乎无法访问ipinfo.io,因此代码会在10秒后超时.

我已经考虑过重写页面以默认使用优酷视频,编写一个试图访问YouTube的小型非阻止JavaScript功能.如果可以,请用YouTube替换优酷.如果不能,则无害地退出.这样,YouTube的可达性成为关键考验,而不是你是否在中国.

或者,我曾考虑在我的网站上托管视频,以便通过防火墙内的CDN进行复制.但是,这意味着即使您的连接速度很慢,也始终以全分辨率下载视频.

关于如何在优酷和Youtube之间切换的更好的建议,或者更普遍的是在中国国内外都可以播放视频?

jQuery.get("https://ipinfo.io", function(response) {
    var country = response.country;

    if(country == 'CN') {
        youku.attr('src',chinaVideo)
    } else {
        youku.attr('src',generalVideo)
    }
}, "jsonp");
Run Code Online (Sandbox Code Playgroud)

Dan*_*ohn 6

这是我们要使用的JavaScript:

$(document).ready(function (){
    var country = '',
    youku = $('#youku');

    $.ajax({
        url: "https://ipinfo.io",
        dataType: "jsonp",
        success: function(response){
            var country = response.country;

            if(country != 'CN') {
                youku.attr('src','https://www.youtube.com/embed/K3cEE5h7c1s')
            }
         },
         error: function(){
            console.log('sorry...')
         },
         timeout: 5000
    });     
});
Run Code Online (Sandbox Code Playgroud)

如果国家不是中国,我们在HTML中包含优酷链接并切换到YouTube.如果连接到ipinfo.io超时,这仍然有效,有时在中国发生.

编辑:修改为添加5秒超时.

  • 这是我们计划的答案.我仍然愿意听到更好的一个. (3认同)

Mun*_*nna 5

最好专门检查 YouTube 是否在用户的网络中被阻止,而不是根据 IP 过滤掉国家/地区,因为 IP 从来都不是 100% 可靠的。这样它甚至可以在任何学校/办公室环境中工作,在这些环境中,YouTube 可能因任何原因被网络管理员阻止。

是我在这方面能找到的最佳答案,它试图favicon通过 JavaScript加载YouTube 的 。如果它成功下载了那个小图像,就可以访问 YouTube。该图像只有 0.2 KB 的下载量,并且很可能已经被任何访问过 YouTube 的用户缓存了。

这意味着对于具有 YouTube 访问权限的用户来说,结果几乎是即时的,而对于防火墙被阻止的用户来说,只需几秒钟。代码很简单:

jQuery(function(){
    var youku = jQuery('#youku');
    var image = new Image();
    image.onload = function(){
        youku.attr('src','https://www.youtube.com/embed/K3cEE5h7c1s')
    };
    image.onerror = function(){
        youku.attr('src','https://www.youku.com/embed/K3cEE5h7c1s')
    };
    image.src = "https://youtube.com/favicon.ico";
});
Run Code Online (Sandbox Code Playgroud)

这是一个比上述更好的解决方案,因为它不等待document.readyjQuery 事件,图像立即开始加载。

(function(){
    var image = new Image();
    image.onload = function(){
        jQuery(function(){
            jQuery('#youku').attr('src','https://www.youtube.com/embed/K3cEE5h7c1s')
        });
    };
    image.onerror = function(){
        jQuery(function(){
            jQuery('#youku').attr('src','https://www.youku.com/embed/K3cEE5h7c1s')
        });
    };
    image.src = "https://youtube.com/favicon.ico";
})();
Run Code Online (Sandbox Code Playgroud)

根据评论更新:

如果图像之前缓存在用户的计算机上的可能性,将当前时间戳参数添加到图像 URL 将确保图像被加载,尽管之前已缓存。

    image.src = "https://youtube.com/favicon.ico?_=" + Date.now();
Run Code Online (Sandbox Code Playgroud)