网页内嵌B站视频，隐藏相关控件

网页内嵌 B 站视频主要是用 ifame , 其地址是：

https://player.bilibili.com/player.html?cid=&aid=84267566&page=1&as_wide=1&high_quality=1&danmaku=0

后面的参数说明：

key	属性
cid	应该是客户端iid，可以不填
aid	视频id，必填
page	B站视频, 选集里的, 第几个视频 (默认值为1）
as_wide	是否宽屏 1: 宽屏, 0: 小屏
high_quality	是否高清
danmaku	是否开启弹幕 1: 开启(默认), 0: 关闭

其中 aid 为必填，其它参数可以不填

这个 aid 怎么获取呢？这就需要请求 B 站这个接口了

https://api.bilibili.com/x/web-interface/view?bvid=BV1gY4y1E7h8

1、aid获取

bvid怎么获取？在 B站播放视频中的 url 里我们可以看到

如果网页上传 链接提取的话就需要先去访问上面的地址获取视频 aid

我们可以叫后端去访问，前端提供 bvid，后端去请求 B 站获取 aid 的地址，根据所得内容返回给前端

2、封装

这里以 vue 为例：

<template>
  <div class="iframe-box">
    <div class="vedio">
      <iframe
        class="vedio-iframe"
        :src="src"
        frameborder="no"
        scrolling="no"
        danmaku="0"
        allowfullscreen="true"
        id="iframe"
        sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"
      ></iframe>
    </div>
  </div>
</template>

ifame参数说明：

key	属性
allowfullscreen	设置true为时，可以通过调用的requestFullscreen()方法激活全屏模式
scrolling	这个属性控制是否要在框架内滚动显示 auto: 当框架的内容超出范围时显示的滚动条。yes: 实时显示滚动条。no: 从不显示滚动条。
frameborder	此属性1值时显示，此框架的默认0使用屏幕
…	…

这里就不在多详述了，可以参考这个 iframe

js部分代码:

<script setup lang="ts" name="iframe">
import ( ref ) from "vue";

const props = defineProps({
  cid: {
    type: String,
    default: "",
  },
  aid: {
    type: String,
    default: "",
  },
  page: {
    type: String,
    default: "1",
  },
  as_wide: {
    type: String,
    default: "1",
  },
  high_quality: {
    type: String,
    default: "1",
  },
  danmaku: {
    type: String,
    default: "0",
  },
})

const { cid, aid, page, as_wide, high_quality, danmaku } = props;

const baseURL = "https://player.bilibili.com/player.html?";

const src = ref<String>(`${baseURL}cid=${cid}&aid=${aid}&page=${page}&as_wide=${as_wide}&high_quality=${high_quality}&danmaku=${danmaku}`);

</script>

css部分代码：

<style lang="scss" scoped>
.iframe-box {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.vedio {
  width: 100%;
  // 因为要隐藏下面的提示，所有多加 40px, 如果要隐藏控件就多加 30px
  height: calc(100vh + 40px);
  min-height: 300px;
  position: relative;
  padding: 0;
  overflow: hidden;
  margin: 0;
  box-sizing: border-box;

  .vedio-iframe {
    width: 100%;
    height: 100%;
    border: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
}
</style>

最终结果：

原本不去除下边的样子 ：

目前只知道怎么隐藏下面，其它的暂时不懂，因为获取不到 iframe 中的元素，无法修改其样式