web-dev-qa-db-fra.com

Basculer entre Youku et YouTube en fonction de votre présence en Chine

J'héberge un site Web de conférence où je souhaite intégrer une vidéo Youku si vous êtes en Chine et une vidéo YouTube autrement. Le site Web de la conférence est diffusé via un CDN à l’intérieur du grand pare-feu. On m'a donné le code ci-dessous pour basculer entre les versions internes et externes de Youku.

Malheureusement, ipinfo.io ne semble pas être accessible à l'intérieur du Grand Pare-feu, le code expire au bout de 10 secondes.

J'ai envisagé de réécrire la page pour utiliser une vidéo Youku par défaut, en écrivant une petite fonction JavaScript non bloquante qui tente d'atteindre YouTube. Si possible, remplacez le Youku par YouTube. Si ce n'est pas le cas, quittez-le sans risque. De cette façon, l'accessibilité de YouTube devient le critère clé, pas de savoir si vous êtes en Chine.

Alternativement, j'ai envisagé d'héberger la vidéo sur mon site, afin qu'elle soit répliquée via le CDN à l'intérieur du Great Firewall. Cependant, cela voudrait dire que la vidéo serait toujours téléchargée en pleine résolution, même si votre connexion était lente.

De meilleures suggestions sur la façon de basculer entre Youku et Youtube, ou plus généralement d'avoir une vidéo jouable à la fois à l'intérieur et à l'extérieur de la Chine?

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

    if(country == 'CN') {
        youku.attr('src',chinaVideo)
    } else {
        youku.attr('src',generalVideo)
    }
}, "jsonp");
javascriptvideoyoutubegreat-firewall-of-chinayouku
15
dankohn

Voici le code JavaScript avec lequel nous allons:

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

Nous incluons le lien Youku dans le code HTML et basculons vers YouTube si le pays n’est pas la Chine. Cela fonctionne toujours si la connexion à ipinfo.io a expiré, ce qui se produit parfois en Chine.

Edit: révisé pour ajouter un délai d'attente de 5 secondes.

6
dankohn

Il est préférable de vérifier spécifiquement si YouTube est bloqué sur le réseau de l'utilisateur plutôt que de filtrer les pays en fonction d'une adresse IP qui n'est jamais fiable à 100%. De cette façon, il fonctionnera même dans n'importe quel environnement d'école ou de bureau où YouTube pourrait être bloqué par l'administrateur du réseau pour une raison quelconque.

Ceci est la meilleure réponse que je puisse trouver à cet égard, qui essaie de charger la favicon de YouTube via JavaScript. Si vous réussissez à télécharger cette petite image, YouTube est accessible. L'image ne fait que 0,2 kilo-octet de téléchargement et est probablement déjà mise en cache par tout utilisateur ayant déjà visité YouTube.

Cela signifie que le résultat est presque instantané pour les utilisateurs ayant un accès à YouTube et prendra quelques secondes pour les utilisateurs dont les pare-feu sont bloqués. Le code est simple:

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";
});

Celle-ci est une meilleure solution que celle indiquée ci-dessus car elle n'attend pas l'événement document.ready de jQuery, l'image commence à se charger instantanément.

(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";
})();

Mise à jour basée sur les commentaires:

S'il est possible que l'image soit préalablement mise en cache sur l'ordinateur de l'utilisateur, l'ajout du paramètre d'horodatage actuel à l'URL de l'image garantit le chargement de l'image malgré la mise en cache précédente.

    image.src = "https://youtube.com/favicon.ico?_=" + Date.now();
3
Munim Munna

Toutes les meilleures suggestions sur la façon de basculer entre Youku et Youtube, ou plus généralement une vidéo jouable à la fois à l'intérieur et à l'extérieur de la Chine?

Je suggère de jeter un coup d'oeil à Alibaba Cloud. Ils ont un tas de services, mais autant que je sache, il n'y a pas de plan gratuit.
Comme je ne connais pas d’autres fournisseurs de cloud en Chine, laissez-moi vous décrire une solution pour Alibaba Cloud.

Je vois deux options possibles pour vous:

  1. utiliser leur CDN Service et créer deux offres JS - une pour la Chine et une autre pour le reste du monde. Le premier intégrera une vidéo de Youku et le second - de Youtube. Après les avoir téléchargés sur le CDN, vous pouvez forcer leur envoi vers les nœuds locaux en Chine/dans le monde, de sorte qu'il y ait toujours une réponse rapide et actualisée pour les utilisateurs;
  2. utiliser leur service de transcodage de média pour le traitement vidéo + service de stockage d'objets pour l'hébergement vidéo + service CDN pour la distribution. De cette façon, vous pouvez créer plusieurs vidéos de qualité différente et les distribuer près de vos utilisateurs. JS intégrera la vidéo directement à partir de CDN. Pour une vidéo, cela pourrait être excessif.
0
Aman Kubanychbek

Vous pouvez utiliser ffmpeg pour convertir la vidéo en version HLS. Créez à la main la liste de lecture HLS (.m3u8) basée sur RFC 8216. ffmpeg ne crée pas la liste de lecture principale pour vous. HLS aide à adapter la résolution à la vitesse d'Internet. Si vous combinez cela avec le lecteur multimédia gratuit javascript hls.js, vous pouvez l'héberger sur votre propre site afin de passer à travers le grand pare-feu de la Chine et de prendre en charge la résolution adaptative.

Voici un exemple de liste de lecture principale HLS afin que vous n'ayez pas nécessairement besoin de lire le RFC 8216, le fichier s'appellera Video.m3u8:

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-STREAM-INF:BANDWIDTH=5000000,RESOLUTION=1920x1080
Video_1080p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=9000000,RESOLUTION=2560x1440
Video_1440p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=16000000,RESOLUTION=3840x2160
Video_4k.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=2800000,RESOLUTION=1280x720
Video_720p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=1400000,RESOLUTION=842x480
Video_480p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=800000,RESOLUTION=640x360
Video_360p.m3u8

La bande passante est spécifiée en bits par seconde, l'ordre de qualité importe peu car le lecteur multimédia choisit la résolution à lire.

La commande que vous pouvez utiliser pour ffmpeg dans l'invite de commande est la suivante:

ffmpeg -hwaccel dxva2 -hide_banner -y -i "C:\input\Video.mp4" -vf scale=1920:1080 -c:a aac -ar 48000 -c:v h264 -profile:v main -crf 20 -r 30 -sc_threshold 0 -g 48 -keyint_min 48 -hls_time 2 -hls_playlist_type vod -b:v 5000k -maxrate 5350k -bufsize 7500k -b:a 192k -hls_segment_filename "C:\output\Video_1080p_%03d.ts" "C:\output\Video_1080p.m3u8" -vf scale=2560:1440 -c:a aac -ar 48000 -c:v h264 -profile:v main -crf 20 -r 30 -sc_threshold 0 -g 48 -keyint_min 48 -hls_time 2 -hls_playlist_type vod -b:v 9000k -maxrate 10350k -bufsize 14500k -b:a 192k -hls_segment_filename "C:\output\Video_1440p_%03d.ts" "C:\output\Video_1440p.m3u8" -vf scale=3840:2160 -c:a aac -ar 48000 -c:v h264 -profile:v main -crf 20 -r 30 -sc_threshold 0 -g 48 -keyint_min 48 -hls_time 2 -hls_playlist_type vod -b:v 16000k -maxrate 20350k -bufsize 26000k -b:a 192k -hls_segment_filename "C:\output\Video_4k_%03d.ts" "C:\output\Video_4k.m3u8" -vf scale=1280:720 -c:a aac -ar 48000 -c:v h264 -profile:v main -crf 20 -r 30 -sc_threshold 0 -g 48 -keyint_min 48 -hls_time 2 -hls_playlist_type vod -b:v 2800k -maxrate 2996k -bufsize 4200k -b:a 128k -hls_segment_filename "C:\output\Video_720p_%03d.ts" "C:\output\Video_720p.m3u8" -vf scale=842:480 -c:a aac -ar 48000 -c:v h264 -profile:v main -crf 20 -r 30 -sc_threshold 0 -g 48 -keyint_min 48 -hls_time 2 -hls_playlist_type vod -b:v 1400k -maxrate 1498k -bufsize 2100k -b:a 128k -hls_segment_filename "C:\output\Video_480p_%03d.ts" "C:\output\Video_480p.m3u8" -vf scale=640:360 -c:a aac -ar 48000 -c:v h264 -profile:v main -crf 20 -r 30 -sc_threshold 0 -g 48 -keyint_min 48 -hls_time 2 -hls_playlist_type vod -b:v 800k -maxrate 865k -bufsize 1200k -b:a 96k -hls_segment_filename "C:\output\Video_360p_%03d.ts" "C:\output\Video_360p.m3u8"

La seule chose dont vous auriez besoin est de remplacer C:\input\Video.mp4 par votre vidéo et de remplacer tous les C:\output\Video par un nom de sortie pour la vidéo. 360p représente la résolution spécifiée dans le nom du fichier vidéo de sortie, elle n’influence pas la résolution réelle.% 03d est une commande qui est analysée pour attribuer au fragment vidéo un nombre tel que 001 à 999. Le trait de soulignement est utilisé pour la lisibilité.

Explication des commentaires: - hwaccel dxva2 signifie que ffmpeg utilisera l’accélération matérielle à l’aide de directx, disponible à partir de Windows Vista et supérieur. et h264 sont les codecs à utiliser dans les fragments vidéo hls.

Cette commande pour ffmpeg génère 6 niveaux de qualité mais ne crée pas la liste de lecture principale. La liste de lecture principale est une liste de lecture avec liste de lecture par bande passante (voir ci-dessus). En fonction de la vitesse d'Internet, le lecteur hls choisit la liste de lecture des fragments vidéo à lire.

0
Cambesa

Votre solution actuelle n'est pas idéale car elle dépend du délai d'attente de la requête GET, ce qui ralentira le processus. Étant donné que le problème concerne principalement le blocage de ipinfo.io en Chine, il est probable qu'une solution efficace impliquerait un service d'identification IP basé en Chine.

Essayez d'utiliser http://www.ip138.com/. Google Translate fonctionne assez bien pour le lire en anglais. Il ne semble pas exister d'API JSON formelle, mais vous pouvez appuyer sur http://www.ip138.com/ips138.asp?ip=<IP_ADDRESS_HERE> et obtenir les informations de localisation.

Pour ce faire, naviguez dans le DOM avec jQuery (puisque vous l'utilisez déjà) jusqu'à la ligne avec 本站数据:, qui précédera le nom du pays. Je pense que le sélecteur pour cela car la page est actuellement construite est simplement $( "li" ).first(). Extrayez la chaîne après les deux points et le POST à l'API Google Translate pour obtenir le nom du pays en anglais et le tour est joué! Vous avez un moyen plus rapide et plus fiable (si considérablement plus compliqué) de voir si un visiteur est en Chine ou non.

EDIT: Il n’est pas clair si vous possédez déjà l’adresse IP de l’utilisateur. Sinon, vous pouvez utiliser une méthode similaire avec https://geoiptool.com/zh/, qui est également basé en Chine et n'est donc pas bloqué. Je suis heureux d'étoffer cette partie au besoin.

0
223seneca

OBTENIR DES INFORMATIONS LOCALES À PARTIR DE NAVIGATEURS À L'AIDE DE JAVASCRIPT

Pour accélérer le processus de détection, vous pouvez d’abord essayer d’extraire les informations sur les paramètres régionaux de la langue d’installation du package du navigateur:

navigator.language
navigator.languages

puis combinez-le ou, en tant que dernière ressource, utilisez l’emplacement géographique ou un autre moyen de détecter les préférences de langue de l’utilisateur à partir de l’en-tête HTTP Accept-Language.

Voici un exemple de service externe permettant de récupérer les en-têtes du navigateur:

https://ajaxhttpheaders1.appspot.com/?callback=getHeaders

Un autre chemin pouvant être associé à la solution ci-dessus consiste à extraire une chaîne de l'environnement utilisateur ou du contexte de navigation (window.location, document.cookie, document.localStorage, Date () ou Date (). ToLocaleString (), etc.) et balayez cette chaîne à la recherche du codet Unicode chinois à l’aide des plages Unicode à expressions régulières.

Je pense que cela vous donnera une très bonne approximation sans faire de demandes supplémentaires. Par exemple, dans mon navigateur Firefox, un appel aussi Date().toLocaleString() produit:

"Mon Jul 30 2018 01:35:38 GMT+0200 (Ora legale Dell’Europa centrale)"

qui peut être facilement analysé soit comme "italien".

Quelque part, vous trouverez un point Unicode d'un idéogramme/symbole chinois.

0
Diego Perini