月度归档:2017年12月

引用视频网站资源的正确姿势

1.前言

目前大部分网站如果需要嵌入视频的话,应该都是先把视频上传到视频网站平台上(如腾讯视频、爱奇艺、优酷等),然后再引用视频网站平台的资源,而引用的方式则是插入视频网站提供的分享代码。

腾讯视频、爱奇艺、优酷等视频网站都提供了多种引用方式,分别有 flash 地址、html、通用代码等。

2.Flash 与 Html 代码引用

众所周知,目前 Flash 已经逐渐衰落,各大视频网站也正在逐渐向 HTML5 技术转移。所以 Flash 的引用方式兼容性很差,PC 端目前还能正常使用,而移动端基本上已经惨不忍睹了。如果你用的是 Chrome 浏览器,那么你应该看过下面的提示:

所以就不要用 flash 这种方式了。

现在看看各家视频网站提供的 Html 代码:

<embed type="application/x-shockwave-flash" src="url" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" ></embed>

看到 application/x-shockwave-flash 没有?这种引用方式实际上也是依赖的 flash,在手机上也是完全不显示,因此这个方式也不推荐。

3.通用代码

之所以叫通用代码是因为它的特点是通用,以腾讯视频为例,看看代码:

<iframe frameborder="0" width="1280" height="720" src="https://v.qq.com/iframe/player.html?vid=t00253jl9mv&tiny=0&auto=0" allowfullscreen></iframe>

它是直接用 iframe 嵌入视频地址,然后网页在加载的时候 iframe 包含的视频部分就会由视频网站负责渲染,并以最佳的方式呈现,所以不管是 PC 端还是移动端都能正常显示播放。

因此通用代码是最佳的引用方式。当然,如果你的网站是纯粹面向 PC 端的,那么用 html 代码 embed 暂时也是没问题的。

4.可能会出现的问题

通用代码虽然是相对最优的选择,但是也有可能出现问题,比如引用了上面的代码,PC 端访问正常,移动端虽然也能正常访问,但是视频上下两端都出现了一大截黑块,高度无法自适应。

解决思路

让 iframe 宽度为 100%,与父容器宽度一致,高度动态计算赋值。把视频比例当成 16:9 来处理,则 iframe 高度为: height = 父容器宽度 * 9 /16

转成代码

<iframe id="video_iframe" frameborder="0" width="100%" height="" src="https://v.qq.com/iframe/player.html?vid=t00253jl9mv&tiny=0&auto=0" allowfullscreen></iframe>

把 js 代码放在 /body 之前

<script type="text/javascript">
    iframe = document.getElementById('video_iframe');
    //parent-id 为 iframe 的父容器 id
    iheight = document.getElementsById("parent-id").offsetWidth *9/16;
    iframe.style.height = iheight + "px";
</script>
THE END

如何优雅地给网站添加赞赏功能?

1.前言

前阵子发布了一个很小的开源项目 reward.js,这是一个高效且通用的、低侵入性的赞赏功能。不论何种类型的网站,仅仅在需要显示赞赏功能的页面引入一行 JS 代码即可实现这个功能。

 2.添加赞赏步骤

  1. 下载 reward.min.js
  2. 把 reward.min.js 文件里的两个二维码图片链接改为自己的并上传到服务器上
  3. 在对应的页面插入下面这行代码即可显示赞赏按钮。(同样把下面的 src 的链接修改为你服务器上的 reward.min.js 的链接。)
<script type="text/javascript">document.write(unescape("%3Cdiv id='reward' %3E%3C/div%3E%3Cscript src='http://www.shelwee.com/wp-content/themes/shelwee/js/reward.min.js' type='text/javascript'%3E%3C/script%3E"));</script>

至此,你就可以把上面这行代码引用到任何你想放的地方。

假如你同时运营多个网站,那只要把上面那行代码分别放到不同网站页面的指定位置就行了。一次配置,任意使用。够优雅吧?

3.后期更新计划

目前这个版本在 PC 端使用没有发现任何问题,但这还远远不够。后期的更新计划如下:

  • 支持识别微信 WebView
  • 增加支持移动端显示

本想支持移动端场景,但考虑到通过微信公众号阅读原文链接(或公众号菜单等)跳转到网站更加高频,而其它移动端场景暂时不考虑,使用场景及频率都不高。所以仅支持第一条即可覆盖绝大部分使用场景。

所以最后计划要实现的功能就是: reward.js 如果识别到是用微信 WebView 在阅读网站内容,就只显示微信赞赏码。

THE END