曲线救国,实现在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>
0 0 投票数
文章评分
订阅评论
提醒
guest

0 评论
内联反馈
查看所有评论