主题

2022-05-15
572
2.9m

利用smplayer插入音频和视频 ​

在plugins.js中添加播放器vuepress-plugin-smplayer

bash
module.exports = [
  
  '@vuepress-plugin-smplayer@1',]//音频视频播放器

在项目目录输入以下命令安装本地插件

bash
yarn add vuepress-plugin-smplayer@1

使用artplayer插入自己网盘上的视频 ​

在markdown文件中使用以下代码来插入视频加载会有点卡顿

bash
<Artplayer :src="{url:'https://pan.241315.xyz/video01/%E8%AE%B8%E5%93%B2/许哲3小时直播.mp4'}" />

效果如下:

利用xgMusic插入自己网盘上的音频 ​

bash
<ClientOnly>
  <Xgplayer :src="xgMusic" />
</ClientOnly>

<script>
  export default {
    data() {
      return {
        xgMusic: {
          url: [
            {
              src: "https://pan.241315.xyz/audio01/%E9%9F%B3%E4%B9%90/孤勇者.mp3",
              name: "陈奕迅-孤勇者", 
              poster:
              "https://pic.241315.xyz/2024/04/1c986ccfdae4029c2e33e575d60fa09b.png",                      
            },
          ],
          height: 35,
          type: "music",
        },
      };
    },
  };
</script>

效果如下:

利用meting插入音频（网易云音乐） ​

bash
<ClientOnly>
  <Meting auto="https://music.163.com/#/song?id=1901371647" />
</ClientOnly>

效果如下

B站视频插入 ​

目前站外引用最高只有360P画质 无解 最多加入标签禁止自动跳转b站和打开网页自动开始播放视频

bash
<Bilibili bvid="BV1zt411t79A" scrolling="no" border="0" frameborder="no" framespacing="0"  sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts" />

分P测试

bash
<Bilibili
  bvid="BV1Eg411S7tt"
  :page="73" scrolling="no" border="0" frameborder="no" framespacing="0" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts" />

效果如下

youtube视频插入 ​

bash
<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
    <iframe src="https://www.youtube.com/embed/ih1l6wb7LhU" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"></iframe>
</div>

效果如下（需自备梯子）

最近更新