MENU

博客中插入视频自适应

• April 5, 2019 • Read: 155 • 默认分类

Typecho博客中插入视频自适应电脑页面和手机页面,做到自适应大小的方案

使用感受

使用 Mirages 有段时间了,好看和流畅没话说,但插件和视频插入官方介绍文章略有不足,所以写篇文章说说Mirages实现插入视频。官方说明文档

有两张方法实现插入视频,用插件和传到B站(没广告)

插件问题

Mirages修改了插件调用接口,故需要修改插件才能用,这点官方有介绍

这里举荐雨中·JW player,我们需要修改插件51和52行

Typecho_Plugin::factory('Mirages_Plugin')->contentEx = array('JWPlayer_Plugin','jwparse');
Typecho_Plugin::factory('Mirages_Plugin')->excerpt = array('JWPlayer_Plugin','txtparse');

下载已经修改好的

PJAX - 页面无刷新更新也存在问题,需要到主题设置中关闭

插入其他站点

经常遇到要插入爱奇艺、优酷或者B站视频,不过直接用 iframe 存在大小无法控制问题
<iframe id="spkj"
src="https://player.bilibili.com/player.html?aid=11010451&cid=18223167&page=1" 
scrolling="no" 
border="0" 
frameborder="no" 
framespacing="0" 
allowfullscreen="true" 
width=100%> 
</iframe>
<script type="text/javascript">  
document.getElementById("spkj").style.height=document.getElementById("spkj").scrollWidth*0.76+"px";
</script>&gt;

效果如图

src引用链接必须是“player.bilibili.com”

在播放页分享中可以找到

就这样

Last Modified: July 25, 2019
Leave a Comment

11 Comments
  1. 雨中 ·JW players这个怎么插入哔哩哔哩视频0.0@(惊讶)

    1. @崽崽插件要直链的,你可以试试只用他播放器css@(呵呵)

    2. @崽崽B站等视频网站播放链接都加密了,只能分享,你直接像我教程这样做也挺方便的@(哈哈)

  2. 雨中 ·JW players这个怎么插入哔哩哔哩视频0.0@(惊讶)

  3. 兄弟,typecho的 修改完 直接整个插件死机

    1. @Roninqq多少大佬指导指导

  4. 兄弟,typecho的 修改完 直接整个插件死机

    1. @Ronin不好意思,学生党,回复的慢,你用的多少版本,把你改了的插件发个截图给我看看,或者直接用我改好的@(吐舌)

  5. 其实有更简单的方法
    !!!

    document.getElementById("spkj").style.height=document.getElementById("spkj").scrollWidth*0.76+"px";

    >
    !!!

    1. @六号博客6666,有时间我重新排个版,话说你怎么找到这篇文章的@(哈哈)

    2. @liucan百度搜的。