tinymce编辑器 插入视频链接 嵌入iframe视频
温馨提示:
本文最后更新于2023年07月06日,已超过1年5个月(约534天)没有更新,若内容或图片失效,请留言反馈。
TinyMCE编辑器功能强大,万物皆可自定义;视频媒体插入链接,生成自定义的iframe嵌入视频,网易云、BiliBili、抖音、腾讯视频、西瓜视频等等都可以,内容完全自定义。
比如哔哩哔哩视频,只需要输入BV号
或链接,就能引用iframe
嵌入视频。利用定义正则表达式和与之相关的属性,用于匹配和处理Bilibili视频链接,使用"iframe"
作为类型,设置好宽和高,使用播放地址URL并添加匹配到的BV号播放。
可以更改media
插件源码,也可以使用media_url_resolver
自定义生成逻辑,都可以实现。参考:media 插入编辑媒体
//网易云音乐 歌曲 歌单 专辑
{regex: /^https?:\/\/(?:y\.)?music\.163\.com\/(?:m|\#)\/playlist\?id=(\d+)/i, type: 'iframe', w: 400, h: 300, url: 'https://music.163.com/outchain/player?type=0&id=$1', allowFullscreen: false},
{regex: /^https?:\/\/(?:y\.)?music\.163\.com\/(?:m|\#)\/album\?id=(\d+)/i, type: 'iframe', w: 400, h: 350, url: 'https://music.163.com/outchain/player?type=1&id=$1', allowFullscreen: false},
{regex: /^https?:\/\/(?:y\.)?music\.163\.com\/(?:m|\#)\/song\?id=(\d+)/i, type: 'iframe', w: 400, url: 'https://music.163.com/outchain/player?type=2&id=$1', allowFullscreen: false},
//抖音视频
{regex: /^https?:\/\/(?:www|m)\.(?:ies)?douyin\.com\/(?:share\/)?video\/(\d+)/i, type: 'iframe', w: 680, h: 460, url: 'https://www.douyin.com/light/$1', allowFullscreen: true},
//西瓜视频
{regex: /^https?:\/\/(?:www|m)\.ixigua\.com\/(?:video\/)?(\d+)/i, type: 'iframe', w: 680, h: 460, url: 'https://www.ixigua.com/iframe/$1', allowFullscreen: true},
//AcFun
{regex: /^https?:\/\/www\.acfun\.cn\/v\/ac(\d+)/i, type: 'iframe', w: 680, h: 460, url: 'https://www.acfun.cn/player/ac$1', allowFullscreen: true},
{regex: /^https?:\/\/m\.acfun\.cn\/v\/\?ac=(\d+)/i, type: 'iframe', w: 400, h: 600, url: 'https://www.acfun.cn/player/ac$1', allowFullscreen: true},
//优酷
{regex: /^https?:\/\/(?:v|m)\.youku\.com\/(?:v_show|video)\/id_([\w\-\=]+)/i, type: 'iframe', w: 680, h: 460, url: 'https://player.youku.com/embed/$1', allowFullscreen: true},
//腾讯视频
{regex: /^https?:\/\/v\.qq\.com\/x\/(?:cover|page)\/.*?(\w+)\.html/i, type: 'iframe', w: 680, h: 460, url: 'https://v.qq.com/txp/iframe/player.html?vid=$1', allowFullscreen: true},
{regex: /^https?:\/\/m\.v\.qq\.com\/.*?vid=(\w+)/i, type: 'iframe', w: 400, h: 600, url: 'https://v.qq.com/txp/iframe/player.html?vid=$1', allowFullscreen: true},
//哔哩哔哩
{regex: /BV(.*)/i, type: 'iframe', w: 560, h: 314, url: '//player.bilibili.com/player.html?bvid=$1', allowFullscreen: true},
{regex: /^https?:\/\/(?:www|m)\.bilibili\.com\/video\/BV(\w+)/i, type: 'iframe', w: 680, h: 460, url: 'https://player.bilibili.com/player.html?bvid=BV$1', allowFullscreen: true},
{regex: /^https?:\/\/(?:www|m)\.bilibili\.com\/video\/av(\w+)/i, type: 'iframe', w: 680, h: 460, url: 'https://player.bilibili.com/player.html?aid=$1', allowFullscreen: true},
//搜狐
{regex: /^https?:\/\/tv\.sohu\.com\/v\/([\w\-\=]+)\.html(?:\?vid=(\d+))?/i, type: 'iframe', w: 680, h: 460, url: '//tv.sohu.com/s/sohuplayer/iplay.html?vid=$2', allowFullscreen: true},
{regex: /^https?:\/\/m\.tv\.sohu\.com\/u\/vw\/([\d]+)/i, type: 'iframe', w: 680, h: 460, url: 'https://tv.sohu.com/s/sohuplayer/iplay.html?bid=$1', allowFullscreen: true},
media_url_resolver: (data) => {
return new Promise((resolve) => {
let u;
let t;
let ixigua = data.url.match(/^https?:\/\/(?:www|m)\.ixigua\.com\/(?:video\/)?(\d+)/i);
let douyin = data.url.match(/^https?:\/\/(?:www|m)\.(?:ies)?douyin\.com\/(?:share\/)?video\/(\d+)/i);
let acfun = data.url.match(/^https?:\/\/www\.acfun\.cn\/v\/ac(\d+)/i);
let acfun_m = data.url.match(/^https?:\/\/m\.acfun\.cn\/v\/\?ac=(\d+)/i);
let bv = data.url.match(/^BV(\w+)/i);
let bilibili = data.url.match(/^https?:\/\/(?:www|m)\.bilibili\.com\/video\/BV(\w+)/i);
let bilibili_av = data.url.match(/^https?:\/\/(?:www|m)\.bilibili\.com\/video\/av(\w+)/i);
let youku = data.url.match(/^https?:\/\/(?:v|m)\.youku\.com\/(?:v_show|video)\/id_([\w\-\=]+)/i);
let sohu = data.url.match(/^https?:\/\/tv\.sohu\.com\/v\/([\w\-\=]+)\.html(?:\?vid=(\d+))?/i);
let sohu_m = data.url.match(/^https?:\/\/m\.tv\.sohu\.com\/u\/vw\/([\d]+)/i);
let qq = data.url.match(/^https?:\/\/v\.qq\.com\/x\/(?:cover|page)\/.*?(\w+)\.html/i);
let qq_m = data.url.match(/^https?:\/\/m\.v\.qq\.com\/.*?vid=(\w+)/i);
let music163_0 = data.url.match(/^https?:\/\/(?:y\.)?music\.163\.com\/(?:m|\#)\/playlist\?id=(\d+)/i);
let music163_1 = data.url.match(/^https?:\/\/(?:y\.)?music\.163\.com\/(?:m|\#)\/album\?id=(\d+)/i);
let music163_2 = data.url.match(/^https?:\/\/(?:y\.)?music\.163\.com\/(?:m|\#)\/song\?id=(\d+)/i);
if (ixigua) { u = 'https://www.ixigua.com/iframe/' + ixigua[1]; }
else if (douyin) { u = 'https://www.douyin.com/light/' + douyin[1]; }
else if (acfun) { u = 'https://www.acfun.cn/player/ac' + acfun[1]; }
else if (acfun_m) { u = 'https://www.acfun.cn/player/ac' + acfun_m[1]; }
else if (bv) { u = 'https://player.bilibili.com/player.html?bvid=BV' + bv[1]; }
else if (bilibili) { u = 'https://player.bilibili.com/player.html?bvid=BV' + bilibili[1]; }
else if (bilibili_av) { u = 'https://player.bilibili.com/player.html?aid=' + bilibili_av[1]; }
else if (youku) { u = 'https://player.youku.com/embed/' + youku[1]; }
else if (sohu) {
let bid = atob(sohu[1]).match(/^us\/\d+\/(\d+)/i);
if (bid) { u = 'https://tv.sohu.com/s/sohuplayer/iplay.html?bid=' + bid[1]; }
else if (sohu[2]) { u = 'https://tv.sohu.com/s/sohuplayer/iplay.html?vid=' + sohu[2]; }
}
else if (sohu_m) { u = 'https://tv.sohu.com/s/sohuplayer/iplay.html?bid=' + sohu_m[1]; }
else if (qq) { u = 'https://v.qq.com/txp/iframe/player.html?vid=' + qq[1]; }
else if (qq_m) { u = 'https://v.qq.com/txp/iframe/player.html?vid=' + qq_m[1]; }
else if (music163_0) { u = 'https://music.163.com/outchain/player?type=0&id=' + music163_0[1]; t = 'm'; }
else if (music163_1) { u = 'https://music.163.com/outchain/player?type=1&id=' + music163_1[1]; t = 'm'; }
else if (music163_2) { u = 'https://music.163.com/outchain/player?type=2&id=' + music163_2[1]; t = 'a'; }
if (u && !t) { t = 'v'; }
switch (t) {
case 'v':
resolve({ html: '<iframe src="' + u + '" width="680" height="460"></iframe>' }); break;
case 'm':
resolve({ html: '<iframe src="' + u + '" width="400" height="600"></iframe>' }); break;
case 'a':
resolve({ html: '<iframe src="' + u + '" width="400"></iframe>' }); break;
default:
resolve({ html: '' }); break;
}
});
},
寒星皓月》原创,转载请保留文章出处。
本文链接:https://www.wanghanyue.com/post-99.html
作品采用:知识共享署名 4.0 (CC BY-NC-SA 4.0) 国际许可协议 进行许可。
版权声明:若无特殊注明,本文为《正文到此结束
发表吐槽
你肿么看?
既然没有吐槽,那就赶紧抢沙发吧!