1.给博客加点东西
今天网上冲浪,看到一个好玩的。事情的起因是这样的,我想看一集凡人修仙传,但是没有b站的大会员,于是就找了个免费的网站看了一集。emm。。。然后我好奇,F12了一下,把他的一个元素复制下来放到了咱们的博客系统,测试了一下
虽然没啥技术含量。分享给大家。先看看效果。哈哈哈。分享这种东西有点心虚。
2.代码
其实实现起来挺简单的。核心模块就是
<div class="video-player-box default-border-radius">
<iframe
id="myVideo"
src="https://jx.ikancloud.cn/?url="
preload="preload"
frameborder="0"
border="0"
marginwidth="0"
marginheight="0"
allowfullscreen="true"
scrolling="no">
</iframe>
</div>
<div class="video-page-input-box">
<el-input placeholder="请输入/粘贴要播放的视频地址" v-model="yourUrl"></el-input>
<el-button type="primary" @click="videoAnalysis">解析一下</el-button>
</div>
script的代码如下
<script>
export default {
data(){
return{
yourUrl:''
}
},
methods:{
videoAnalysis(){
let video = document.getElementById('myVideo')
console.log(this.yourUrl)
video.src="https://jx.ikancloud.cn/?url="+this.yourUrl
//接口地址,有可能变,所以单独放出来吧
}
}
}
</script>
好了,这就完成了,哈哈哈哈。还挺有意思的啊。我测试了一下腾讯视频和优酷视频,还是可以的。b站不行。
虽然有意思,但希望大家还是支持正版,比如我就开了会员
虽然有意思,但希望大家还是支持正版,比如我就开了会员
虽然有意思,但希望大家还是支持正版,比如我就开了会员
3.嵌入b站播放器
再分享一个嵌入b站视频的方法。
我们以康师傅的博客系统教程为例
点击复制
<iframe src="//player.bilibili.com/player.html?aid=244378204&bvid=BV1Dv411y7zU&cid=228651217&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
把这段代码放在你的html代码中,就可以实现如下界面
4.总结
是不是很简单,没啥技术含量,但是还是挺有意思的。哈哈哈。