Wiki.js尚未支持在Markdown中直接解析 video
标签视频文件和YouTube等外部嵌入式视频,可通过在页面注入JS解析代码实现视频嵌入播放。以下代码注入可实现YouTube、Screencast视频嵌入Wiki.js,并可通过 video
标签解析mp4视频文件。
在Wiki.js管理后台进入 Admin Area -> Theme -> Code Injection,在 Head HTML Injection 下注入以下代码。
<script type="text/javascript" defer>
const rxYoutube = /^.*^((?:https?:)?\/\/)?((?:www|m)\.)?((?:youtube\.com|youtu.be))(\/(?:[\w\-]+\?v=|embed\/|v\/|shorts\/)?)([\w\-]+)(\S+)?$/
const rxScreencast = /^.*^((?:https?:)?\/\/)?(www\.)?(screencast\.com)(\/users)\/([a-z0-9_-]+)\/folders\/([a-z0-9%_-]+)\/media\/([a-z0-9_-]+)(?:\/)?$/im
window.boot.register('vue', () => {
window.onload = () => {
document.querySelectorAll('.contents oembed, .contents a').forEach(elm => {
const url = elm.hasAttribute('url') ? elm.getAttribute('url') : elm.getAttribute('href')
let newElmHtml = null
const ytMatch = url.match(rxYoutube)
const scMatch = url.match(rxScreencast)
if (ytMatch) {
newElmHtml = `<iframe id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube-nocookie.com/embed/${ytMatch[5]}" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`
} else if (scMatch) {
newElmHtml = `<iframe id="scplayer" type="text/html" width="640" height="360" src="${url}/embed" frameborder="0" allowfullscreen></iframe>`
} else if (url.endsWith('.mp4')) {
newElmHtml = `<video controls autostart="0" name="media" width="640" height="360"><source src="${url}" type="video/mp4"></video>`
} else {
return
}
}
const newElm = document.createElement('div')
newElm.classList.add('responsive-embed')
newElm.insertAdjacentHTML('beforeend', newElmHtml)
elm.replaceWith(newElm)
})
}
})
</script>
在 CSS Override 下注入以下样式代码。
.responsive-embed {
position: relative;
padding-bottom: 56.2%;
height: 0;
margin: 10px 0;
overflow: hidden;
}
.responsive-embed iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 5px;
}
在Markdown编辑器直接粘贴YouTube视频链接即可,比如:https://www.youtube.com/watch?v=KOc146R8sws