HTML中嵌入B站视频

已于 2023-02-22 08:54:09 修改
阅读量3.6k 收藏 8
点赞数 1
分类专栏： 网络 文章标签： html
于 2023-02-16 21:28:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46143152/article/details/129071801
版权

HTML中嵌入B站视频

  • 在网页中实现一个HTML播放器
  • 需要先从b站获取视频嵌入代码, 以前嵌入代码可以从视频分享那里拿到, 现在好像不行了
    • 在这里插入图片描述
  • 必须是自己投稿的视频, 从投稿管理页面才能找到
    • 在这里插入图片描述
  • 复制嵌入代码
    • 在这里插入图片描述
  • 建一个.html文件, 放入下面代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Bilibili视频播放器</title>
  </head>
  <body>
    <iframe src="https://player.bilibili.com/player.html?bvid=BV17F411w7Qj&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</html>
  • 将iframe那行用嵌入代码替换掉, 注意要补充https:
  • 已嵌入到浏览器页面
    • 在这里插入图片描述
  • 可以结合github.io, 在自己的个人主页嵌入视频
  • 属性
    • scrolling: 滚动条属性
    • border: 边框样式
    • frameborder: 是否显示周围的边框
    • framespacing: 和border效果一致, 以framespacing为准
    • allowfullscreen: 默认开启全屏
小电动车
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
仿B站网页模板
09-17
仿B站网页模板
网页内嵌B站视频，隐藏相关控件
偷得浮生半日闲
07-19 1650
网页内嵌B站视频主要是用其中为必填，其它参数可以不填这个aid怎么获取呢？这就需要请求B站这个接口了。
在iframe里判断是video标签时_BILIBILI视频外链引用。iframe嵌入和第三方接口引用。...
weixin_33888685的博客
01-26 1161
iframe 嵌入和移动端高清免弹窗参数。iframe嵌入BiliBili视频方法B站视频外链 - 贝贝会员站​xbeibeix.com第三方接口引用：https://xbeibeix.com/api/bilibili/biliplayer/?url=（这里改成BILIBILI视频地址）可直接播放BILIBILI视频，无广告，无弹窗，无官方播放器界面。...
B站视频嵌入自定义网页 bilibili
weixin_45129599的博客
01-15 478
非正文如果wordpress嵌入 需要文章中 放一个Html，填写，把B站弄的 Iframe 标签放进去就行。需要CSS 自己加在行内样式。正文使用场景自己做的网页，小破服务器网络扛不住那么大的视频流压力有什么好办法？当然有，我说下我的解决方案将视频，上传到一个视频平台，然后通过一些手段，将平台上面的视频，嵌入到自己的网页内，这样流量的压力就由服务器，转移到了用户自己的网络。我们的服务器只需要负责...
网页中嵌入B站视频
scoutee的博客
11-26 4259
参考链接：网页中嵌入b站视频_技术小窝-CSDN博客 但是改用http来写 <iframe src="http://player.bilibili.com/player.html?aid=634151915&bvid=BV1Jb4y1t7uv&cid=440784525&page=1" scrolling="yes" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="wid
网页嵌入b站视频资源
爱吃桃儿的冰冰的博客
07-26 909
b站资源网页嵌入代码
【Bilibili视频嵌入技巧】如何嵌入720PBilibili视频
每日出拳老爷子的博客
11-16 3981
如果你需要将Bilibili的视频分享在别的论坛，Bilibili的视频分享有一个很方便的嵌入选项，点击后会自动复制嵌入视频前端代码到剪贴板。嵌入代码如下：
【LittleXi】如何将bilibili中的视频嵌入到自己网页中
qq_68591679的博客
10-17 4611
【LittleXi】如何将bilibili中的视频嵌入到自己网页中
纯HTML5+CSS3仿B站首页
weixin_48493613的博客
08-15 7989
纯HTML5+CSS3仿B站首页
【html+css+js】如何轻松在网页中嵌入b站视频？
最新发布
归忆_AC的博客
08-09 3798
教你轻松上手在网页中嵌入b站视频，简单的运用了html+css+js的知识，看不懂的直接按部就班也行。
HTML5+CSS3实现哔哩哔哩首页（完整版）
m0_63512120的博客
03-22 5950
本篇文章用html和css实现了哔哩哔哩首页面，希望这篇文章能够大家带来帮助，同时该页面的源代码和图片素材放在了文章末尾，需要了可以自行提取！
B站首页界面设计：附详细教程
07-12
为了防止代码资源因为系统原创检测被删除，使用zip压缩包，安装相应的解压缩软件才能解压，在意者勿下
Html5中文手册(程序员必备手册)
03-29
10、<b> 定义粗体文本。 11、<base> 定义页面中链接的基准 URL。 12、<bdo> 定义文本显示的方向。 13、<blockquote> 定义摘自另一个源的块引用。 14、<body> 定义文档主体。 15、 定义换行符。 16、<button> ...
html5-video-embed-code-along-v-000
02-18
HTML5视频嵌入代码 <iframe width =“ 640” height =“ 480” src =“ // ” frameborder =“ 0” allowfullscreen> </ iframe> 本实验中提供了所有需要遵循的文件。 只需单击“学习”中的“打开IDE”...
Halo-3-Favourites：谈论为什么我喜欢Halo 3及其三部曲的网站
02-14
iframe（嵌入视频） 表单（为用户输入创建表单），输入type =“ text”（与按钮相同）为什么谈论Halo 3 好吧，这是一个个人项目。 我想在一个有趣而有趣的网站上工作。使用CSS重制Halo 3收藏夹网站额外的了解了如何...
django2 用iframe标签完成 网页内嵌播放b站视频功能
weixin_30823833的博客
06-20 4818
前言： 　　给自己的网站中加入视频资源，有两种方法，一种是用iframe标签引用外站资源，另一种则使用video标签，获取站内资源进行视频播放。其中前者顾名思义，是将视频资源上传到视频网站中，然后通过引用的方式在站内播放视频，这种方法适用于视频资源内容公开免费，且不想花钱购买七牛云空间的开发者，毕竟是免费的嘛！而后者，则是需要有云空间存放视频资源才可以，不过后者的好处是，可以用于视频付费内容的开...
网站引入b站视频的方法
程序员
07-08 6254
当我们做网站时需要引入B站视频，该怎么办呢，其实B站已经给我们提供了引入代码，把下方代码中的地址替换成你想要引入的视频地址即可 <fieldset><iframe src="//player.bilibili.com/player.html?aid=753941281&bvid=BV1Zk4y127E5&cid=215189705&page=1" width="1024" height="640" frameborder="no" scrolling="n.
B站头部代码
Wqy0401113的博客
05-04 1218
【代码】B站头部代码。
嵌入b站视频却显示Your browser doesn't support video tag.
05-28
您可以使用以下代码嵌入B站视频： ```html <iframe src="//player.bilibili.com/player.html?aid=视频ID&cid=章节ID&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值