Github博客视频与音频Flash模块无法加载问题

出现的问题

在写上一篇博文时,我需要将b站上视频与网易云音乐嵌入到其中。在写博文时,我用了$ hexo s命令,在http://localhost:4000/进行本地预览。本地预览时,视频与音频均正常显示,一切似乎都是那么完美,然而当我上传后,在360浏览器上打开后视频与音频区一片空白,好吧我一下就懵逼了。

寻找根源

排除浏览器兼容性

作为小白,我首先想到了是否为浏览器兼容性问题,所以我试了其他浏览器,ChormeIEEdgeFirefox,然而均无法正常显示。

排除github仓库出现问题

不甘心的我又试了手机浏览器,惊喜出现了,UC上视频与音频均可以正常显示,也就是说github并没有出现问题,我怀疑是UC多装了某个插件,而这个插件导致它与其他浏览显示的不同。

排除插件问题

既然可能是插件问题,我首先想到了Hexo的插件库,我在其中又发现了新希望。我找到了许多有tag字样的插件,其中就有hexo-tag-bilibili,我觉得这个插件既然存在那可能是专门应对插入bilibli视频的。好吧下载安装插件,再进行相关设置,其README.txt上提示要在博文中插入代码并替换av号,显示视频。然而失望的是,我发现这个插件仅仅类似一个模板,省了其他代码,只需输入av号罢了。

发现IE上可以正常显示

实在不甘心,我在多次寻找答案时,偶尔打开IE,发现用IE打开我的博客出现了是否加载不安全项的提示,确认后网页正常显示。我又将360浏览器由极速模式改为兼容IE模式,也可以正常显示。一开始我又怀疑了兼容性的问题,无果。既然IE浏览器可以出现安全提示,为什么其他浏览器不出现呢。

问题根源——脚本安全问题

偶然下,我在360的网址栏更改兼容性的旁边发现了一个灰色盾牌图标,这是在其他正常网页上没有的。点击后,果然显示如下:


点击加载后果然正常显示。我分别试了其他浏览器,均找的了这样的提示,最后也都能正常显示。也就是说视频和音频是由于被浏览器禁止而不能显示。

问题根源——网络协议(http与https)

那么是什么导致这种安全问题呢,我在百度上偶然百度到一则问题:
在自己的博客上放了一个微博官方的挂件,打开博客时浏览器提示有不安全的脚本,请问怎么解决?
该问题与我所出现的问题如出一辙,回复中解释了这一现象:

你网站用的https,调用的http的东西,当然报不安全咯。

果然我发现github pages博客是https,而国内大多数网站都是http,这一不同导致了https无法调用http中的部件,这种现象被称作“跨域”。以下为这种现象产生的原因:

HTTPS和HTTP的概念和区别
为什么国内网站不用 https?
HTTPS 要比 HTTP 多用多少服务器资源?

解决办法

经过百度,https直接调用http部件目前来说几乎是不可能的,以下为一些网上的解决办法的讨论:

如何在HTTPS里调用HTTP资源不出现提示框(博客)
换种思路解决http与https之间的页面调用问题
如何在HTTPS里调用HTTP资源不出现提示框(百度知道)

其中大多数方法都比较深奥,我也难以很好总结,不过百度知道那个回答让我看到了一丝曙光。他的一条建议大概是将网址http后加个s试试。

经过测试网易云音乐(使用iframe标签)可以正常显示,国内各大视频网站中只有腾讯视频(使用iframe标签)可以正常显示。这么一套有一种微信的感觉。

虽然腾讯视频可以嵌入,但是不得不说腾讯视频的广告太长,播放器太难看,而且还需要寻找自适应的方法,否则在手机上不能很好显示,我就舍弃了直接嵌入视频的想法,而是使用b站logo链接b站上,并直接定位到播放器,这样手机上也能正常显示。以下是上一篇博客的一部分代码:

<a href="http://www.bilibili.com/video/av1444910#player_placeholder">
<image 
src="/images/bilibili.svg" 
style=
"border:none;   width:120px;   float:left;" >
</image>
</a>

最后大概就是这样,虽然有一点小毛病,偶尔会出现“资源加载失败”的提示,但总体来说还算差强人意。