Alternative Video Source According to IP Address

一个根据ip所在地选择视频源的小插件。

我在撰写上篇博文的时候遇到了一个有趣的问题：如何根据ip所在地选择视频源？

由于你很了解的一个原因，国外流行的视频网站（e.g.YouTube）在国内一般不能访问。为了同时照顾大陆和其他国家地区的视频观看者，@李扬彦博士把我们的视频分别上传到了优酷和YouTube上。于是，作为一名勤奋勇敢的大陆人民（我自豪！），我当然是优先选择嵌入优酷上的视频。但我随后又萌生了一个念头：如果访问者是个外国朋友，访问优酷不一定能像 YouTube 般顺畅（尤其是前者还有万恶的30秒广告！）。能否根据ip所在地的不同，让ip地址不在中国的朋友使用YouTube上的视频源呢？

于是我就基于 jQuery 和 AJAX 写了这个插件。思路很简单：

  1. 默认先加载优酷上的视频；
  2. 读取访问者的ip信息，判断其所在的国家（或地区）；
  3. 如果所在地不是地大物博，千秋万代的大陆地区，就自动将视频源切换到YouTube上；
  4. 用户还可以通过下方的选择按钮切换视频源。

用法

安装配置 jQuery

首先确保当前站点已经加载了 jQuery 插件，具体过程参看官网。把它加载到页面的 </head> 标签之前。

下载本插件

然后下载本插件，然后同样在页面的 </head> 之前加载，但 必须是在 jQuery 之后 ，否则会提示函数未定义。

加载视频

完成后就可以在页面中加载视频了，效果见上篇博文。在要加载视频的位置插入以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div id="videogfw">
<script type="text/javascript">
    var default_src = "default video source(
        should looks like: http://xxx.com/xxx)"
    var alternate_src = "alternative video source(
   	should looks like: http://xxx.com/xxx)"

    // the default video source you wanna play
    chooseVideo(default_src);  

   // Uncomment the following line if you want
   // it automatically select the video source 
   // according to ip address:
   // videoGFW(alternate_src);
</script>
</div>
选择视频来源：
<ul>
  <li>
    <button class="btn" onclick="chooseVideo(default_src)">
      优酷
    </button>
  </li>
  <li>
    <button class="btn" onclick="chooseVideo(alternate_src)">
      YouTube
    </button>
  </li>
</ul>

说明

  1. default_src 和 alternate_src 分别是默认视频源和备选视频源的地址，格式通常类似 http://xxx.com/xxx 。这个地址通常可以在视频网站的“分享（share）”处找到 11有时是嵌在<iframe>标签对的src属性里。 。例如我所嵌的视频的优酷视频源为http://player.youku.com/embed/XNTkwMTUwODQ0。
  2. 默认情况下，该插件并不会自动根据ip所在地切换视频源，因为我把那一句话的命令注释掉了。也就是说，如果你希望其他国家或地区的访问者访问你的页面时自动切换到备选地址的视频源，请把代码中那句 // videoGFW(alternate_src); 的注释给去掉。
  3. 这个插件支持大多数允许使用 <iframe> 分享到其他站点的视频网站 22啊哈，虽然我只测试了优酷和YouTube。lol。
  4. 是的，加载在你的网站上的这个插件看起来和我的有点不同，因为我并没有定义它的样式。你可以自行修改样式，以让它看起来和你的站点风格统一。
  5. 想验证它的有效性吗？我是不会告诉你怎么通过穿墙查看你的页面的。
  6. 别贪心，一个页面暂时只能嵌入一个视频。因为我是根据id名来修改内容的，两个id名一样的div会引起冲突。如果你有改进的方法，别犹豫给我发邮件吧！也欢迎在本页面或插件的gist页面提交评论。另外我还不确定这个插件能否在RSS阅读器里正常工作，但即使不能正常工作，大不了只是不显示视频或者一次性显示所有视频源。我想这个问题不是很critical，因为大部分人都不会喜欢直接在RSS阅读器里看视频吧？
  7. 如果你在使用过程中遇到了什么问题，欢迎在此评论。如果你用了我的插件，也欢迎跟我分享你的体验！

Comments

▲