Handsome主题增强视频挂载、支持多平台-iColak's Blog

[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]

目录CONTENT

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

介绍