在網頁中使用iframe嵌入B站視訊(騰訊視訊同理)

在網頁中使用iframe嵌入B站視訊(騰訊視訊同理)

先上效果:

首先是自己的頁面:

點選圖片後出現一個遮罩、遮罩上顯示B站的視訊:

這個效果很常見,例如在索尼中國的網站中:

點選圖中的播放圖示會出現騰訊視訊的iframe視窗:

那麼下面來看程式碼:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.video-btn{
position: absolute;
width:1080px;
height: 500px;
background:black;
top:50px;
left: 0px;
right: 0px;
margin: 0 auto;
display: none;
z-index: 101;
}
.video-area{
width:100%;
height: 100%;
background:black;
}
iframe{
width: 100%;
height: 100%;
}
.video-shut{
height:25px;
width:25px;
border-radius: 12.5px;
font-size:medium;
color:black;
float:left;
text-align: center;
font-weight: bolder;
background: white;
display: block;
position: absolute;
top: -15px;
right: -15px;
}
#shadow{
position: absolute;
opacity: 0.5;
filter:alpha(opacity=50);
bottom:0;
left: 0;
right: 0;
top: 0;
background:black;
z-index: 100;
display: none;
}
</style>
</head>
<body>
<center>
<div class="main" style="height: 100px;margin-top: 100px;">
<a href="javascript:;" class="video" id="video"><img src="http://i1.hdslb.com/bfs/archive/[email protected]_100h.webp"></a>
</div>
<div class="video-btn" id="video-btn">
<div class="video-area" id="video-area"></div>
<a class="video-shut" id="video-shut">×</a>
</div>
<div id="shadow"></div>
</center>
</body>
</html>
<script type="text/javascript">
var obtn=document.getElementById('video');
var ovideo=document.getElementById('video-btn');
var oatn=document.getElementById('video-area');
var oshut=document.getElementById('video-shut');
var oshadow=document.getElementById('shadow');
obtn.onclick=function () {
ovideo.style.display='block';
oshadow.style.display='block';
oatn.innerHTML='<iframe src="http://player.bilibili.com/player.html?aid=6117110&cid=9931722&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>';
}
oshut.onclick= function () {
ovideo.style.display='none';
oshadow.style.display='none';
oatn.innerHTML="";
}
</script>

這裡面的視訊地址可以在B站視訊的下方分享視窗獲取:

注意!這裡獲取到的嵌入程式碼是:

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

URL少了傳輸協議,需要加上http:或者https:,否則會以file來傳輸

<iframe src="http://player.bilibili.com/player.html?aid=6117110&cid=9931722&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

最後,嗶哩嗶哩 (゜-゜)つロ 乾杯~-bilibili