iframe
教程地址:简书
原生iframe
因为 hexo 对于 iframe 的支持并不是很好,所以添加的视频会在左侧而且很小,所以这种直接插入的方式并不是很好,建议加上美化代码(后面有)
示例写法:
1 2 3
| {% raw %} <iframe src="//player.bilibili.com/player.html?aid=286717667&bvid=BV18f4y197P1&cid=223433464&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe> {% endraw %}
|
播放器美化
默认演示使用哔哩哔哩
加入了美化代码style="position: relative; width: 100%; height: 0; padding-bottom: 75%;"
后,播放器美观多了
示例写法:
1 2 3 4
| {% raw %} <div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;"> <iframe src="//player.bilibili.com/player.html?aid=286717667&bvid=BV18f4y197P1&cid=223433464&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; Left: 0; top: 0;" ></iframe></div> {% endraw %}
|
下面是其他平台的视频测试,除了哔哩哔哩外,推荐优酷
其它平台因为有广告所以不推荐使用
优酷视频
有些视频有广告,封面显示略微有问题,但是可以直接切换高清(B站只能 360p)
示例写法:
1 2 3 4
| {% raw %} <div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;"> <iframe src='https://player.youku.com/embed/XNDU2ODc1MzUwMA==' scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; Left: 0; top: 0;"></iframe></div> {% endraw %}
|
腾讯视频
极不推荐,视频有广告且有些视频只能看三分钟
示例写法:
1 2 3 4
| {% raw %} <div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;"> <iframe src="https://v.qq.com/txp/iframe/player.html?vid=z313555g6ad" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; Left: 0; top: 0;"></iframe></div> {% endraw %}
|
芒果TV
貌似无法使用,可能是我加的链接不正确
1 2 3 4
| {% raw %} <div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;"> <iframe src= "https://player.mgtv.com/mgtv_v6_out/main.swf?video_id=9578912" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; Left: 0; top: 0;"></iframe></div> {% endraw %}
|
主题Volantis提供的方法
教程地址:Volantis官方文档
示例写法:
因为我使用了资源文件夹,视频文件保存在资源文件夹里,所以直接使用了wr.mp4
这个路径
当然,也可以直接使用链接来插入视频