0%

Hexo | Adding Videos

Posted on Edited on In

通过视频平台实现

即通过调用视频平台的iframe来实现。但是iframe有一个非常蛋疼的问题(主要是视频，音频问题不大)：

  • 如果不指定宽度、高度，则默认的视频框是非常小的300px x 150px，只适合手机查看；
  • 而指定高度、宽度后，又不会自适应缩放，尤其是手机上不能自适应缩小，观感会很差；
  • 宽度可通过width=”100%”来自适应屏幕宽度；但高度100%没用，自动的话又会是默认的150px，而不是保持视频长宽比进行缩放。
  • 上面提到的Hexo内置的iframe标签插件也存在该问题

这个问题似乎很普遍，网上有不少讨论。常见的做法就是将iframe放入一个容器中，并在容器的参数中设定一个高宽比(padding-bottom)，从而实现视频高度随宽度按比例缩放。最后还要在容器外再加一层段落元素<p>...</p>来换行。具体可参考Responsive IFrames — The Right Way (CSS Only)!

这种做法缺点很明显：你需要在插入iframe代码的地方逐个手动添加容器代码；而且对于不同长宽比的视频还需要定义多个容器来设置不同比例，比如常见的16:9的视频就是56.25%(9/16)，而4:3的视频则是75%(3/4)。不过对于插入视频不多的，这些缺点其实还好。

还有一种比较理想的做法，是使用jQuery(JavaScript)，具体可参考Fluid Width Video、Make YouTube Videos Auto-Resize in a Responsive Site Layout.

这种做法的缺点就是你至少需要了解一点JavaScript；你也可以引入外部jQuery，但考虑到国内的网络环境还是蛋疼。

实现方式1

先定义CSS，这个CSS可以放到专门的css文件中(需要研究一下)，也可以在文中添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style type="text/css">
.videoWrapper{
    position: relative;
    overflow: hidden;
    height: 0;
}

.ratio-16-9 {
    padding-bottom: 56.25%; /* 16:9 */
    }

.ratio-4-3 {
    padding-bottom: 75%; /* 4:3 */
    }

.videoWrapper iframe{
    position: absolute;
    width: 100% !important;
    height: 100%;
    left: 0;
    top: 0;
} 
</style>

然后在文中添加

1
2
3
4
<p><div class="videoWrapper ratio-16-9">
<iframe src="https://embed.ted.com/talks/lang/en/thomas_hellum_the_world_s_most_boring_television_and_why_it_s_hilariously_addictive"
 width="854" height="480" frameborder="0" scrolling="no" allowfullscreen></iframe>
</div></p>

效果

实现方式2

直接在文中添加

1
2
3
4
5
<p><div style="position:relative;height:0;padding-bottom:56.25%">
<iframe style="position:absolute;left:0;top:0;width:100%;height:100%"
 src="https://embed.ted.com/talks/lang/en/thomas_hellum_the_world_s_most_boring_television_and_why_it_s_hilariously_addictive"
 width="854" height="480" frameborder="0" scrolling="no" allowfullscreen></iframe>
</div></p>

效果

格式工厂转换视频

只有AVC转换的可以在dplayer上播放, 其余两种不行的.但是体积比较大,需要压缩, 否则加载太慢！.txt
H.256，对应HVEC？ 可同时保证清晰度和体积较小，但是不能在dplayer上播放。

通过DPlayer实现

检查是否有插件hexo-tag-dplayer.
检查方法npm list查看是否安装过hexo-tag-dplayer
如果没有, 执行下面代码实现安装

1
npm install --save hexo-tag-dplayer

Reference

从零开始建立个人博客V：插入音视频
从零开始建立个人博客VI：网页排版