在 Vue 中插入 B 站视频

前言

在 Vue 项目中，有时我们需要嵌入 B 站视频来丰富页面内容，为用户提供更直观的信息展示。本文将详细介绍在 Vue 中插入 B 站视频的多种方法。

使用<iframe>标签直接嵌入,<iframe>标签是一种简单直接的方式，可将 B 站视频嵌入到 Vue 页面中。

步骤一

获取 B 站视频分享链接：打开 B 站视频页面，点击视频下方的 “分享” 按钮，在弹出的分享菜单中，选择 “嵌入代码” 选项。复制生成的<iframe>代码，其格式大致如下：

<iframe src="//player.bilibili.com/player.html?aid=视频aid&bvid=视频bvid&cid=视频cid&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

在实际应用中，若只关注视频的 BV 号（一种 B 站视频的唯一标识），可以简化链接格式。例如：

<iframe src="//player.bilibili.com/player.html?bvid=视频bvid" allowfullscreen></iframe>

在 Vue 模板中使用：在 Vue 组件的<template>部分，直接粘贴上述<iframe>代码。假设我们在一个名为VideoComponent.vue的组件中插入视频，代码如下：

<template><div><iframe src="//player.bilibili.com/player.html?bvid=你的视频bvid" allowfullscreen></iframe></div>
</template>

样式调整：默认情况下，嵌入的视频可能不符合页面的整体风格。我们可以通过 CSS 样式对其进行调整。例如，在组件的<style>部分设置视频的宽度、高度和边框等样式：

<style scoped>iframe {width: 100%; /* 视频宽度占父容器100% */height: 450px; /* 设置视频高度 */border: none; /* 去除边框 */border - radius: 8px; /* 添加圆角 */}
</style>

优点

1. 简单便捷：无需额外安装插件或复杂配置，直接利用 B 站提供的分享链接即可实现视频嵌入。
2. 兼容性好：几乎所有现代浏览器都支持<iframe>标签，能够确保视频在各种设备和浏览器上正常播放。
   缺点
3. 定制性有限：无法直接对视频播放器的功能进行深度定制，如添加自定义控制按钮、改变播放进度条样式等。
4. 可能影响 SEO：搜索引擎在抓取页面内容时，对于<iframe>中的内容抓取效果可能不佳，这可能会对页面的搜索引擎优化产生一定影响。

升级版

我们如果想要实现更高级的功能，如获取视频信息（标题、播放量、弹幕等）、控制视频播放状态等，可以结合 B 站的 API。
B站Api接口：https://api.bilibili.com/x/web-interface/view?bvid=BV1q8ExzYELA

将上面的Bvid替换成先前获取的即可。这里需要后端去调接口处理，因为前端可能会出现跨域错误。

优点

1. 功能强大：能够实现丰富的功能，如根据视频播放量进行排序展示、实时获取弹幕并显示等，大大提升用户体验。
   定制性强：可以根据项目需求，灵活地调用 API 获取所需数据，并进行个性化的处理和展示。
   缺点
2. 开发难度增加：需要了解 B 站 API 的使用方法，处理 API 请求过程中的错误和异常，以及对返回数据进行解析和处理，增加了开发的复杂度。
3. API 使用限制：B 站 API 可能有调用频率限制、数据返回格式变化等问题，需要密切关注 B 站开放平台的文档更新，以确保项目的正常运行。

end

通过以上方法，我们可以在 Vue 项目中顺利地插入 B 站视频，并根据项目需求选择合适的方式实现更丰富的功能。希望本文能帮助你在 Vue 开发中更好地利用 B 站视频资源。