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();
})
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/203.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【详细介绍下图搜索算法】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…

NLP问答系统:使用 Deepset SQUAD 和 SQuAD v2 度量评估

目录 一、说明 二、Deepset SQUAD是个啥&#xff1f; 三、问答系统&#xff08;QA系统&#xff09;&#xff0c;QA系统在各行业的应用及基本原理 3.1 医疗 3.2 金融 3.3 顾客服务 3.4 教育 3.5 制造业 3.6 法律 3.7 媒体 3.8 政府 四、在不同行业使用QA系统的基本原理 五、关于…

GPS NMEA-0183 协议

一文读懂 GPS NMEA-0183 协议 - 知乎 GPRMC Recommended Minimum Specific GPS/TRANSIT Data&#xff08;RMC&#xff09;推荐定位信息 $GPRMC,<1>,<2>,<3>,<4>,<5>,<6>,<7>,<8>,<9>,<10>,<11>,<12>…

Java中可变个数形参的方法:初学者易懂的指南

Java中可变个数形参的方法&#xff1a;初学者易懂的指南 在Java编程中&#xff0c;可变个数形参&#xff08;Varargs&#xff0c;即variable number of arguments&#xff09;是一个非常实用的特性。它允许我们在定义方法时&#xff0c;指定一个参数可以接受任意数量的值。这对…

Java 合并两个相同的List集合多种方法解析

Java 合并两个相同的List集合多种方法解析 引言1. 使用addAll()方法方法说明 2. 使用concat()方法&#xff08;Java 8及以上版本&#xff09;3. 使用CopyOnWriteArrayList类&#xff08;线程安全场景&#xff09;4. 使用Collections.union()静态方法 引言 在Java编程中&#xf…

基于知识图谱的大学生就业能力评价和职位推荐系统——超详细要点总结(创作不易,还请点赞)

1. 职位节点&#xff08;Position&#xff09;&#xff1a; 软件工程师 数据科学家 系统架构师 网络安全专家 人工智能工程师 嵌入式系统工程师 物联网工程师 大数据工程师 前端/后端开发工程师 云计算工程师 区块链工程师 自然语言处理专家 软件测试工程师 人机交…

使用自己训练好的模型YOLOv8进行X-AnyLabeling自动标注

目录 1. 下载项目2. 创建环境3. 运行程序3.1 自行下载和添加官方模型3.2 使用自己训练好的模型标注自己的数据集 本机环境&#xff1a;win 10&#xff0c; GPU 1. 下载项目 git clone https://github.com/CVHub520/X-AnyLabeling.git2. 创建环境 仔细查看项目的README文件 …

游游的you矩阵

题目&#xff1a; 游游拿到了一个字符矩阵&#xff0c;她想知道有多少个三角形满足以下条件&#xff1a; 三角形的三个顶点分别是 y、o、u 字符。三角形为直角三角形&#xff0c;且两个直角边一个为水平、另一个为垂直。 输入描述&#xff1a; 第一行输入两个正整数n,m&#…

reduce用法

//实现一个repeat方法&#xff0c;要求如下&#xff1a; // 需要实现的函数 // const repeatFunc repeat(console.log, 4, 3000); // repeatFunc(“hello world”); //会输出4次 hello world, 每次间隔3秒 //利用map实现 function repeat(func, times, wait) { // 补全 re…

CSS简单的选择器

标签选择器 与网页元素同名的选择器。常用于与设置网页默认效果&#xff0c;或者统一常用元素的基本样式。 p{font-size&#xff1a;10px&#xff1b; }类选择器 可以为网页对象定义不同的样式&#xff0c;实现不同元素拥有相同的样式&#xff0c;相同元素的不同对象拥有不同…

Root mapping definition has unsupported parameters: [all : {analyzer=ik_max_wor

你们好&#xff0c;我是金金金。 场景 我正在使用Springboot整合elasticsearch&#xff0c;在创建索引(分词器) 运行报错&#xff0c;如下 排查 排查之前我先贴一下代码 import org.elasticsearch.action.admin.indices.create.CreateIndexRequest; // 注意这个包SpringBootTe…

文字转语音工具:GPT-SoVITS

诸神缄默不语-个人CSDN博文目录 OpenAI官方的TTS模型我在这篇博文中给出了使用教程&#xff1a;ChatGPT 3.5 API的调用不全指南&#xff08;持续更新ing…&#xff09; - 知乎 但是OpenAI的TTS对中文支持不好&#xff0c;有一种老外说中文的美&#xff0c;所以本文介绍另一个…

windows@允许挂载http链接@挂载局域网http链接

文章目录 资源管理器挂载网络驱动器&#x1f47a;允许http链接映射为磁盘驱动器&#x1f60a;可选更改:文件大小限制 刷新使配置生效重启webclient服务 基本操作执行映射取消映射 资源管理器挂载网络驱动器&#x1f47a; 对于共享文件夹(smb)协议(\\server\sharefolder)类型的…

自己的事情自己做:使用 Python Turtle 绘制 Python Logo

以下代码中&#xff0c;将向你展示一个有趣的程序&#xff0c;如何使用 Python Turtle 中绘制 Python Logo。Python 翻译成汉语是蟒蛇的意思&#xff0c;Python 的 Logo 也是两条缠绕在一起的蟒蛇。 import turtlepen turtle.Turtle() turtle.bgcolor("black") pe…

ins视频批量下载,instagram批量爬取视频信息【爬虫实战课1】

简介 Instagram 是目前最热门的社交媒体平台之一,拥有大量优质的视频内容。但是要逐一下载这些视频往往非常耗时。在这篇文章中,我们将介绍如何使用 Python 编写一个脚本,来实现 Instagram 视频的批量下载和信息爬取。 我们使用selenium获取目标用户的 HTML 源代码,并将其保存…

Python路面车道线识别偏离预警

程序示例精选 Python路面车道线识别偏离预警 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对《Python路面车道线识别偏离预警》编写代码&#xff0c;代码整洁&#xff0c;规则&#xff0c;易…

AOP动态修改注解值及异步子线程请求头丢失问题

1、动态注入参数&#xff1a;通过AOP注解占位符&#xff0c;匹配目标方法参数&#xff0c;可用于日志记录等场景 AOP 注解动态注入参数 - 简书 2、spel表达式匹配目标方法的参数进行动态入参 自定义注解动态入参绑定_注解参数值动态注入-CSDN博客 3、Java没有提供直接设置线…

Leetcode 225:用队列实现栈

请你仅使用两个队列实现一个后入先出&#xff08;LIFO&#xff09;的栈&#xff0c;并支持普通栈的全部四种操作&#xff08;push、top、pop 和 empty&#xff09;。 实现 MyStack 类&#xff1a; void push(int x) 将元素 x 压入栈顶。int pop() 移除并返回栈顶元素。int to…

tsconfig.json文件常用配置

最近在学ts&#xff0c;因为tsconfig的配置实在太多啦&#xff0c;所以写此文章用作记录&#xff0c;也作分享 作用&#xff1f; tsconfig.jsono是ts编译器的配置文件&#xff0c;ts编译器可以根据它的信息来对代码进行编译 初始化一个tsconfig文件 tsc -init配置参数解释 …

测试 rtpengine 的 sip-source 参数

修改 /etc/rtpengine/rtpengine.conf 文件&#xff0c;增加一行配置&#xff1a; sip-source true # 一般不需要这样配置&#xff0c;本文仅为说明问题 offfer 部分的日志如下&#xff1a; [1713246486.390578] DEBUG: [1-5025192.168.43.126]: [control] Dump for offer from…