曲线救国,实现在MediaWiKi中插入外链视频
MediaWiKi出于安全考虑是禁止插入外链媒体的,外链图片尚可通过css配置解决,但视频反复尝试都无法实现。
在腾讯云的对象存储中,发现了一段视频播放器的代码,想到一个曲线救国的方式。也就是将视频上传到COS中,然后在服务器上建一个HTML文件,将以下播放器代码复制进去。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta
name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no"
>
<title>播放器</title>
<link
href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/tcplayer.min.css"
rel="stylesheet"
>
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/libs/flv.min.1.6.2.js">
</script>
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/libs/hls.min.0.13.2m.js">
</script>
<script src="https://video-public-1259789488.cos.ap-guangzhou.myqcloud.com/lib/dash.all.min.js">
</script>
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.0/tcplayer.v4.5.0.min.js">
</script>
<style>
html,body{
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
}
.tcplayer {
margin: 0 auto;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<video
id="player-container-id"
preload="auto" width="100%"
height="100%"
playsinline
webkit-playsinline
></video>
<script>
var tcplayer = TCPlayer("player-container-id", {
reportable: false,
});
tcplayer.src('https://www.guohao.asia/picgo/202411121424692.mp4')
</script>
</body>
</html>
在MediaWiKi编辑过程中,插入以下代码,以<iframe>方式插入外链视频。
<html>
<head>
<title>播放器</title>
<style>
.responsive-iframe {
width: 100%; /* 宽度自适应 */
height: 100vh; /* 高度自适应 */
border: none;
}
</style>
</head>
<body>
<iframe class="responsive-iframe" src="https://docs.guohao.asia/video/shr/1.html" frameborder="0" allowfullscreen></iframe>
</body>
</html>