Typecho插件改造dplayer为＜video＞ 标签

本文主要是介绍Typecho插件改造dplayer为＜video＞ 标签，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

背景意义,插件脱离依赖,将dplayer 改成视频插入插件

由

[dplayer url="/typecho/usr/uploads/2024/03/2377219763.mp4" pic="" danmu="false" /]

成

<video src="/typecho/usr/uploads/2024/03/2377219763.mp4" controls="true" > </video>

改造方法很简单

修改typecho/usr/plugins/DPlayer/assets/editor.js

将其中的插入 [dplayer] 标签改成插入 <video>即可

最终案例代码如下

$(function () {
if ($('#wmd-button-row').length > 0) {$('#wmd-button-row').append('<li class="wmd-button" id="wmd-dplayer-button" style="" title="插入视频"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABGUlEQVQ4T6XTvyuFURgH8M9lkTKYlMGiRDKIxSQDkcFgYVAmi8WPwY+Uxa8FhWQmWdgMiAxmf4BYpFAGSRkY6K1z6tJ1vTdnfc/zOU/P830z/nkyoX4GIyjHHKrQjyXUoh3raEQT9nGDjQQowjk6cYcBnOIJHbjCY4DecYtK7KIrAUqwiNHweh16sRa+DWEbD5jAIS5QgekIJB0cB3kwgNXowTLq0YpNNKMB92iLwALGCpznSnYHP4EyvP4B5gX6wlaGcfkL9Cewh0/sYDIMMdtKBcSCN4xjK0tIDXyE6c/ipVAg2Xmynescc/jWQQxSvNeCUpzl2cQqpmKUj0JsC4nCSRL/+DMl66rBcwqhGN04wHwEUtTlvvIFs5ZDZeiythMAAAAASUVORK5CYII="/></li>');
}$(document).on('click', '#wmd-dplayer-button', function () {$('body').append('<div id="DPlayer-Panel">' +'<div class="wmd-prompt-background" style="position: absolute; top: 0; z-index: 1000; opacity: 0.5; height: 875px; left: 0; width: 100%;"></div>' +'<div class="wmd-prompt-dialog">' +'<div>' +'<p><b>插入视频</b></p>' +'<p>在下方输入参数</p>' +'<p><input type="text" id="DP-url" value="" placeholder="链接"/></p>' +'<p><input type="text" id="DP-pic" value="" placeholder="封面图"/></p>' +'<p><input type="text" id="width" value="" placeholder="视频宽度"/></p>' +'<p><input type="checkbox" id="controls" checked>开启控件</input></p>' +'<p><input type="checkbox" id="DP-autoplay">自动播放</input></p>' +'</div>' +'<form>' +'<button type="button" class="btn btn-s primary" id="ok">确定</button>' +'<button type="button" class="btn btn-s" id="cancel">取消</button>' +'</form>' +'</div>' +'</div>');
});
//cancel
$(document).on('click', '#cancel', function () {$('#DPlayer-Panel').remove();$('textarea').focus();
});
//ok
$(document).on('click', '#ok', function () {var url = document.getElementById('DP-url').value,pic = document.getElementById('DP-pic').value,width = document.getElementById('width').value,controls = !!document.getElementById('controls').checked,autoplay = !!document.getElementById('DP-autoplay').checked;var tag = '<video src="' + url+ '" ';if(pic) tag +=  'pic="' + pic + '" ';if (controls) tag += 'controls="' + controls + '" ';if(width) tag += 'width="' + width + '" ';if (autoplay) tag += 'autoplay="' + autoplay + '" ';tag += '> </video>\n';var editor = document.getElementById('text');if (document.selection) {editor.focus();sel = document.selection.createRange();sel.text = tag;editor.focus();}else if (editor.selectionStart || editor.selectionStart === '0') {var startPos = editor.selectionStart;var endPos = editor.selectionEnd;var cursorPos = startPos;editor.value = editor.value.substring(0, startPos)+ tag+ editor.value.substring(endPos, editor.textLength);cursorPos += tag.length;editor.focus();editor.selectionStart = cursorPos;editor.selectionEnd = cursorPos;}else {editor.value += tag;editor.focus();}$('#DPlayer-Panel').remove();
})
});

这篇关于Typecho插件改造dplayer为＜video＞ 标签的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---