侧边栏壁纸
博主头像
iColak's Blog

人生来来往往,来日并不方长

  • 累计撰写 106 篇文章
  • 累计创建 31 个标签
  • 累计收到 381 条评论

目 录CONTENT

文章目录

Handsome主题增强视频挂载、支持多平台

苏维歌
2022-05-04 / 41 评论 / 0 点赞 / 15 阅读 / 0 字 / 正在检测是否收录...
温馨提示:
本文最后更新于2024-07-05,若内容或图片失效,请留言反馈。 部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

[t-primary icon='']原创不易,转载请注明出处,感谢![/t-primary]

介绍

本次修改主要是对handsome主题的编辑器进行了适当修改,在写文章时可以非常方便的插入视频,为文章增光添彩。

支持的平台

根据云视频解析接口决定,目前支持大部分视频平台,具体可查看对应云解析平台说明。 参考接口:https://www.ahhhhfs.com/13620/

优点

  • 针对哔哩哔哩和抖音做了针对性优化,其他平台视频基本没有问题。
  • 省去每次手动码代码的麻烦
  • 哔哩哔哩启用720p高清,替代默认的480p

修改方法

[reply]

设置云视频解析接口

使用动态设置接口的好处就是以后万一某个接口用不了了,可以只换个接口,无需其他设置 在主题设置开发者设置->自定义输出head头部的HTML代码中添加 [collapse status="false" title="点击展开"]
[/collapse]

优化文章页样式

在主题设置开发者设置->自定义CSS中添加 [collapse status="false" title="点击展开"]
/*视频挂载*/
.iframe_video {
    position: relative;
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .iframe_video {
        height: 15em;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .iframe_video {
        height: 20em;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .iframe_video {
        height: 30em;
    }
}

@media only screen and (min-width: 1200px) {
    .iframe_video {
        height: 40em;
    }
}

.iframe_cross {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%
}

.iframe_cross iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}
[/collapse]

为编辑器增加按钮

usr/plungins/Handsome/asset/js/editor.min.js文件中29行左右插入以下代码 [collapse status="false" title="点击展开"]
'
  • 插入iframe视频
  • '
    [/collapse] 在usr/plungins/Handsome/asset/js/editor.min.js文件中204行左右插入以下代码 [collapse status="false" title="点击展开"]
    $(document).on('click', '#wmd-iframe-button', function() {//iframe视频
      $('body').append(
      '
    '+ '
    '+ '
    '+ '
    '+ '

    插入iframe视频地址

    '+ '

    bilibili粘贴iframe代码、抖音直接粘贴分享的文本

    '+ '

    其他视频地址需要附带网络协议(http/https)

    '+ '

    请在下方的输入框内输入要插入的视频地址

    '+ '

    '+ '
    '+ '
    '+ ''+ ''+ '
    '+ '
    '+ '
    '); $('.wmd-prompt-dialog input').val("http://").select(); }); $(document).on('click', '#iframe_ok',function () { var iframe_url_str = $('.wmd-prompt-dialog input[name="iframe_url"]').val() var host_pattern = /([0-9a-z.]+)\// var host_url = host_pattern.exec(iframe_url_str)[0] var host = host_url.split('.').slice(-2).shift() var str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'; var ramdomStr = ''; for (var i = 8; i > 0; --i){ ramdomStr += str[Math.floor(Math.random() * str.length)]; } switch (host) { case 'douyin': var dy_pattern = /https:\/\/(.*)\// var dy_iframe_url = dy_pattern.exec(iframe_url_str)[0] var textContent = '
    ' myField = document.getElementById('text'); inserContentToTextArea(myField,textContent,'#iframePanel'); break; case 'bilibili': var b_pattern = /\/\/(.*)&page=1/ var b_iframe_url = b_pattern.exec(iframe_url_str)[0] var textContent = '' myField = document.getElementById('text'); inserContentToTextArea(myField,textContent,'#iframePanel'); break; default: var o_pattern = /(https?:\/\/)([0-9a-z.]+)(:[0-9]+)?([/0-9a-z.]+)?(\?[0-9a-z&=]+)?(#[0-9-a-z]+)?/ var iframe_url = o_pattern.exec(iframe_url_str)[0] var textContent = '
    ' myField = document.getElementById('text'); inserContentToTextArea(myField,textContent,'#iframePanel'); } }) $(document).on('click','#iframe_cancel',function() { $('#iframePanel').remove(); $('textarea').focus(); });
    [/collapse] [/reply]

    成品

    抖音

    [VideoIframe]https://v.douyin.com/FDXAFQS/[/VideoIframe]

    哔哩哔哩

    [VideoIframe]//player.bilibili.com/player.html?aid=426128202&bvid=BV1r3411K7dH&cid=590222046&page=1[/VideoIframe]

    腾讯视频(类似、就不演示了)

    0
    1. 支付宝打赏

      qrcode alipay
    2. 微信打赏

      qrcode weixin
    3. QQ打赏

      qrcode qq

    评论区