个人网站引入B站视频播放,个人博客播放B站视频。【1080P】

news/2024/7/10 0:40:22 标签: html, vue, js, css, 小道仙

最近想在个人博客播放我在B站上面的视频,花了三个下午,终于做好了。
有兴趣的可以先看看最终效果: https://www.xdx97.com/video

1、代码如下

html"><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>css">
    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"css">  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

html">https://player.bilibili.com/player.html?aid=94996320&bvid=BV1YE411T7Rc&cid=162171640&page=1&high_quality=1

http://www.niftyadmin.cn/n/774974.html

相关文章

工厂模式【创建型模式】

一、引入工厂模式 假如我们有一个手机接口里面有一个打电话方法&#xff08;call&#xff09;&#xff0c;它有两个实现类小米手机和华为手机。我们现在要去调用这两个实现类的call方法。 1-1:根据上面的说明写出代码 1-1-1&#xff1a; Phone public interface Phone {void …

原型模式【创建型模式】

文章首发个人博客&#xff1a;https://www.xdx97.com/article/703593125049794560 一、引出原型模式 如果我们有一个类&#xff08;sheep&#xff09;&#xff0c;它里面有两个属性&#xff0c;名称&#xff08;name&#xff09;&#xff0c;年龄&#xff08;age&#xff09;。…

建造者模式【创建型模式】

文章优先发表在个人博客&#xff1a; https://www.xdx97.com/article/704350509187727360 1、引出建造者模式 根据说明写出代码 我们需要建造房子&#xff0c;房子的种类有多种&#xff0c;这里只要求两种&#xff1a;平房、高楼。建房的过程两个&#xff0c;打地基、盖房。&a…

适配器模式【结构型模式】

一、引出适配器模式概念 我们要给手机充电&#xff0c;但是我们知道家用电是220v&#xff0c;而我们的手机一般是5v&#xff0c;如果我们直接使用那显然是不行的。这时候我们就需要一个转换器&#xff0c;也就是我们的充电器。它在内部把220v转换成5v。 我们的适配器也是同理&…

桥接模式【结构型模式】

文章优先发表在个人博客&#xff1a;https://www.xdx97.com/article/705731339978014720 1、引出桥接模式 我们有一个手机产品&#xff0c;手机下面有多个类型&#xff08;直板、翻盖&#xff09;&#xff0c;每个手机有多个生产商(小米、华为)。 我们可以按照下图的思路去构建…

装饰者模式【结构型模式】

文章优先发表在个人博客&#xff1a;https://www.xdx97.com/article/706183532841533440 一、引入装饰者模式 我们现在有一个卖咖啡的需求。我们有咖啡&#xff0c;我们也有配料&#xff08;巧克力、牛奶…&#xff09;。现在我们要设计一个程序计算用户这杯咖啡的价格。&#…

推荐一个录屏,一个录Gif超好用的软件

文章优先发表在个人博客&#xff1a;https://www.xdx97.com/article/706472689027514368 一、ScreenToGif ScreenToGif 是一款开源的录屏软件&#xff0c;它主要是用来录Gif的。 我们在写文章的时候有时候需要演示一下效果&#xff0c;使用这么软件最好不过了。 1-1&#xff1a…

面试题10- II. 青蛙跳台阶问题

面试题10- II. 青蛙跳台阶问题