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.总结

是不是很简单，没啥技术含量，但是还是挺有意思的。哈哈哈。