# 曲线救国，实现在MediaWiKi中插入外链视频

- 连结：https://blog.guohao.asia/%e6%9b%b2%e7%ba%bf%e6%95%91%e5%9b%bd%ef%bc%8c%e5%ae%9e%e7%8e%b0%e5%9c%a8mediawiki%e4%b8%ad%e6%8f%92%e5%85%a5%e5%a4%96%e9%93%be%e8%a7%86%e9%a2%91.html
- 发布时间：2024-11-12T16:42:36+08:00
- 作者：null

中文   英文   韩语   日语

## 曲线救国，实现在 MediaWiKi 中插入外链视频

MediaWiKi 出于安全考虑是禁止插入外链媒体的，外链图片尚可通过 css 配置解决，但视频
反复尝试都无法实现。

在腾讯云的对象存储中，发现了一段视频播放器的代码，想到一个曲线救国的方式。也就是
将视频上传到 COS 中，然后在服务器上建一个 HTML 文件，将以下播放器代码复制进去。

    ```language-default
    <!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> 方式插入外链视频。

    ```language-default
    <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>
    ```
