前言
在 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>
優點
- 簡單便捷：無需額外安裝插件或復雜配置，直接利用 B 站提供的分享鏈接即可實現視頻嵌入。
- 兼容性好：幾乎所有現代瀏覽器都支持
<iframe>標簽，能夠確保視頻在各種設備和瀏覽器上正常播放。
缺點 - 定制性有限：無法直接對視頻播放器的功能進行深度定制，如添加自定義控制按鈕、改變播放進度條樣式等。
- 可能影響 SEO：搜索引擎在抓取頁面內容時，對于
<iframe>中的內容抓取效果可能不佳，這可能會對頁面的搜索引擎優化產生一定影響。
升級版
我們如果想要實現更高級的功能，如獲取視頻信息（標題、播放量、彈幕等）、控制視頻播放狀態等，可以結合 B 站的 API。
B站Api接口：https://api.bilibili.com/x/web-interface/view?bvid=BV1q8ExzYELA
將上面的Bvid替換成先前獲取的即可。這里需要后端去調接口處理，因為前端可能會出現跨域錯誤。
優點
- 功能強大：能夠實現豐富的功能，如根據視頻播放量進行排序展示、實時獲取彈幕并顯示等，大大提升用戶體驗。
定制性強：可以根據項目需求，靈活地調用 API 獲取所需數據，并進行個性化的處理和展示。
缺點 - 開發難度增加：需要了解 B 站 API 的使用方法，處理 API 請求過程中的錯誤和異常，以及對返回數據進行解析和處理，增加了開發的復雜度。
- API 使用限制：B 站 API 可能有調用頻率限制、數據返回格式變化等問題，需要密切關注 B 站開放平臺的文檔更新，以確保項目的正常運行。
end
通過以上方法，我們可以在 Vue 項目中順利地插入 B 站視頻，并根據項目需求選擇合適的方式實現更豐富的功能。希望本文能幫助你在 Vue 開發中更好地利用 B 站視頻資源。
)
)
