最近想在個人博客播放我在B站上面的視頻,花了三個下午,終於做好了。
有興趣的可以先看看最終效果: https://www.xdx97.com/video
1、代碼如下
<html>
<head>
<title>播放B站視頻</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="關鍵字" />
<meta name="description" content="本頁描述或關鍵字描述" />
</head>
<style>
body{
display: flex;
justify-content: center;
}
.video{
width: 1200px;
height: 800px;
border: 1px red solid;
}
</style>
<body>
<div class="video">
<iframe src="https://player.bilibili.com/player.html?aid=95712170&bvid=BV11E411V7p8&cid=163401832&page=1&high_quality=1"
scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="height: 100%;width: 100%;" > </iframe>
</div>
</body>
</html>
2、自定義視頻播放
<iframe src="//player.bilibili.com/player.html?aid=94996320&bvid=BV1YE411T7Rc&cid=162171640&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
我們取出 src 裏面的內容,然後加上前綴 https: 加上後綴 &high_quality=1
最後得出我們的 url ,替換到前面的代碼裏面去就好了。這個後綴就是爲了達到 1080P
https://player.bilibili.com/player.html?aid=94996320&bvid=BV1YE411T7Rc&cid=162171640&page=1&high_quality=1